ViewPagerの実装

Tweet

今回はViewPagerの実装の仕方についてです。

ViewPagerは動かすまでにたくさん記述しなくてはいけないので、なかなか時間がかかりますが、これがあるだけでなんとなくアプリがリッチに見えるのでオススメです！

今回は、画像とページ名をセットで表示するようなViewPagerを作っていきます。
まずはページ名を決めていきましょう。この配列の要素数によって挙動が変わってきます。
[strings.xml]

<string-array name="data_names">
  <item>テキスト１</item>
  <item>テキスト２</item>
  <item>テキスト３</item>
  <item>テキスト４</item>
  <item>テキスト５</item>
  <item>テキスト６</item>
</string-array>

これでテキストの準備は完了です。

それでは、レイアウトxmlにViewを追加します。
[main.xml]

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/bt_l"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_back"
        android:onClick="LEFT"
        android:text="" />

    <TextView
        android:id="@+id/data_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="" />

    <Button
        android:id="@+id/bt_r"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_next"
        android:onClick="RIGHT"
        android:text="" />
</LinearLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_weight="1"
    android:layout_width="fill_parent"
    android:layout_height="0dp" />

このとき、ViewPagerのwidthやheightをwrap_contentにしてはいけません。
Viewの高さが反映されないようで、wrap_contentだと無効化されてしまいます。

次に、アクティビティ側の宣言。
[MainActivity.java]

public class MainActivity extends Activity {
	private String[] data_strs;
	private int data_num;
	private int now_page;
	private ViewPager viewPager;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		
		//ページビューのセット
		now_page = 0;
		data_strs = getResources().getStringArray(R.array.data_names);
		data_num = data_strs.length;
		SetPageView();
	}

	private void SetPageView() {
		viewPager = (ViewPager) findViewById(R.id.viewpager);
		PagerAdapter mPagerAdapter = new AdapterPager(this);
		viewPager.setAdapter(mPagerAdapter);

		//ページが変わったことを受け取るイベント
		viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
			@Override
			public void onPageSelected(int position) {
				now_page = position;
				SetArrowImages(position);
			}
		});

		viewPager.setCurrentItem(now_page);
		SetArrowImages(now_page);
	}

	//矢印の見え方を定義
	private void SetArrowImages(int position) {
		Button arrow_l	= (Button)findViewById(R.id.bt_l);
		Button arrow_r	= (Button)findViewById(R.id.bt_r);
		TextView data_name	= (TextView)findViewById(R.id.data_name);

		if (position == 0) {arrow_l.setVisibility(View.INVISIBLE);}
		else {arrow_l.setVisibility(View.VISIBLE);}

		if (position == (data_num-1)) {arrow_r.setVisibility(View.INVISIBLE);}
		else {arrow_r.setVisibility(View.VISIBLE);}

		data_name.setText(data_strs[position]);

		if (position > 0) {
			arrow_l.setText(data_strs[position - 1]);
		}
		if (position < (sound_num-1)) {
			arrow_r.setText(data_strs[position + 1]);
		}
	}

	public void LEFT(View v) {
		now_page = ((now_page + data_num - 1) % data_num);
		viewPager.setCurrentItem(now_page, true);	//2番目の引数はアニメーションの有無
	}
	public void RIGHT(View v) {
		now_page = ((now_page + 1) % data_num);
		viewPager.setCurrentItem(now_page, true);
	}
}

main.xmlに、ページをめくる左右の矢印ボタンがあるという想定です。
SetArrowImages()メソッドは、それを設定するためです。
矢印ボタンは、ページ位置に応じて消えたり現れたりしますし、ボタンの文字領域に、前ページと次ページのページ名が表示されます。

次はアダプターです。
[AdapterPager.java]

public class AdapterPager extends PagerAdapter {
	private int N;
	private LayoutInflater _inflater = null;

	String[] names;

	public AdapterPager(Context c) {
		super();
		_inflater = (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		names = c.getResources().getStringArray(R.array.data_names);
		N = names.length;
	}

	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		LinearLayout layout = (LinearLayout) _inflater.inflate(R.layout.page_data, null);

		//ページごとに表示する画像
		ImageView img = (ImageView) layout.findViewById(R.id.frame_image);
		int rsrc[] = {
				R.drawable.image01,
				R.drawable.image02,
				R.drawable.image03,
				R.drawable.image04,
				R.drawable.image05,
				R.drawable.image06,
		};
		img.setImageResource(rsrc[position]);

		container.addView(layout);
		return layout;
	}

	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		((ViewPager) container).removeView((View) object);
	}

	@Override
	public int getCount() {
		return N;
	}

	@Override
	public boolean isViewFromObject(View view, Object object) {
		return view.equals(object);
	}
}

アダプターはこんな感じですが、ページごとのレイアウトを定義するpage_dataがまだありませんね。

page_dataを作っていきましょう。
[page_data.xml]

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/frame_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/image01" />

</LinearLayout>

以上です。

これらを実装して動作させてみましょう！
今回はコードが多くて記事を書くのに疲れました。。。