Androidでシンプルなタブを作る方法

【構成】

【SimpleCustomTabActivity.java - メインとなるActivity】

package com.ayakix;

import android.app.TabActivity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.TabHost;
import android.widget.TextView;

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

      TabHost tabHost = getTabHost();
      tabHost.getTabWidget().setDividerDrawable(R.drawable.tabdivider);

      // タブの初期化
      View v1 = new MyView(this, "AA");
      tabHost.addTab(tabHost.newTabSpec("AA")
              .setIndicator(v1)
              .setContent(new Intent(this, SubActivity.class)));
      View v2 = new MyView(this, "BB");
      tabHost.addTab(tabHost.newTabSpec("BB")
              .setIndicator(v2)
              .setContent(new Intent(this, SubActivity.class)));
      View v3 = new MyView(this, "CC");
      tabHost.addTab(tabHost.newTabSpec("CC")
              .setIndicator(v3)
              .setContent(new Intent(this, SubActivity.class)));
  }

  private class MyView extends FrameLayout {
      private LayoutInflater inflater;
      public MyView(Context context) {
          super(context);
          inflater = LayoutInflater.from(context);
      }

      public MyView(Context context, String title) {
          this(context);
          View v = inflater.inflate(R.layout.tabwidget, null);
          TextView tv = (TextView) v.findViewById(R.id.tabwidget_tv);
          tv.setText(title);
          addView(v);
      }
  }
}

【SubActivity - タブコンテンツとなるActivity】

package com.ayakix;

import android.app.Activity;
import android.os.Bundle;

public class SubActivity extends Activity{
  @Override
  public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.sub);
  }
}

【tabback.xml - タブの背景】

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <!-- 選択時 -->
   <item android:state_selected="true">
       <shape android:shape="rectangle">
           <solid
               android:color="#FF33CC33"
           />
           <!-- 角を丸める -->
           <corners
               android:radius="50sp"
           />
       </shape>
   </item>  
   <!-- 非選択時 -->
   <item android:state_selected="false">
       <shape android:shape="rectangle">
           <solid
               android:color="#FF3333CC"
           />
       </shape>
   </item>
</selector>

【tabdivider.xml - タブ間の調整】

<?xml version="1.0" encoding="utf-8"?>
<shape
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle" >
   <size
        android:width="20px"
   />
   <solid
        android:color="#00000000"
   />
</shape>

【main.xml - SimpleCustomTabActivityの画面構成】

<?xml version="1.0" encoding="utf-8"?>
<TabHost
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@android:id/tabhost"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">
   <LinearLayout
       android:orientation="vertical"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent">
       <TabWidget
           android:id="@android:id/tabs"
           android:layout_width="fill_parent"
           android:layout_height="50sp"
           android:layout_marginTop="10sp"
           android:layout_marginLeft="10sp"
           android:layout_marginRight="10sp"/>
       <FrameLayout
           android:id="@android:id/tabcontent"
           android:layout_width="fill_parent"
           android:layout_height="fill_parent" />
   </LinearLayout>
</TabHost>

【sub.xml - SubActivityの画面構成】

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:background="#FF33CC33">
</LinearLayout>

【tabwidget.xml - タブの画面構成】

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:gravity="center"
   android:background="@drawable/tabback">

   <TextView
       android:id="@+id/tabwidget_tv"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
   />
</LinearLayout>

【styles.xml - スタイルの定義】

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <style name="NoShadowTheme" parent="@android:style/Theme.Light">
       <item name="android:windowContentOverlay">@null</item>
   </style>
</resources>

【AndroidManifest.xml - マニフェストファイル】

<?xml version="1.0" encoding="utf-8"?>
<manifest
   xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.ayakix"
   android:versionCode="1"
   android:versionName="1.0">
   <uses-sdk android:minSdkVersion="4" />

   <application
       android:icon="@drawable/icon"
       android:label="@string/app_name"
       android:theme="@style/NoShadowTheme">
       <activity
           android:name=".SimpleCustomTabActivity"
           android:label="@string/app_name">
           <intent-filter>
               <action
                   android:name="android.intent.action.MAIN" />
               <category
                   android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
       </activity>
       <activity
           android:name=".SubActivity">
       </activity>
   </application>
</manifest>

ポイントとなるのは、テーマを設定しているところ。デフォルトのテーマでは、タブとコンテンツの間にドロップシャドウがついてしまう。android:windowContentOverlayをnullにしたテーマを適応することで、ドロップシャドウを無効にする。