AndroidのViewPagerの例のチュートリアル
AndroidのViewPagerでは、ユーザーはデータのページを左右にフリップすることができます。私たちのAndroid ViewPagerアプリケーションでは、異なる画像とテキストを持つ3つのビューをスワイプするViewPagerを実装します。
アンドロイドのビューページャー
AndroidのViewPagerウィジェットは、サポートライブラリに存在し、ユーザーが左右にスワイプして完全に新しい画面を見ることができます。今日は、ViewsとPagerAdapterを使用してViewPagerを実装しています。フラグメントでも同じように実装することができますが、それについては後のチュートリアルで議論します。ViewPagerは、PagerAdapterを使用してMainActivityにビューを提供する役割があります。これは、ListAdapterがListViewに対して行うことと似ています。
AndroidのViewPagerの例
AndroidのViewPagerのサンプルコード
activity_main.xmlは、以下に示すViewPagerのみで構成されています。
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
MainActivity.javaは以下の通りです。
package com.scdev.viewpager;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(new CustomPagerAdapter(this));
}
}
上記のコードにおけるMainActivityの役割は、ViewPagerを参照し、PagerAdapterを拡張したCustomPagerAdapterを設定することです。CustomPagerAdapterクラスについて話し合う前に、ModelObjectクラスを見てみましょう。ModelObject.java
package com.scdev.viewpager;
public enum ModelObject {
RED(R.string.red, R.layout.view_red),
BLUE(R.string.blue, R.layout.view_blue),
GREEN(R.string.green, R.layout.view_green);
private int mTitleResId;
private int mLayoutResId;
ModelObject(int titleResId, int layoutResId) {
mTitleResId = titleResId;
mLayoutResId = layoutResId;
}
public int getTitleResId() {
return mTitleResId;
}
public int getLayoutResId() {
return mLayoutResId;
}
}
上記の列挙体は、ViewPagersのすべてのページをリストにしています。それぞれのレイアウトを持つ3つのページがあります。単一のページのレイアウトは、以下のview_blue.xmlです。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:background="@android:color/holo_blue_dark"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Second View"
android:layout_gravity="center_horizontal"
android:textSize="28sp"
android:textColor="@android:color/black"
android:textStyle="bold"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:id="@+id/textView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Swipe left to\nFirst View"
android:layout_gravity="center_horizontal"
android:textSize="20sp"
android:textColor="@android:color/black"
android:textStyle="bold"
android:minLines="2"
android:id="@+id/textView2"
android:padding="@dimen/activity_horizontal_margin"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Swipe right to\nThird View"
android:layout_gravity="center_horizontal"
android:textSize="20sp"
android:textColor="@android:color/black"
android:textStyle="bold"
android:padding="@dimen/activity_horizontal_margin"
android:minLines="2"
android:id="@+id/textView3"
android:layout_alignTop="@+id/textView2"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
残りの2つのページは似たようなレイアウトであり、このプロジェクトのソースコードに示されています。CustomPagerAdapter.javaではそれらが提供されています。
package com.scdev.viewpager;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class CustomPagerAdapter extends PagerAdapter {
private Context mContext;
public CustomPagerAdapter(Context context) {
mContext = context;
}
@Override
public Object instantiateItem(ViewGroup collection, int position) {
ModelObject modelObject = ModelObject.values()[position];
LayoutInflater inflater = LayoutInflater.from(mContext);
ViewGroup layout = (ViewGroup) inflater.inflate(modelObject.getLayoutResId(), collection, false);
collection.addView(layout);
return layout;
}
@Override
public void destroyItem(ViewGroup collection, int position, Object view) {
collection.removeView((View) view);
}
@Override
public int getCount() {
return ModelObject.values().length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public CharSequence getPageTitle(int position) {
ModelObject customPagerEnum = ModelObject.values()[position];
return mContext.getString(customPagerEnum.getTitleResId());
}
}
-
- CustomPagerAdapter(Context context): このコンストラクタはContextの参照を必要とします。コンテキストは、後でenumクラスから個々のページレイアウトにアクセスするために使用されるため、クラスのメンバ変数として保存されます。
instantiateItem: この場合、enumを使用して特定のenum値に関連付けられたレイアウトをインフレートします。その後、新しくインフレートされたレイアウトをPagerAdapterによって維持されるViewGroup（Viewのコレクション）に追加し、そのレイアウトを返します。このメソッドによって返されるオブジェクトは、isViewFromObjectメソッドにおける2番目のパラメータとしても後で使用されます。
destroyItem: このメソッドは、PagerAdapterによって維持されるViewGroupから特定のビューを削除します。
getCount: これは単にViewPagerによって維持されるビューの数を返します。この例では、モデルオブジェクトのenum値の数です。
isViewFromObject: このメソッドは、特定のオブジェクトが与えられた位置に属しているかどうかをチェックします。先ほど述べたように、2番目のパラメータはObject型であり、instantiateItemメソッドからの戻り値と同じです。
getPageTitle: 特定の位置でPagerAdapterにタイトルを提供する必要があります。通常、これはActionBarにアクティビティのタイトルとして表示されるか、タブが各タブをラベル付けするためにこのメソッドにフックする場合があります。この場合、ラベル付け用に保持しています。
下の画像はアプリの動作を示しています。これにより、AndroidのViewPagerの例のチュートリアルは終了します。Android ViewPagerプロジェクトは、以下のリンクからダウンロードできます。
AndroidのViewPagerのサンプルプロジェクトをダウンロードしてください。