【準備】
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;
}
}
}
これでスワイプさせるとこんな感じになります
以上です。おつかれさまでした！
