android項(xiàng)目中碰到需要替換tabHost默認(rèn)樣式的情況，需要達(dá)到下圖的效果：
為了做成這樣的效果，花了些時(shí)間，這里做個(gè)筆記，給有需要的朋友。
步驟一：新建一 個(gè)xml布局文件，命名main.xml
< 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" android:background ="@color/white" >
?? < 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 ="wrap_content"
?????? android:gravity ="center_horizontal|center_vertical" />
???? < FrameLayout android:id ="@android:id/tabcontent"
?????? android:layout_width ="fill_parent" android:layout_height ="fill_parent" >
???? </ FrameLayout >
?? </ LinearLayout >
</ TabHost >
步 驟二：在Activity中添加我們的tab
代碼如下
public void onCreate(Bundle savedInstanceState) {
?? super .onCreate(savedInstanceState);
??setContentView(R.layout.main);
? mTabHost = getTabHost();
??? ???
? Intent intent1 = new Intent(this,OfficialActivity.class);
? createTab("公共聊天室",intent1);
??? ???
? Intent intent2 = new Intent(this, NearByActivity.class);
? createTab("周邊",intent2);
??? ???
? Intent intent3= new Intent(this, HistoryActivity.class);
? createTab("歷史",intent3);
??? ???
? mTabHost.setCurrentTab(1);
}
?private void createTab(String text ,Intent intent){????????? mTabHost.addTab(mTabHost.newTabSpec(text).setIndicator(createTabView(text)).setContent(intent));
??? }
??? private View createTabView(String text) {
??? ??? ??? View view = LayoutInflater.from(this).inflate(R.layout.tab_indicator, null);
??? ??? ??? TextView tv = (TextView) view.findViewById(R.id.tv_tab);
??? ??? ??? tv.setText(text);
??? ??? ??? return view;
??? }
步驟三：在createTabView方法中，我 們載入了布局文件tab_indicator.xml，改布局很簡(jiǎn)單，就是放置一個(gè)帶背景的布局，在布局中放一個(gè)textView用于顯示tab標(biāo)題，以 下為該布局文件內(nèi)容
< LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android"
?? android:layout_height ="fill_parent" android:layout_width ="fill_parent"
?? android:orientation ="vertical" android:gravity ="center"
?? android:theme ="@android:style/Theme.NoTitleBar" android:background ="@drawable/chat_tab_selector" >
?? < TextView android:id ="@+id/tv_tab" android:layout_width ="wrap_content" android:layout_height ="wrap_content"
?? android:text ="tab1" android:textColor ="@color/white" />
</ LinearLayout >
步驟四：在上面的布局文件中我們把該布局的背景定義為 chat_tab_selector,這里同樣需要在drawable文件夾下新建chat_tab_selector.xml,內(nèi)容很簡(jiǎn)單，就是做一個(gè) 按下時(shí)的背景切換，內(nèi)容如下：
???????? < selector xmlns:android = "http://schemas.android.com/apk/res/android" > ????
???????? < item ????
????????android:state_focused = "true"????
????????android:drawable = "@drawable/topbar_bg_down"????
???????? />
???????? < item ????
????????android:state_selected = "true"????
????????android:drawable = "@drawable/topbar_bg_down"????
???????? />
???????? < item ????
????????android:state_pressed = "true"????
????????android:drawable = "@drawable/topbar_bg_down"????
???????? /> ????
???????? < item android:drawable = "@drawable/topbar_background" /> ????
???????? </ selector > ????
里面做了兩張圖進(jìn)行狀態(tài)切換，這兩張圖同樣放 drawable下就可以了
至此，自定義tab的步驟就完成了。如果要做成更復(fù)雜的樣式，大家可以在此基礎(chǔ)上進(jìn)行擴(kuò)展。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
