android基礎知識27：TabHost03——新浪微博布局學習——妙用TabHost

前言
　　為了更好的開發Android應用程式，除了熟練掌握基本的UI組件和API外，還需要掌握一些技巧，而這些技巧可以通過閱讀一些代碼來提高，本系列將與大家分享一些新浪微博布局方面的收穫，歡迎交流！
 
聲明
　　歡迎轉載，但請保留文章原始出處:) 
　　　　部落格園：http://www.cnblogs.com
　　　　農民伯伯： http://www.cnblogs.com/over140
 
版本
　　新浪微博 weibo_10235010.apk
 
本文

　　一、

紅色部分是本文要實現的目標。
 
　　二、實現
　　　　maintabs.xml

<?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">    <FrameLayout     android:id="@android:id/tabcontent"    android:layout_width="fill_parent"    android:layout_height="0.0dip"    android:layout_weight="1.0"/>    <TabWidget     android:id="@android:id/tabs"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:layout_weight="0.0"    android:visibility="gone"/>    <RadioGroup    android:id="@+id/main_tab"    android:background="@drawable/maintab_toolbar_bg"    android:orientation="horizontal"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:gravity="center_vertical"    android:layout_gravity="bottom">    <RadioButton     android:layout_marginTop="2.0dip"    android:text="@string/main_home"    android:drawableTop="@drawable/icon_1_n"    android:id="@+id/radio_button0"    style="@style/main_tab_bottom"/>    <RadioButton     android:layout_marginTop="2.0dip"    android:text="@string/main_news"    android:drawableTop="@drawable/icon_2_n"    android:id="@+id/radio_button1"    style="@style/main_tab_bottom"/>    <RadioButton     android:layout_marginTop="2.0dip"    android:text="@string/main_my_info"    android:drawableTop="@drawable/icon_3_n"    android:id="@+id/radio_button2"    style="@style/main_tab_bottom"/>    <RadioButton     android:layout_marginTop="2.0dip"    android:text="@string/menu_search"    android:drawableTop="@drawable/icon_4_n"    android:id="@+id/radio_button3"    style="@style/main_tab_bottom"/>    <RadioButton     android:layout_marginTop="2.0dip"    android:text="@string/more"    android:drawableTop="@drawable/icon_5_n"    android:id="@+id/radio_button4"    style="@style/main_tab_bottom"/>    </RadioGroup>    </LinearLayout></TabHost>

styles.xml

<?xml version="1.0" encoding="utf-8"?><resources><style name="main_tab_bottom"><item name="android:textSize">@dimen/bottom_tab_font_size</item>    <item name="android:textColor">#ffffffff</item>    <item name="android:ellipsize">marquee</item>    <item name="android:gravity">center_horizontal</item>    <item name="android:background">@drawable/home_btn_bg</item>    <item name="android:paddingTop">@dimen/bottom_tab_padding_up</item>    <item name="android:layout_width">fill_parent</item>    <item name="android:layout_height">wrap_content</item>    <item name="android:button">@null</item>    <item name="android:singleLine">true</item>    <item name="android:drawablePadding">@dimen/bottom_tab_padding_drawable</item>    <item name="android:layout_weight">1.0</item></style></resources>

home_btn_bg.xml

<?xml version="1.0" encoding="UTF-8"?><selector  xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_focused="true" android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/home_btn_bg_s" />    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/home_btn_bg_s" />    <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/home_btn_bg_d" />    <item android:drawable="@drawable/transparent" /></selector>

代碼說明：
1.　　需要注意的是他這裡把TabWidget的Visibility設定成了gone!也就是預設難看的風格不見了：，取而代之的是5個帶風格的選項按鈕.
2.　　注意為選項按鈕設定的style，其中最重要的是為其background設定了home_btn_bg.xml，也就是自訂了選中效果。
　　　　Java檔案

package com.loulijun.demo2;import android.app.TabActivity;import android.content.Intent;import android.os.Bundle;import android.view.Window;import android.widget.RadioGroup;import android.widget.TabHost;import android.widget.RadioGroup.OnCheckedChangeListener;public class MainTabActivity extends TabActivity implements OnCheckedChangeListener{private RadioGroup mainTab;private TabHost tabhost;private Intent iHome;private Intent iNews;private Intent iInfo;private Intent iSearch;private Intent iMore;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.main);        mainTab=(RadioGroup)findViewById(R.id.main_tab);        mainTab.setOnCheckedChangeListener(this);        tabhost = getTabHost();                iHome = new Intent(this, HomeActivity.class);        tabhost.addTab(tabhost.newTabSpec("iHome")        .setIndicator(getResources().getString(R.string.main_home), getResources().getDrawable(R.drawable.icon_1_n))        .setContent(iHome));        iNews = new Intent(this, NewsActivity.class);tabhost.addTab(tabhost.newTabSpec("iNews")        .setIndicator(getResources().getString(R.string.main_news), getResources().getDrawable(R.drawable.icon_2_n))        .setContent(iNews));iInfo = new Intent(this, MyInfoActivity.class);tabhost.addTab(tabhost.newTabSpec("iInfo")        .setIndicator(getResources().getString(R.string.main_my_info), getResources().getDrawable(R.drawable.icon_3_n))        .setContent(iInfo));iSearch = new Intent(this,SearchActivity.class);tabhost.addTab(tabhost.newTabSpec("iSearch")        .setIndicator(getResources().getString(R.string.menu_search), getResources().getDrawable(R.drawable.icon_4_n))        .setContent(iSearch));iMore = new Intent(this, MoreActivity.class); tabhost.addTab(tabhost.newTabSpec("iMore")        .setIndicator(getResources().getString(R.string.more), getResources().getDrawable(R.drawable.icon_5_n))        .setContent(iMore));    }   @Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {switch(checkedId){case R.id.radio_button0:this.tabhost.setCurrentTabByTag("iHome");break;case R.id.radio_button1:this.tabhost.setCurrentTabByTag("iNews");break;case R.id.radio_button2:this.tabhost.setCurrentTabByTag("iInfo");break;case R.id.radio_button3:this.tabhost.setCurrentTabByTag("iSearch");break;case R.id.radio_button4:this.tabhost.setCurrentTabByTag("iMore");break;}}        }

代碼說明
1.　　由於TabWidget被隱藏，所以相關的事件也會無效，這裡取巧用RadioGroup與RadioButton的特性來處理切換，然後監聽事件調用setCurrentTabByTag來切換Activity。
2.　　注意即使TabWidget被隱藏，也要為其設定indicator，否則會保持。
 
三、總結
　　　　在這之前如果要做這種效果我恐怕第一時間就會想到用ActivityGroup來做，主要是因為TabHost的TabWidget非常難看，用起來也不方便。其實從源碼可以看出，TabActivity也是繼承自ActivityGroup，這裡結合了選項按鈕和TabHost，各取其長，有時間可以專門寫一個這樣的自訂控制項:)

代碼地址：android中tabhost各種執行個體及用法

參考資料：

新浪微博布局學習——妙用TabHost

　[Android]使用ActivityGroup來切換Activity和Layout