創新源於模仿之一：TabActivity的美化

今天開始一個新專題：創新源於模仿。

第一篇從TabActivity著手，一直以為Android中的TabActivity隻能放在上麵，隻能如此醜陋，直到有一天看到“米聊”。



咋一看，軟件下麵的那個菜單欄，覺得像是用LinearLayout+Button來實現的，但事實上，它卻是一個Tab！
怎麼看出來的？我就不多說了，你懂的。

下麵我們來抽絲剝繭，一步步分析它的實現過程。

1.TabActivity的布局

1. 
   <TabHost xmlns:androhttps://schemas.android.com/apk/res/android">https://schemas.android.com/apk/res/android"
    android:
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
     >
    <LinearLayout
     android:orientation="vertical"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent">
     
            
           <FrameLayout
            android:gravity="center"
            android:
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1.0" >
            
            <LinearLayout android:
                   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:
                   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="second tab" />
               </LinearLayout>
            
           </FrameLayout>
          
           <TabWidget
            android:
            android:background="@drawable/tab_bottom_bg"
            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的實現代碼

先看看缺省的實現代碼，不複雜，省略一些無關的東西：

 

private void setIndicator(int icon, int title, int view) { 
        String str = getResources().getString(title); 
         
        TabHost.TabSpec localTabSpec=tabhost.newTabSpec(str).setIndicator(str,getResources().getDrawable(icon)).setContent(view); 
        tabhost.addTab(localTabSpec); 
    } 
private void setIndicator(int icon, int title, int view) {
     String str = getResources().getString(title);
     
     TabHost.TabSpec localTabSpec=tabhost.newTabSpec(str).setIndicator(str,getResources().getDrawable(icon)).setContent(view);
     tabhost.addTab(localTabSpec);
    }

 

可以測試一下，效果出來了吧，雖然有點醜，但它真的在屏幕下方了。

 

3.美化TAB標簽

 

現在我們來定製這個TAB的標簽。先看代碼：

    private void setIndicator(int icon, int title, int view) {
     
     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(view);
     tabhost.addTab(localTabSpec);
     
    }

 

注意到這個main_activity_tab的layout了吧，看看它的內容：

 

 

這個文件定義了每個TAB標簽的樣式，tab_item_bkg定義每個item的背景（包括focused/selected/pressed），每個item上麵的圖標和下麵的文字都在代碼中動態定義即可。其中tab_text_selector則定義文字的顏色。

 

剩下的事情就越發明顯了，不用多說了。