Android開發(fā)之TabHost選項卡及相關(guān)疑難解決方法

發(fā)布時間：2020-08-25 03:28:37 來源：腳本之家閱讀：250 作者：水中魚之1999 欄目：移動開發(fā)

本文實例分析了Android開發(fā)之TabHost選項卡及相關(guān)疑難解決方法。分享給大家供大家參考，具體如下：

前言：

雖然現(xiàn)在谷歌已經(jīng)不推薦使用TabHost，但是初學(xué)者還是很有必要接觸下這一成金的經(jīng)典的，本文將介紹纖細(xì)介紹這一空間的使用，以及大家可能遇到的問題。注：文末給出完整實現(xiàn)代碼

三個問題：

1. 無法顯示TabHost

2. 添加圖片 + 文字無法同時

3. 說在最后：點擊事件

4. 底部導(dǎo)航無法實現(xiàn)

現(xiàn)在

從問題出發(fā)：

問題一：無法顯示 TabHost

很多人調(diào)用TabHost的方法是：

setContentView(R.layout.activity_main);
tabHost = getTabHost();

然后發(fā)現(xiàn)啥也沒有，一臉蒙圈。。。在這里建議大家采用遮掩的調(diào)用方法：

LayoutInflater.from(this).inflate(R.layout.activity_main,
    tabHost.getTabContentView(), true);

成功后的頁面：

Android開發(fā)之TabHost選項卡及相關(guān)疑難解決方法

注：UI 略丑請忽視

問題二：圖片、文字無法同時添加

好了，很多人辛辛苦苦把界面搞出來了，可能想搞個底部菜單加個圖片，結(jié)果涼涼半天搞不出來，這里介紹一個方法，由于TabHost本身圖片、文字沖突，無法添加，這是我們就得把目光遷移到自定義view上：本段參考自：https://www.jb51.net/article/157914.htm

首先在/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"
    
    />
</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>

這些都搞定之后，就可以在活動中調(diào)用了：

首先在活動中先建立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);
}

終于我們。。。：

Android開發(fā)之TabHost選項卡及相關(guān)疑難解決方法

成功了！??！

問題三：添加監(jiān)聽事件

這個無腦只要 id 匹配就行了，直接上代碼：

tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener(){
  @Override
  // tabId是newTabSpec參數(shù)設(shè)置的tab頁名，并不是layout里面的標(biāo)識符id
  public void onTabChanged(String tabId) {
    if (tabId.equals("tab1")) {  //第一個標(biāo)簽
      Toast.makeText(MainActivity.this, "點擊標(biāo)簽頁一", Toast.LENGTH_SHORT).show();
    }else if (tabId.equals("tab2")) {  //第二個標(biāo)簽
      Toast.makeText(MainActivity.this, "點擊標(biāo)簽頁二", Toast.LENGTH_SHORT).show();
    }else if (tabId.equals("tab3")) {  //第三個標(biāo)簽
      Toast.makeText(MainActivity.this, "點擊標(biāo)簽頁三", Toast.LENGTH_SHORT).show();
    }
  }
});

暫時能記起來的疑難就這些了如果還有請給我留言我盡力解答。。

附上布局與實現(xiàn)：

布局：

<?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">
        <!--定義第一個標(biāo)簽頁特內(nèi)容-->
        <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>
        <!--定義第二個標(biāo)簽頁的內(nèi)容-->
        <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>
        <!--定義第三個標(biāo)簽頁的內(nèi)容-->
        <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>

實現(xiàn)：

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);
//
    //標(biāo)簽切換事件處理，setOnTabChangedListener
    tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener(){
      @Override
      // tabId是newTabSpec參數(shù)設(shè)置的tab頁名，并不是layout里面的標(biāo)識符id
      public void onTabChanged(String tabId) {
        if (tabId.equals("tab1")) {  //第一個標(biāo)簽
          Toast.makeText(MainActivity.this, "點擊標(biāo)簽頁一", Toast.LENGTH_SHORT).show();
        }else if (tabId.equals("tab2")) {  //第二個標(biāo)簽
          Toast.makeText(MainActivity.this, "點擊標(biāo)簽頁二", Toast.LENGTH_SHORT).show();
        }else if (tabId.equals("tab3")) {  //第三個標(biāo)簽
          Toast.makeText(MainActivity.this, "點擊標(biāo)簽頁三", 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文件在問題給過，這里就不反復(fù)給了。

問題四：底部導(dǎo)航效果無法實現(xiàn)

底部導(dǎo)航的參見方法是把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">
        中間內(nèi)容前面給出 這里省略
      </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>

你會發(fā)現(xiàn)并沒有什么卵用 ?。?！嘔！！，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);
  //標(biāo)簽切換事件處理，setOnTabChangedListener
  iniClick();
}

注：此處我已經(jīng)將點擊事件封裝到方法中

最后：全劇終

哦，還沒有且等我放下最后的圖。。

Android開發(fā)之TabHost選項卡及相關(guān)疑難解決方法

嘖嘖，搞定

更多關(guān)于Android相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《Android開發(fā)入門與進(jìn)階教程》、《Android調(diào)試技巧與常見問題解決方法匯總》、《Android基本組件用法總結(jié)》、《Android視圖View技巧總結(jié)》、《Android布局layout技巧總結(jié)》及《Android控件用法總結(jié)》

希望本文所述對大家Android程序設(shè)計有所幫助。

向AI問一下細(xì)節(jié)

Android開發(fā)之TabHost選項卡及相關(guān)疑難解決方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽