Android-TabHost選項卡-疑難全解
阿新 • • 發佈：2018-12-17
前言：
雖然現在谷歌已經不推薦使用TabHost，但是初學者還是很有必要接觸下這一成金的經典的，本文將介紹纖細介紹這一空間的使用，以及大家可能遇到的問題。注：文末給出完整實現程式碼
三個問題：
1. 無法顯示TabHost
2. 新增圖片 + 文字 無法同時
3. 說在最後：點選事件
4. 底部導航無法實現
現在
從問題出發：
問題一：無法顯示 TabHost
很多人呼叫TabHost的方法是：
setContentView(R.layout.activity_main);
tabHost = getTabHost();然後發現啥也沒有
LayoutInflater.from(this).inflate(R.layout.activity_main,
tabHost.getTabContentView(), true);成功後的頁面：
注：UI 略醜請忽視
問題二：圖片、文字無法同時新增
好了，很多人辛辛苦苦把介面搞出來了，可能想搞個底部選單 加個圖片，結果涼涼 半天搞不出來 ，這裡介紹一個方法 ，由於TabHost本身圖片、文字衝突 ，無法新增，這是我們就得把目光遷移到自定義view上：本段參考自：https://www.cnblogs.com/lovecode/articles/2652510.html
首先在/layout下建立自定義view名為：tab_indicator.xml檔案
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="0dip" android:layout_height="64dip" android:layout_weight="1" android:orientation="vertical" android:background="#45c0c0c0" android:padding="5dp"> <ImageView android:id="@+id/icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" /> <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" style="?android:attr/tabWidgetStyle" /> </RelativeLayout>
接著，緊隨其後在/drawable下新增：tab_info.xml檔案：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/find"
android:state_selected="true" />
<item android:drawable="@drawable/find1" />
</selector>這些都搞定之後，就可以在活動中呼叫了：
首先在活動中先建立AddTab()方法：
private void AddTab(String label, int drawableId) {
Intent intent = new Intent(this, TextActivity.class);
TabHost.TabSpec spec = tabHost.newTabSpec(label);
View tabIndicator = LayoutInflater.from(this).inflate(R.layout.tab_indicator, getTabWidget(), false);
TextView title = (TextView) tabIndicator.findViewById(R.id.title);
title.setText(label);
ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon);
icon.setImageResource(drawableId);
spec.setIndicator(tabIndicator);
spec.setContent(intent);
tabHost.addTab(spec);
}終於我們。。。：
成功了！！！
問題三：新增監聽事件
這個無腦 只要 id 匹配就行了，直接上程式碼：
tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener(){
@Override
// tabId是newTabSpec引數設定的tab頁名，並不是layout裡面的識別符號id
public void onTabChanged(String tabId) {
if (tabId.equals("tab1")) { //第一個標籤
Toast.makeText(MainActivity.this, "點選標籤頁一", Toast.LENGTH_SHORT).show();
}else if (tabId.equals("tab2")) { //第二個標籤
Toast.makeText(MainActivity.this, "點選標籤頁二", Toast.LENGTH_SHORT).show();
}else if (tabId.equals("tab3")) { //第三個標籤
Toast.makeText(MainActivity.this, "點選標籤頁三", Toast.LENGTH_SHORT).show();
}
}
});暫時能記起來的 疑難就這些了 如果還有請給我留言 我盡力解答。。
附上佈局與實現：
佈局：
<?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="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scrollbarSize="100dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--定義第一個標籤頁特內容-->
<LinearLayout
android:id="@+id/tab01"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="text11"
android:textSize="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="text12"
android:textSize="20dp"/>
</LinearLayout>
<!--定義第二個標籤頁的內容-->
<LinearLayout
android:id="@+id/tab02"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="text11"
android:textSize="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="text12"
android:textSize="20dp"/>
</LinearLayout>
<!--定義第三個標籤頁的內容-->
<LinearLayout
android:id="@+id/tab03"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="text11"
android:textSize="20dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="text12"
android:textSize="20dp"/>
</LinearLayout>
</FrameLayout>
</TabWidget>
</LinearLayout>
</TabHost>
實現：
public class MainActivity extends TabActivity {
TabHost tabHost;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.activity_main);
tabHost = getTabHost();
LayoutInflater.from(this).inflate(R.layout.activity_main,
tabHost.getTabContentView(), true);
AddTab("tab1", R.drawable.tab_info);
AddTab("tab2", R.drawable.tab_info);
AddTab("tab3", R.drawable.tab_info);
//
//標籤切換事件處理，setOnTabChangedListener
tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener(){
@Override
// tabId是newTabSpec引數設定的tab頁名，並不是layout裡面的識別符號id
public void onTabChanged(String tabId) {
if (tabId.equals("tab1")) { //第一個標籤
Toast.makeText(MainActivity.this, "點選標籤頁一", Toast.LENGTH_SHORT).show();
}else if (tabId.equals("tab2")) { //第二個標籤
Toast.makeText(MainActivity.this, "點選標籤頁二", Toast.LENGTH_SHORT).show();
}else if (tabId.equals("tab3")) { //第三個標籤
Toast.makeText(MainActivity.this, "點選標籤頁三", Toast.LENGTH_SHORT).show();
}
}
});
}
private void AddTab(String label, int drawableId) {
Intent intent = new Intent(this, TextActivity.class);
TabHost.TabSpec spec = tabHost.newTabSpec(label);
View tabIndicator = LayoutInflater.from(this).inflate(R.layout.tab_indicator, getTabWidget(), false);
TextView title = (TextView) tabIndicator.findViewById(R.id.title);
title.setText(label);
ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon);
icon.setImageResource(drawableId);
spec.setIndicator(tabIndicator);
spec.setContent(intent);
tabHost.addTab(spec);
}
}ps：新建的layout和/drawable裡的xml檔案在問題給過，這裡就不反覆給了。
問題四：底部導航效果無法實現
底部導航的參見方法是把TabWidget放在FrameLayout後面，但是嘖嘖。。。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top">
中間內容前面給出 這裡省略
</FrameLayout>
</LinearLayout>
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" >
</TabWidget>
</TabHost>
</RelativeLayout>你會發現並沒有什麼 卵用 ！！！嘔！！，so：
百度了半天找不到問題所在，然後。。。修改下MainActivity
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//原來
// tabHost = getTabHost();
// LayoutInflater.from(this).inflate(R.layout.activity_main,
// tabHost.getTabContentView(), true);
//修改後
setContentView(R.layout.activity_main);
tabHost = getTabHost();
tabHost.setup(this.getLocalActivityManager());
AddTab("tab1", R.drawable.tab_info);
AddTab("tab2", R.drawable.tab_info);
AddTab("tab3", R.drawable.tab_info);
//標籤切換事件處理，setOnTabChangedListener
iniClick();
}注：此處我已經將點選事件封裝到方法中
最後：全劇終
哦，還沒有且等我放下最後的圖。。
嘖嘖，搞定