Android FragmentStatePagerAdapterを使ってレイアウトが共通のページを作るサンプルコード
FragmentStatePagerAdapterは便利な機能で、たとえば読ませたいコンテンツがあったとしたら、右、左のフリックで切り替えたり、共通のレイアウトを持たせたりすることができます。
「次へ」ボタンとかを配置したかったり、最後のページは「次へ」がないようにする、などのサンプルコードを書いておきます。
フリックだけだと先に進めない人がいるので、「次へ」ボタンをつけています。
このサンプルは、4ページのチュートリアルです。
ページの上にタイトルバー、中央に中身のコンテンツ、下の方に「次へ」と「スキップ」ボタンが配置されています。
//元になるアクティビティ
//TutorialBeforeStartActivity.java内
public class TutorialBeforeStartActivity extends FragmentActivity {
private ViewPager viewPager;
private Button skip;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tutorial_before_start_fragment);
viewPager = (ViewPager) findViewById(R.id.pager);
viewPager.setAdapter(
new MyFragmentStatePagerAdapter(getSupportFragmentManager(), this));
ImageView next_button = (ImageView)findViewById(R.id.goto_next);
//「次へ」ボタンをタップすると、次のページへ進む処理
next_button.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View arg0, MotionEvent arg1) {
switch (arg1.getAction()) {
case MotionEvent.ACTION_DOWN: {
int current_page_num = viewPager.getCurrentItem();
viewPager.setCurrentItem(current_page_num + 1);
break;
}
}
return true;
}
});
//最後のページだけ、「次へ」ボタンを表示しない処理
viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
@Override
public void onPageSelected(int position) {
ImageView next_button = (ImageView)findViewById(R.id.goto_next);
if(position==3){
next_button.setVisibility(View.INVISIBLE);
}else{
next_button.setVisibility(View.VISIBLE);
}
}
});
skip = (Button) findViewById(R.id.skip);
skip.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v) {
if (v == skip ) {
//スキップをタップした時の処理
}
}
});
}
//アダプター
//MyFragmentStatePagerAdapter.java内
public class MyFragmentStatePagerAdapter
extends FragmentStatePagerAdapter {
private Context localContext;
public MyFragmentStatePagerAdapter(FragmentManager fm, Context context) {
super(fm);
localContext = context;
}
@Override
public Fragment getItem(int i) {
switch (i) {
case 0:
return new TutorialCreditFragment();
case 1:
return new TutorialGroupFragment();
case 2:
return new TutorialJoinFragment();
case 3:
return new TutorialAdminFragment();
default:
return new TutorialCreditFragment();
}
}
@Override
public int getCount() {
return 4;
}
@Override
public CharSequence getPageTitle(int position) {
// return "Page " + position;
switch (position) {
case 0:
return localContext.getString(R.string.credit_explanation_title);
case 1:
return localContext.getString(R.string.group_explanation_title);
case 2:
return localContext.getString(R.string.join_explanation_title);
case 3:
return localContext.getString(R.string.admin_explanation_title);
default:
return localContext.getString(R.string.tutorial_before);
}
}
}
//個別のフラグメント
//TutorialCreditFragment.java 内
//他のフラグメントも同様な感じなので、省略します。
public class TutorialCreditFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container,
Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.tutorial_credit, null);
return v;
}
}
//レイアウトファイル tutorial_before_start_fragment.xml内 //上にタイトルバーがあり、下に次へボタンとSkipボタンがある構成 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <!-- ページャーのホルダー 個々のページは、フラグメント内 --> <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="wrap_content" > <android.support.v4.view.PagerTitleStrip android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="top" android:background="#e38e66" android:padding="10dp" android:textColor="@color/white" android:textSize="14sp" /> </android.support.v4.view.ViewPager> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:orientation="vertical" > <ImageView android:id="@+id/goto_next" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="5dp" android:contentDescription="@string/swipe_left" android:src="@drawable/goto_next" /> <Button android:id="@+id/skip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:background="#aaa6a4" android:gravity="bottom|left" android:padding="5dp" android:text="@string/skip" android:textColor="@color/white" android:textSize="12sp" /> </LinearLayout> </RelativeLayout>
//個々のフラグメントのレイアウトファイル //tutorial_credit.xml内 //他のフラグメントも同様なので、省略 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#f9eee9" android:gravity="center_horizontal" android:orientation="vertical" android:padding="10dp" android:textColor="#000000" > <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:orientation="vertical" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/step1" android:textColor="#c04208" android:textSize="14sp" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:contentDescription="@string/credit_image" android:gravity="center_horizontal" android:src="@drawable/registration_explanation_credit" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:text="@string/credit_explanation_text" android:textColor="@android:color/black" android:textSize="14sp" /> </LinearLayout> </LinearLayout>