110
Android中TabHost中實現標簽的滾動以及一些TabHost開發的奇怪問題
最近在使用TabHost的時候遇到了一些奇怪的問題，在這裏總結分享備忘一下。
首先說一點TabActivity將會被FragmentActivity所替代，但是本文中卻是使用的TabActivity。
下麵說說本程序能夠實現的功能：
- 實現TabHost中的標題欄能夠橫向滾動；
- 自定義標題欄的大小和樣式；
- 自定義標題欄的分割線的樣式；
下麵分幾步來分別實現以上的功能：
第一步，先實現一個基本的TabHost的展現
詳細的說明可以在網上其它地方搜的，主要就是注意一點，控件的id的是固定的不能隨便更改，並且@和id之間不能加+;
Activity的代碼如下：
1 public class TabhostTestActivity extends TabActivity implements 2 TabContentFactory { 3 private final String[] tabTitle = { "測試Tab標簽1", "測試Tab標簽2", "測試Tab標簽3", 4 "測試Tab標簽4", "測試Tab標簽5", "測試Tab標簽6", "測試Tab標簽7", "測試Tab標簽8", 5 "測試Tab標簽9" }; 6 7 /** Called when the activity is first created. */ 8 @Override 9 public void onCreate(Bundle savedInstanceState) { 10 super.onCreate(savedInstanceState); 11 setContentView(R.layout.tabhost); 12 TabHost th = getTabHost(); 13 for (int i = 0; i < tabTitle.length; i++) { 14 TextView view = (TextView) getLayoutInflater().inflate( 15 R.layout.tabwighet, null); 16 view.setText(tabTitle[i]); 17 th.addTab(th.newTabSpec(tabTitle[i]).setIndicator(view) 18 .setContent(this)); 19 } 20 } 21 22 @Override 23 public View createTabContent(String tag) { 24 View view = new View(this); 25 if (tabTitle[0].equals(tag)) { 26 view.setBackgroundColor(Color.BLUE); 27 } else if (tabTitle[1].equals(tag)) { 28 view.setBackgroundColor(Color.CYAN); 29 } else if (tabTitle[2].equals(tag)) { 30 view.setBackgroundColor(Color.DKGRAY); 31 } else if (tabTitle[3].equals(tag)) { 32 view.setBackgroundColor(Color.GRAY); 33 } else if (tabTitle[4].equals(tag)) { 34 view.setBackgroundColor(Color.GREEN); 35 } else if (tabTitle[5].equals(tag)) { 36 view.setBackgroundColor(Color.LTGRAY); 37 } else if (tabTitle[6].equals(tag)) { 38 view.setBackgroundColor(Color.MAGENTA); 39 } else if (tabTitle[7].equals(tag)) { 40 view.setBackgroundColor(Color.RED); 41 } else if (tabTitle[8].equals(tag)) { 42 view.setBackgroundColor(Color.YELLOW); 43 } 44 return view; 45 } 46 }
對應的layout的xml如下：
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 7 <TabHost 8 android:id="@android:id/tabhost" 9 android:layout_width="match_parent" 10 android:layout_height="match_parent" > 11 12 <LinearLayout 13 android:layout_width="match_parent" 14 android:layout_height="match_parent" 15 android:orientation="vertical" > 16 17 <TabWidget 18 android:id="@android:id/tabs" 19 android:layout_width="wrap_content" 20 android:layout_height="wrap_content" > 21 </TabWidget> 22 23 <FrameLayout 24 android:id="@android:id/tabcontent" 25 android:layout_width="match_parent" 26 android:layout_height="match_parent" > 27 </FrameLayout> 28 </LinearLayout> 29 </TabHost> 30 31 </LinearLayout>
1 <?xml version="1.0" encoding="utf-8"?> 2 <TextView xmlns:android="https://schemas.android.com/apk/res/android" 3 android:id="@+id/tv_title" 4 android:layout_width="wrap_content" 5 android:layout_height="wrap_content" 6 android:layout_gravity="center" 7 android:gravity="center" 8 android:singleLine="true" />
運行後的效果圖如下（平板1280*800的設備）：
第二步，給標簽欄添加橫向的滾動操作
這個很簡單，隻需要修改一下tabhost.xml即可：
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 7 <TabHost 8 android:id="@android:id/tabhost" 9 android:layout_width="match_parent" 10 android:layout_height="match_parent" > 11 12 <LinearLayout 13 android:layout_width="match_parent" 14 android:layout_height="match_parent" 15 android:orientation="vertical" > 16 17 <HorizontalScrollView 18 android:layout_width="fill_parent" 19 android:layout_height="wrap_content" 20 android:fillViewport="true" 21 android:scrollbars="none" > 22 23 <TabWidget 24 android:id="@android:id/tabs" 25 android:layout_width="wrap_content" 26 android:layout_height="wrap_content" > 27 </TabWidget> 28 </HorizontalScrollView> 29 30 <FrameLayout 31 android:id="@android:id/tabcontent" 32 android:layout_width="match_parent" 33 android:layout_height="match_parent" > 34 </FrameLayout> 35 </LinearLayout> 36 </TabHost> 37 38 </LinearLayout>
運行效果如下：
第三步，修改標簽的寬度和高度
這裏要改2個地方，一個是activity中，一個是tabwighet.xml中；
首先說明一下tabwighet.xml修改，代碼如下：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:gravity="center_horizontal" android:orientation="vertical" > <TextView android:id="@+id/tv_title" android:layout_width="200dp" android:layout_height="50dp" android:layout_gravity="center" android:gravity="center" android:singleLine="true" /> </LinearLayout>
其中需要注意一點，設置標簽的寬度和高度不能設置到LinearLayout上，否則設置的寬度和高度不起作用。
Activity的修改就很簡單了，根據tabwighet.xml的修改稍微調整一下代碼即可，修改的代碼如下：
1 LinearLayout view = (LinearLayout) getLayoutInflater().inflate( 2 R.layout.tabwighet, null); 3 ((TextView) view.findViewById(R.id.tv_title)).setText(tabTitle[i]);
運行的效果如下：
第四步，修改標簽的樣式，增加背景圖片和選中的狀態，以及選中後的字體的顏色
首先修改tabhost.xml文件，為HorizontalScrollView和FrameLayout添加設置background的屬性，圖片自己選個即可。代碼如下：
1 <HorizontalScrollView 2 android:layout_width="fill_parent" 3 android:layout_height="wrap_content" 4 android:background="@drawable/ic_tab_header_background" 5 android:fillViewport="true" 6 android:scrollbars="none" > 7 8 <TabWidget 9 android:id="@android:id/tabs" 10 android:layout_width="wrap_content" 11 android:layout_height="wrap_content" > 12 </TabWidget> 13 </HorizontalScrollView> 14 15 <FrameLayout 16 android:id="@android:id/tabcontent" 17 android:layout_width="match_parent" 18 android:layout_height="match_parent" 19 android:background="@drawable/ic_tab_body_background" > 20 </FrameLayout>
然後在drawable文件夾中添加2個selector，一個是用來設置選中的標簽的背景的，一個是用來設置選中的字體顏色變化的，代碼如下：
1 <?xml version="1.0" encoding="utf-8"?> 2 <selector xmlns:android="https://schemas.android.com/apk/res/android"> 3 <item android:drawable="@drawable/tabbar_bg_selected" android:state_selected="true"></item> 4 <item android:drawable="@android:color/transparent" android:state_selected="false"></item> 5 </selector>
1 <?xml version="1.0" encoding="utf-8"?> 2 <selector xmlns:android="https://schemas.android.com/apk/res/android"> 3 <item android:color="#9d9d9d" android:state_selected="false"></item> 4 <item android:color="@android:color/black" android:state_selected="true"></item> 5 </selector>
最後修改tabwighet.xml將樣式添加到標簽上：
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" 3 android:layout_width="wrap_content" 4 android:layout_height="wrap_content" 5 android:layout_gravity="center_horizontal" 6 android:background="@drawable/selector_tab_header_item_background" 7 android:gravity="center_horizontal" 8 android:orientation="vertical" > 9 10 <TextView 11 android:id="@+id/tv_title" 12 android:layout_width="200dp" 13 android:layout_height="50dp" 14 android:layout_gravity="center" 15 android:gravity="center" 16 android:singleLine="true" 17 android:textColor="@drawable/selector_tab_header_item_txt_color" /> 18 </LinearLayout>
運行效果如下：
第五步，添加tabhost中標簽間的分割線
修改tabhost.xml的代碼為：
<TabWidget android:id="@android:id/tabs" android:layout_width="wrap_content" android:layout_height="wrap_content" android:divider="@drawable/ic_tabbar_divider" > </TabWidget>
效果圖如下：
以上幾步就完成了我們預定的3個功能。
下麵是我在開發中遇到的幾個特使的問題，總結一下並列出我的解決方法：
1.標簽的寬度總是設置不成功——請參照第三步操作，這裏注意設置最外邊的view的寬度是不能控製標簽的寬度的。
2.標簽間設置的自定義分割圖片總是不顯示——檢查AndroidManifest.xml中是不是設置了application的android:theme屬性，如果設置成了@android:style/Theme.NoTitleBar，那麼設置的分割是不能正常顯示的（初步測試設置了與NoTitleBar有關的樣式的屬性都不能顯示），如果設置這個屬性是為了隱藏actionbar，建議修改成@android:style/Theme.DeviceDefault.NoActionBar。
最後更新：2017-04-04 07:03:09