新人研修の記録6

2018年1月23日
技術情報, Android

こんにちは、Tamamoです。

今回はじめてViewFlipperを使い、画像の切り替えを行いましたので、
紹介します。

スマホに表示された画像を左右どちらかにフリックすると別の画像に切り替わるという
ご経験があると思います。
フリックで画像を切り替える場合、onTouchEventやGestureDetectorの実装が必要になるため
ここでは例としてボタンを押すことで画像の切り替えを行いたいと思います。

まず、ViewFlipperとButtonをレイアウトに定義します。

<?xml version=”1.0″ encoding=”utf-8″?>
<android.support.constraint.ConstraintLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:app=”http://schemas.android.com/apk/res-auto”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:context=”com.example.tamamo.slide_test.MainActivity”>

</android.support.constraint.ConstraintLayout>

そして、続けて「layout」フォルダに新規で1枚目の画像と、２枚目の画像を
first.xml、second.xmlにImageViewでそれぞれ定義します。

first.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<android.support.constraint.ConstraintLayout
xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:app=”http://schemas.android.com/apk/res-auto”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>

second.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<android.support.constraint.ConstraintLayout
xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:app=”http://schemas.android.com/apk/res-auto”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>

以上でレイアウトは完了です。
次に、MainActivityに以下のようなコードを書いていきます。

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ViewFlipper;

public class MainActivity extends AppCompatActivity {

private ViewFlipper viewFlipper;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

viewFlipper = findViewById(R.id.flipper);

//左ボタン
findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// クリック時の処理
viewFlipper.showPrevious();
}
});

//右ボタン
findViewById(R.id.button2).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// クリック時の処理
viewFlipper.showNext();
}
});
}
}

ビルドすると以下のような画像が表示され、左右のボタンを押すことで
画像を切り替えることができます。

また、切り替えの際にアニメーションを付けることも可能です。
フリックしたときに画像を切り替えたい場合は、
onTouchEventとGestureDetectorを実装することで、
フリック動作を検出できます。

ViewFlipperは手軽に画像切り替えができるんですね！
これを応用すればビジュアル的にも面白いアプリが作れそうです！

火曜日担当：Tamamo