【Android】ActionBarにタブを付けてスワイプでも画面を切り替えられるようにする

こんばんは。

今回はActionBarにタブを付けてタブで画面を切り替えられるようにします。
また、スワイプでも切り替えられるようにします。

今回はちょっとしたところですごい詰まってしまいましたが、解決したのでメモしておきます。

また、参考にさせていただいたサイトには色々とやり方がありましたが、今回は参考にしつつ自分でほんの少しだけソースを書き換えました。

以下手順です。

• メインとなるActivityを作成（ここでは MainActivity とします）
  • BlankActivityでOK
  • Navigation Typeを Tabs + Swipe にする
• タブに乗せるアクティビティ（Fragment)を作成
  • ここでは2つ（Fragment1, Fragment2）とします。
  • BlankActivityでOK
• Fragment1, 2のソースを以下のように書き換える
  • 以下のソースはFragment1だけですが、2も同じような感じです。デフォルトで生成されるメニューの作成等のコードは消してOKです

package jp.sakumon.moridai;

import android.os.Bundle;
import android.support.v4.app.Fragment; // ここが大事。[import.android.app.Fragment]にするとエラーになるので、必ず[support.v4.app.Fragment]をインポートする
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment1 extends Fragment {

	@Override
	 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
		 // 第３引数のbooleanは"container"にreturnするViewを追加するかどうか  
        //trueにすると最終的なlayoutに再度、同じView groupが表示されてしまうのでfalseでOKらしい  
        return inflater.inflate(R.layout.fragment_answer, container, false);  
	}

}

• MainActivityのソースコードは以下のようになります。
  • ほとんど自動生成されたものですが、下記では生成されたものに出来るだけ説明を加えています
  • 初期ではDummySectionFragment という関数で各タブのビューを生成していますが、以下では別ファイル（Fragment1, 2）でビューを生成しているので削除しています。

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MainActivity extends FragmentActivity implements ActionBar.TabListener {

	// アダプターを定義します。
	SectionsPagerAdapter mSectionsPagerAdapter;

	// ViewPagerを定義します。これでスワイプが可能になります。
	ViewPager mViewPager;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// Action barのモードをタブモードに切り替え
		final ActionBar actionBar = getActionBar();
		actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

		// FragmentPagerAdapterを継承したクラスのアダプターを作成
		mSectionsPagerAdapter = new SectionsPagerAdapter(
				getSupportFragmentManager());

		// ViewPagerにSectionPagerAdapterをセット
		mViewPager = (ViewPager) findViewById(R.id.pager);
		mViewPager.setAdapter(mSectionsPagerAdapter);

		/**
		 * スワイプしたときにもActionbarのタブ（NavigationItem）を常に表示させる処理
		 */
		mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
			@Override
			public void onPageSelected(int position) {
						actionBar.setSelectedNavigationItem(position);
			}
		});

		// getCountでタブの数を指定。
		for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) {
			// Actionbarにタブを追加。
			// getPageTitleでタブのタイトルを表示
			actionBar.addTab(actionBar.newTab()
				.setText(mSectionsPagerAdapter.getPageTitle(i))
				.setTabListener(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.activity_main, menu);
		return true;
	}

	/**
	 * タブを選択した時の処理
	 */
	@Override
	public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
		// ここで表示するフラグメントを決定する
		// setCurrentItem で、下記の SectionPagerAdapter の getItem を呼び出し
		mViewPager.setCurrentItem(tab.getPosition());
	}

	/**
	 * タブの選択が外れた場合の処理
	 */
	@Override
	public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
	}

	/**
	 * タブが2度目以降に選択された場合の処理
	 */
	@Override
	public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
	}

	/**
	 * ViewPagerの動作を作成
	 */
	public class SectionsPagerAdapter extends FragmentPagerAdapter {

		public SectionsPagerAdapter(FragmentManager fm) {
			super(fm);
		}

		/**
		 * ここでタブに表示する画面を設定する
		 * positionには0から順のタブの番号が渡される。
		 * なお、値を渡したいときはコメントアウトしてあるBundleを用いる。
		 * また、ここでreturnのFragmentの型についてのエラーが出た場合は、import で[android.app.fragment]にしている可能性あり。support.v4に変えよう
		 */
		@Override
		public Fragment getItem(int position) {
			if (position == 0){
				FragmentAnswer fragment = new FragmentAnswer();
				return fragment;
			} else {
				FragmentTest fragment = new FragmentTest();
				return fragment;
			}
			//Bundle args = new Bundle();
			// 値をBundle（保存）にする
			//args.putInt("testdata", position);
			// FragmentにBundleをセットし、値を渡す
			//fragment.setArguments(args);
		}

		/**
		 * タブの数を決定
		 */
		@Override
		public int getCount() {
			return 2;
		}

		/**
		 * タブのタイトルを決定
		 */
		@Override
		public CharSequence getPageTitle(int position) {
			switch (position) {
			case 0:
				return getString(R.string.title_section1).toUpperCase();
			case 1:
				return getString(R.string.title_section2).toUpperCase();
			}
			return null;
		}
	}
}

以上です。
これで色々と面白いことができそうです。

それでは。

参考にさせていただいたサイト

なんでもないことをなんでもなくかく日記 Android Tabs + Swipe
yan note: Android ActionBarとFragmentを使用してTab画面を表示する(Android 4.0以上）
フリックによる画面遷移（Play ストアのようなデザインを目指す） - バグでも動け -
Android Tips #31 ViewPager で Fragment を使う ｜ Developers.IO