【Android】ViewFlipperを使う

投稿者: | 2011年5月27日

ViewFlipperは、その領域内の子Viewの要素を次々と切り替えることができるUIである。
SlidingDrawerと同じく、うまく使えば限られた画面内にUIを効果的に配置できるだろう。

以下にViewFlipperの使用例を示す。

レイアウトxml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
	<Button
		android:text="next"
		android:id="@+id/nextButton"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"/>
    <Button
    	android:text="prev"
    	android:id="@+id/prevButton"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"/>

    <ViewFlipper
    	android:id="@+id/flipper"
    	android:layout_width="fill_parent"
    	android:layout_height="wrap_content"
    	android:layout_weight="1"
    	android:inAnimation="@android:anim/slide_in_left">

		<TextView
		    android:layout_width="fill_parent"
		    android:layout_height="wrap_content"
		    android:text="text1"
		    />
		<LinearLayout
			android:layout_width="fill_parent"
    		android:layout_height="fill_parent">
    		<TextView
			    android:layout_width="fill_parent"
			    android:layout_height="wrap_content"
			    android:text="text2"
		    />
    	</LinearLayout>
    	<RelativeLayout
			android:layout_width="fill_parent"
    		android:layout_height="fill_parent">
    		<TextView
			    android:layout_width="wrap_content"
			    android:layout_height="wrap_content"
			    android:layout_alignParentBottom="true"
			    android:text="text3"
		    />
    	</RelativeLayout>

	</ViewFlipper>

</LinearLayout>

MainActivity.java

public class MainActivity extends Activity {

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);



        final ViewFlipper viewFlipper = (ViewFlipper) findViewById(R.id.flipper);

        findViewById(R.id.prevButton).setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				viewFlipper.showPrevious();
			}
		});

        findViewById(R.id.nextButton).setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				viewFlipper.showNext();
			}
		});
    }
}

ViewFlipperのshonNext()とshowPrevious()を使うとUIを切り替えることができる。
サンプルではボタンを押すことでそのメソッドを呼び出している。
実行すると以下のようになる。

1枚目

2枚目

3枚目

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です