Android开发之TabHost选项卡及相关疑难解决方法

2019-12-12 00:16:54

字体：大中小

来源：转载

供稿：网友

本文实例分析了Android开发之TabHost选项卡及相关疑难解决方法。分享给大家供大家参考，具体如下：

前言：

虽然现在谷歌已经不推荐使用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.VeVB.COm/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"    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

@Overrideprotected 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();}

注：此处我已经将点击事件封装到方法中

最后：全剧终

哦，还没有且等我放下最后的图。。