TabActivity的美化

第一篇从TabActivity着手，一直以为Android中的TabActivity只能放在上面，只能如此丑陋，直到有一天看到“米聊”。

咋一看，软件下面的那个菜单栏，觉得像是用LinearLayout+Button来实现的，但事实上，它却是一个Tab！
下面我们来一步步分析它的实现过程。

TabActivity的布局

<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">
  <ImageView   
       android:background="@drawable/top_bg"
             android:layout_gravity="center"   
             android:id="@+id/main_activity_tab_image"   
             android:layout_width="fill_parent"   
            android:layout_height="wrap_content"   
              /> 
  <FrameLayout android:gravity="center" android:id="@android:id/tabcontent"
   android:layout_width="fill_parent" android:layout_height="wrap_content"
   android:layout_weight="1.0">
   <LinearLayout android:id="@+id/first"
    android:orientation="vertical" android:background="#ffffff"
    android:layout_width="fill_parent" android:layout_height="fill_parent">
    <TextView android:layout_width="fill_parent"
     android:layout_height="fill_parent" android:text="first tab" />
   </LinearLayout>
   <LinearLayout android:id="@+id/second"
    android:orientation="vertical" android:background="#ffffff"
    android:layout_width="fill_parent" android:layout_height="fill_parent">
    <TextView android:layout_width="fill_parent"
     android:layout_height="fill_parent"  />
   </LinearLayout>
  </FrameLayout>
  <TabWidget android:id="@android:id/tabs"
   android:padding="3.0dip" android:layout_width="fill_parent"
   android:layout_height="wrap_content" android:layout_weight="0.0" />
 </LinearLayout>
</TabHost>

 我们看到，要自定义一个位于屏幕下方的TAB标签，首先我们不能使用缺省的TabActivity实现了，啥事都要自己亲力亲为。
很好理解，把tabs放在tabcontent下面就可以了。其它不多说了。

2.MainActivity的实现代码

 

public class Activity01 extends TabActivity {
 // 声明TabHost对象
 TabHost tabhost;

 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
   tabhost=getTabHost();
  setIndicator(R.drawable.cell1, R.string.call_note, new Intent(this, Other_TabWidget.class));
  setIndicator(R.drawable.address1,  R.string.address, new Intent(this, thired_TabWidget.class));
  setIndicator(R.drawable.set1,  R.string.setting, new Intent(this, SimpleAdapter_Activity.class));
//  setIndicator(R.drawable.buinese1,  R.string.business_manager, new Intent(this, Host_BusinessManager.class));
 }

 private void setIndicator(int icon, int title, Intent intent) {
  View localView = LayoutInflater.from(this.tabhost.getContext())
    .inflate(R.layout.main_activity_tab, null);
  ((ImageView) localView.findViewById(R.id.main_activity_tab_image))
    .setBackgroundResource(icon);
  ((TextView) localView.findViewById(R.id.main_activity_tab_text))
    .setText(title);
  String str = getResources().getString(title);
  TabHost.TabSpec localTabSpec = tabhost.newTabSpec(str)
    .setIndicator(localView).setContent(intent);
  tabhost.addTab(localTabSpec);
  
 }
}

注意到这个main_activity_tab的layout了吧，看看它的内容,主要是下面tab的设定：

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

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   
     android:gravity="center"   
     android:orientation="vertical"   
     android:id="@+id/tabsLayout"   
     android:background="@drawable/botton_bg"   
     android:padding="3.0dip"   
     android:layout_width="wrap_content"   
     android:layout_height="wrap_content"   
     android:layout_marginTop="3.0dip"   
     android:layout_marginBottom="3.0dip"  
   >   
    <FrameLayout   
         android:layout_width="fill_parent"   
         android:layout_height="fill_parent"   
         android:layout_weight="1">   
        <ImageView   
             android:layout_gravity="center"   
             android:id="@+id/main_activity_tab_image"   
             android:layout_width="wrap_content"   
            android:layout_height="wrap_content"   
             android:scaleType="center" />   
    </FrameLayout>   
     <TextView   
         android:textSize="12.0dip"   
         android:textColor="#000000"   
         android:id="@+id/main_activity_tab_text"   
        android:layout_width="wrap_content"   
        android:layout_height="wrap_content"   
         android:text="Title" />   

 </LinearLayout>

这个文件定义了每个TAB标签的样式，botton_bg定义每个item的背景（包括focused/selected/pressed），每个item上面的图标和下面的文字都在代码中动态定义即可。其中android:textColor="#000000" 则定义文字的颜色。