ViewPager コントロールを用いたフリックによるページ切り替え - Android

ViewPagerコントロールを用いてフリックによるページ切り替えを実装します。

プロジェクト

Android アプリケーションプロジェクトを作成します。
[New Android Application]ダイアログボックスが表示されますので、以下を設定します。

• Application Name: "SimpleSurfaceViewXML"
• Project Name: "SimpleSurfaceViewXML"
• Package Name: "com.iPentec.simplesurfaceviewxml"
• Minimum Required SDK: "API 8: Android 2.2 (Froyo)"
• Target SDK: "API 17: Android 4.2 (Jelly Bean)"
• Compile With: "API 17: Android 4.2 (Jelly Bean)"
• Theme: "Holo Light with Dark Action Bar"

UIの作成

以下のレイアウトを作成します。

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />
	
	<android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>
	
</RelativeLayout>

PagerViewで用いるレイアウトファイルの追加

ViewPagerで表示するレイアウトページを作成します。

レイアウトを追加します。Eclipseの[New]メニューの[Other]メニューを選択します。


[New]ダイアログボックスが表示されます。


"Android"カテゴリから"Android XML Layout File"を選択します。[Next]ボタンを押します。


[New Android Layout XML File]ダイアログボックスが表示されます。


一覧から"LinerLayout"を選択します。[File]にXMLファイル名を入力します。今回は"pager_page.xml"としました。[Next]ボタンを押します。

pager_page.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Page1"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

コード

以下のコードを記述します。

MainActivity.java

package com.iPentec.viewpagerdemo;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.support.v4.view.ViewPager;

public class MainActivity extends Activity {
  private ViewPager mViewPager; 
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    this.mViewPager = (ViewPager)this.findViewById(R.id.viewpager);
    this.mViewPager.setAdapter(new CustomPagerAdapter(this));
  }

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
  }
}

解説

onCreateの下記の2行が追記部分です。

  this.mViewPager = (ViewPager)this.findViewById(R.id.viewpager);
  this.mViewPager.setAdapter(new CustomPagerAdapter(this));

リソースIDを指定しViewPagerコントロールオブジェクトを取得します。ViewPagerのsetAdapter()メソッドを呼び出しカスタム化したPagerAdapterオブジェクト(今回の例ではCustomPagerAdapterのインスタンス)を与えます。

CustomPagerAdapter.java

package com.iPentec.viewpagerdemo;

import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;

public class CustomPagerAdapter extends PagerAdapter {
  public final static int N = 5;
  private LayoutInflater _inflater = null;

  public CustomPagerAdapter(Context c) {
    super();
    _inflater = (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  }
  
  @Override
  public Object instantiateItem(ViewGroup container, int position) {
      LinearLayout layout = (LinearLayout) _inflater.inflate(R.layout.pager_page, null);
      int brt = 255*position/N;
      layout.setBackgroundColor(Color.rgb(brt,brt,brt));
      
      TextView textview1 = (TextView)layout.findViewById(R.id.textView1);
      textview1.setTextColor(Color.rgb(255-brt, 255-brt, 255-brt));
      textview1.setText("Page"+String.valueOf(position+1));
      
      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);
  }
}

解説

ViewPagerコントロールに設定するカスタム化されたPagerAdapterクラスです。PagerAdapterの派生クラスであるため、コンストラクタ、instantiateItem(), destroyItem(), getCount(), isViewFromObject()メソッドをオバーライドします。

コンストラクタ

  _inflater = (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

により、LayoutInflaterを取得します。

instantiateItem

各ページのレイアウトを設定します。

  LinearLayout layout = (LinearLayout) _inflater.inflate(R.layout.pager_page, null);

LayoutInflatorオブジェクトのinflate()メソッドを呼び出しレイアウトを設定します。レイアウトファイルのリソースID"R.layout.pager_page"をinflateメソッドの第一引数に与えます。

  int brt = 255*position/N;
  layout.setBackgroundColor(Color.rgb(brt,brt,brt));

表示されるページごとに異なった背景色を設定します。

  TextView textview1 = (TextView)layout.findViewById(R.id.textView1);
  textview1.setTextColor(Color.rgb(255-brt, 255-brt, 255-brt));
  textview1.setText("Page"+String.valueOf(position+1));

表示されるページのTextViewに"Page(ページ番号)"の文字列を表示します。また、TextViewの文字色をページの背景色の反対色に設定します。

  container.addView(layout);
  return layout;

レイアウトを設定します。

destroyItem

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

removeView()メソッドを呼び出しViewを取り除く処理を記述します。

getCount

PagerViewのページ数を返します。今回は5ページとするので5を常に返します。

isViewFromObject

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

上記を記述します。

実行結果

プロジェクトを実行します。下図の画面が表示されます。

画面をフリックするとページが切り替わります。ページの背景色と左上に表示されるTextViewに表示される文字列が変わることが確認できます。