読者です 読者をやめる 読者になる 読者になる

うさがにっき

読書感想文とプログラムのこと書いてきます

ActionBarを使ったタブレイアウトの作成

概要

ActionBarを使ってタブレイアウトを作成する

最小構成

Eclipseのプロジェクト作成からタブレイアウトを選択すればすぐひな形が出来る

プロジェクト名など入力して次へ
f:id:tiro105:20140407124339p:plain
次へ
f:id:tiro105:20140407124348p:plain
次へ
Blank Activityを選んで次へ
f:id:tiro105:20140407124356p:plain
Navigtion TypeをAction Bar Tabs(with ViewPager)に設定しFinish

これでtabレイアウトのアプリが実行できるはず

ソースの確認

レイアウト

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.test.MainActivity" />

logic

public class MainActivity extends ActionBarActivity implements
		ActionBar.TabListener {

appcompatを使っているのでActionBarActivityを継承
タブ押下時のイベントを取得するためActionBar.TabListenerを実装

// Set up the action bar.
final ActionBar actionBar = getSupportActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

actionBarのタブレイアウトを使用するのでsetNavigationModeにActionBar.NAVIGATION_MODE_TABSを指定

// Create the adapter that will return a fragment for each of the three
// primary sections of the activity.
mSectionsPagerAdapter = new SectionsPagerAdapter(
		getSupportFragmentManager());

// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mSectionsPagerAdapter);

viewPagerを作成し、adapterを設定

mViewPager
		.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
			@Override
			public void onPageSelected(int position) {
				actionBar.setSelectedNavigationItem(position);
			}
		});

viewPagerをスワイプしたときに対応したタブが選択状態になるようにリスナーからactionBarに連携

// For each of the sections in the app, add a tab to the action bar.
for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) {
	// Create a tab with text corresponding to the page title defined by
	// the adapter. Also specify this Activity object, which implements
	// the TabListener interface, as the callback (listener) for when
	// this tab is selected.
	actionBar.addTab(actionBar.newTab()
			.setText(mSectionsPagerAdapter.getPageTitle(i))
			.setTabListener(this));
}

各タブにview(fragment)を設定

@Override
public void onTabSelected(ActionBar.Tab tab,
		FragmentTransaction fragmentTransaction) {
	// When the given tab is selected, switch to the corresponding page in
	// the ViewPager.
	mViewPager.setCurrentItem(tab.getPosition());
}

@Override
public void onTabUnselected(ActionBar.Tab tab,
		FragmentTransaction fragmentTransaction) {
}

@Override
public void onTabReselected(ActionBar.Tab tab,
		FragmentTransaction fragmentTransaction) {
}

ActionBar.TabListenerを実装時に必要になるメソッド
とりあえずタブ選択時に実行される「onTabSelected」を実装しておけばよさげ
タブ押下時にviewPagerを対応するタブの位置に移動させている

public class SectionsPagerAdapter extends FragmentPagerAdapter {

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

		@Override
		public Fragment getItem(int position) {
			// getItem is called to instantiate the fragment for the given page.
			// Return a PlaceholderFragment (defined as a static inner class
			// below).
			return PlaceholderFragment.newInstance(position + 1);
		}

		@Override
		public int getCount() {
			// Show 3 total pages.
			return 3;
		}

		@Override
		public CharSequence getPageTitle(int position) {
			Locale l = Locale.getDefault();
			switch (position) {
			case 0:
				return getString(R.string.title_section1).toUpperCase(l);
			case 1:
				return getString(R.string.title_section2).toUpperCase(l);
			case 2:
				return getString(R.string.title_section3).toUpperCase(l);
			}
			return null;
		}
	}
}

viewPagerに設定するfragment
getCountでタブの数、getItemで対応するfragmentを返している

ポイント
viewPagerとactionBarのタブが対応していることを気にして読まないと頭がごちゃごちゃになった
中身では、viewPagerとactionBarが別々に動いていて、それぞれに対応するイベントで連携をとりつじつまを合わしている