【Java】タブの実装について

02 «1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.» 04

【Java】タブの実装について

月曜日です。今日は祝日ですが、そんなものありゃしません。
ってことで、ブログです。あ、坂内です。

先週の金曜日ですが、「GagSound」バージョンアップしました！！
サウンドがなんと「３６！！」種類に増量！
そしてお気に入り機能が追加されました！
これで、気に入ってるサウンドだけのリストを用意できます！
お気に入りへ入れるには、気に入ったサウンドを長押しでできます。
逆にお気に入りから外す場合は、お気に入り状態のサウンドを長押しで外すことができます！

【Gagsound】
https://play.google.com/store/apps/details?id=com.halcyon.gagsound

よろしくです！

で、今回は、このバージョンアップに伴いタブを実装しました。
そのことについて少し。

タブを実装するに当たり必要なものは以下になります。
(タブの切り替えが２つの場合を想定)
①タブ部分に表示する画像
②タブ画像のSelector
③Layout
　- Tabを配置し、メインとなるActivity
　- 中身①Activity
　- 中身②Activity
④各Layoutに付随するActivity

①：タブが選択されている時と、されていない時の絵を用意します。
　ファイルの配置は、drawableの直下とします。

②：①で用意した絵の切り替え用のSelectorになります。
●tab1.xml
絵のファイル名を「tab1_normal.png」「tab1_selected.png」とした場合は以下のようになります。

<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
  <item
    android:state_selected="true"
    android:state_pressed="false"
    android:drawable="@drawable/tab1_selected" />
  <item android:drawable="@drawable/tab1_normal" />
</selector>

●tab2.xml
絵のファイル名を「tab2_normal.png」「tab2_selected.png」とした場合は以下のようになります。

<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
  <item
    android:state_selected="true"
    android:state_pressed="false"
    android:drawable="@drawable/tab2_selected" />
  <item android:drawable="@drawable/tab2_normal" />
</selector>

③Layoutを作成します。
　●Tab自体を配置するメインActivity
　

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/layout_root"
	android:layout_width="fill_parent" android:layout_height="fill_parent"
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:background="#FFFFFF"
	android:orientation="vertical">
	<TabHost
		android:id="@android:id/tabhost"
		android:background="#FFFFFF"
		android:layout_width="match_parent"
		android:layout_height="wrap_content">
		<LinearLayout
			android:orientation="vertical"
			android:layout_width="fill_parent"
			android:layout_height="fill_parent"
			android:background="#FFFFFF"
			android:padding="1dp">
		<TabWidget
			android:id="@android:id/tabs"
			android:layout_width="fill_parent"
			android:background="#FFFFFF"
			android:layout_height="wrap_content"/>
		<FrameLayout
			android:id="@android:id/tabcontent"
			android:layout_width="fill_parent"
			android:layout_height="fill_parent"
			android:background="#FFFFFF"
			android:padding="1dp"/>
		</LinearLayout>
	</TabHost>
</LinearLayout>

　●切り替わる中身１
　　お好みのLayoutを用意
　●切り替わる中身２
　　お好みのLayoutを用意
④各Layoutに付随するActivityを用意
　こちらもタブを配置するメインのActivityのみを記載します。
　切り替わるLayoutに付随のActivityはお好みでどうぞ。
　


@Override	
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_tab);
	Resources res = getResources();
	TabHost tabHost = getTabHost();
	TabHost.TabSpec spec;
	// Tab1
	intent = new Intent().setClass(this, AActivity.class);
	spec = tabHost.newTabSpec("TAB1")
			.setIndicator("tab1", res.getDrawable(R.drawable.tab1))
			.setContent(intent);
	tabHost.addTab(spec);

	// Tab2
	intent = new Intent().setClass(this, BActivity.class);
	spec = tabHost.newTabSpec("TAB2")
			.setIndicator("tab2" , res.getDrawable(R.drawable.tab2))
			.setContent(intent);
	tabHost.addTab(spec);

	// Set Default Tab - zero based index
	tabHost.setCurrentTab(0);
}