【準備】
ViewPagerを使用するためにはCompatibility packageが必要です。
導入はEclipseから簡単にできます。
Android Toolsから「Add Compatibility Library...」を選択してください。
するとReferenced Librariesの中にandroid-support-v4.jarが追加されます。
以上で準備完了です。
【表示するページを作成する】
表示するページは、TextView、EditText、CheckBox
がそれぞれ一つあるページを作成します。
ページの実態はFragmentで実装して行きます。
それぞれはこちら。
【 TextView】
text_fragment.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="fill_parent"
android:orientation="vertical"
android:gravity="center"
android:background="#88FF88" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="TextFragment"
android:textColor="@android:color/black"
/>
</LinearLayout>
TextFragment.java
package jp.beaa_gt.sample.viewpager; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class TextFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) { View view = inflater.inflate(R.layout.text_fragment, null); return view; } }
【EditText】
edit_text_fragment.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="fill_parent"
android:orientation="vertical"
android:gravity="center"
android:background="#FF6666" >
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="30sp"
android:text="EditTextFragment"
/>
</LinearLayout>
EditTextFragment.java
package jp.beaa_gt.sample.viewpager; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class EditTextFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) { View view = inflater.inflate(R.layout.edit_text_fragment, null); return view; } }
【CheckBox】
checkbox_fragment.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="fill_parent"
android:orientation="vertical"
android:gravity="center"
android:background="#6666FF" >
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="CheckBox"
/>
</LinearLayout>
CheckBoxFragment.java
package jp.beaa_gt.sample.viewpager; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class CheckBoxFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) { View view = inflater.inflate(R.layout.checkbox_fragment, null); return view; } }
【ViewPagerを使ってフリックで画面遷移できるようにする】
上で作成した3つの画面をスワイプで画面遷移できるようにします。
スワイプで遷移させるためにViewPagerとFragmentStatePagerAdapterを利用します。
ListViewを利用する感じでViewPagerのsetAdapter()に、
FragmentStatePagerAdapterのインスタンスをセットすればOKです。
以下実装。
fragment_pager.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="fill_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
ViewPagerSampleActivity.java
package jp.beaa_gt.sample.viewpager; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentStatePagerAdapter; import android.support.v4.view.ViewPager; public class ViewPagerSampleActivity extends FragmentActivity { /** ページ数 */ private static final int PAGE_SIZE = 3; /** テキストフラグメント */ private static final int TEXT_FRAGMENT = 0; /** エディットテキストフラグメント */ private static final int EDIT_TEXT_FRAGMENT = 1; /** チェックボックスフラグメント */ private static final int CHECKBOX_FRAGMENT = 2; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.fragment_pager); MyAdapter mAdapter = new MyAdapter(getSupportFragmentManager()); ViewPager mPager = (ViewPager)findViewById(R.id.pager); mPager.setAdapter(mAdapter); } private static class MyAdapter extends FragmentStatePagerAdapter { public MyAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { Fragment fragment = null; //ページごとにそれぞれの画面を作成 switch(position){ //テキスト画面 case TEXT_FRAGMENT: fragment = new TextFragment(); break; //エディットテキスト画面 case EDIT_TEXT_FRAGMENT: fragment = new EditTextFragment(); break; //チェックボックス画面 case CHECKBOX_FRAGMENT: fragment = new CheckBoxFragment(); break; default: fragment = null; } return fragment; } @Override public int getCount() { return PAGE_SIZE; } } }
これでスワイプさせるとこんな感じになります
以上です。おつかれさまでした!