3月 19
今日はタブのカスタマイズの話題です。CF電話帳では電話帳、発着信履歴、連絡先をタブで切替えています。この際、標準のタブではなくカスタムタブを使用しています。

device-1.png

サンプルアプリ

今回のサンプルアプリではこのカスタムタブの部分を抜き出して紹介します。

device-2.png

まずは肝となる部分のソースを記載します。ここで大事な部分は tabHost の indicator に独自に作成した View を指定するところです。

public class Main extends TabActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        final TabHost tabHost = getTabHost();

        View v1 = new MyView(this, "いち", R.drawable.ic_tab_1);
        View v2 = new MyView(this, "にー", R.drawable.ic_tab_2);
        View v3 = new MyView(this, "さん", R.drawable.ic_tab_3);

        // いち
        tabHost.addTab(tabHost.newTabSpec("TAB_1")
                .setIndicator(v1)
                .setContent(new Intent(this, Tab1.class)));

        // にー
        tabHost.addTab(tabHost.newTabSpec("TAB_2")
                .setIndicator(v2)
                .setContent(new Intent(this, Tab2.class)));

        // さん
        tabHost.addTab(tabHost.newTabSpec("TAB_3")
                .setIndicator(v3)
                .setContent(new Intent(this, Tab3.class)));

        tabHost.setCurrentTab(0);
    }

    private class MyView extends FrameLayout {
        private LayoutInflater inflater;

        public MyView(Context context) {
            super(context);
            inflater = LayoutInflater.from(context);
        }

        public MyView(Context context, String title, int icon) {
            this(context);

            View v = inflater.inflate(R.layout.tabwidget, null);

            // アイコン
            ImageView iv = (ImageView) v.findViewById(R.id.icon);
            iv.setImageResource(icon);

            // テキスト
            TextView tv = (TextView) v.findViewById(R.id.text);
            tv.setText(title);

            addView(v);
        }
    }
}

次に独自に指定した View のレイアウトの中で指定する部品に selecotr を指定した画像やテキスト色を指定します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      :
   android:background="@drawable/tab"       <-- ①
   >
    <ImageView
      :
       android:src="@drawable/ic_tab_1"     <-- ②
       />
    <TextView
      :
       android:textColor="@color/tab_text"  <-- ③
       />
</LinearLayout>

selector とは状態によってリソースをで選択状態や非選択状態のそれぞれの状態の画像や色を指定した xml 形式のファイルです。

タブの背景色(res/drawable/tab.xml)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 非選択時 -->
    <item
       android:state_selected="false"
       android:drawable="@drawable/tab_unselected"
       />
    <!-- 選択時 -->
    <item
       android:state_selected="true"
       android:drawable="@drawable/tab_selected"
       />
</selector>

アイコン画像(res/drawable/ic_tab_1.xml)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 非選択時 -->
    <item
       android:state_selected="false"
       android:drawable="@drawable/ic_tab_1_unselected"
       />
    <!-- 選択時 -->
    <item
       android:state_selected="true"
       android:drawable="@drawable/ic_tab_1_selected"
       />
</selector>

テキスト色(res/color/tab_text.xml)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 非選択時 -->
    <item
       android:state_selected="false"
       android:color="#f888"
       />
    <!-- 選択時 -->
    <item
       android:state_selected="true"
       android:color="#ffff"
       />
</selector>

サンプルコード

サンプルアプリのソースコードは Google Code で公開しています。


Posted by sak+

Tagged with:
preload preload preload