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

2024-10-21 06:26:18

本文实例分析了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.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"
    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();
}

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

最后：全剧终

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

啧啧，搞定

更多关于Android相关内容感兴趣的读者可查看本站专题：《Android开发入门与进阶教程》、《Android调试技巧与常见问题解决方法汇总》、《Android基本组件用法总结》、《Android视图View技巧总结》、《Android布局layout技巧总结》及《Android控件用法总结》

希望本文所述对大家Android程序设计有所帮助。

Android组件TabHost实现页面中多个选项卡切换效果

TabHost组件可以在界面中存放多个选项卡, 很多软件都使用了改组件进行设计. 一.基础知识 TabWidget : 该组件就是TabHost标签页中上部或者下部的按钮, 可以点击按钮切换选项卡; TabSpec : 代表了选项卡界面, 添加一个TabSpec即可添加到TabHost中; -- 创建选项卡 : newTabSpec(String tag), 创建一个选项卡; -- 添加选项卡 : addTab(tabSpec); 二.实例讲解 TabHost的基本使用,主要是layout的
Android控件之TabHost用法实例分析

本文实例讲述了Android控件之TabHost用法.分享给大家供大家参考.具体如下: 以下通过TabHost实现android选项卡. main.xml布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width=
Android多个TAB选项卡切换效果

在前一期中,我们做了悬浮头部的两个tab切换和下拉刷新效果,后来项目中要求改成三个tab,当时就能估量了一下,如果从之前的改,也不是不可以,但是要互相记住的状态就太多了,很容易出现错误.就决定重新实现一下这个效果,为此先写了一个demo,这期间项目都已经又更新了两个版本了.demo还木有变成文章. 之前的版本中是采用了一个可以下拉刷新的listview,之后在listview中添加了两个头部,并且在该布局上的上面用了一个一模一样的切换tab,如果没有看过前面版本的,可以看看前一个版本,Listv
android 选项卡(TabHost)如何放置在屏幕的底部

今天写Tab的时候由于TAB的跳转问题去查资料,倒反而发现更有趣的问题,就是如何将TAB放置在屏幕的底端. 复制代码代码如下: <?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" a
Android仿微信底部实现Tab选项卡切换效果

在网上看了比较多的关于Tab的教程,发现都很杂乱.比较多的用法是用TitlePagerTabStrip和ViewPaper.不过TitlePagerTabStrip有个很大的缺陷,Tab里面的内容刚进去是没有的,要滑一次才能加载出来.而且滑动的时候,Tab里面的内容位置不是固定的,滑倒最后会出现一片空白,非常不美观.虽然有其他的补救方法,但是非常的麻烦,所以我就按照自己的方法实现了一个,功能不错而且非常简单. 直接点击或者是滑动界面,都可以转到相应的页面. 效果图: 原理是用了三个按钮和View
android TabHost(选项卡)的使用方法

首先,定义TabHost的布局文件: 复制代码代码如下: <?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="fill_p
Android实现底部导航栏功能（选项卡）

现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其中各个类的作用以及资源文件就不详细解释了,还有资源图片(在该Demo中借用了其它应用程序的资源图片)也不提供了,大家可以自行更换自己需要的资源图片.直接上各个布局文件或各个类的代码: 1. res/layout目录下的 maintabs.xml 源码: <?xml version="1.0&q
Android TabHost选项卡标签图标始终不出现的解决方法

本文实例分析了Android TabHost选项卡标签图标始终不出现的解决方法.分享给大家供大家参考,具体如下: 在学习Android TabHost布局过程中,很多教程告诉我,这样来显示选项卡标签的图标和文字: TapSpec spec1 = tabHost.newTabSpec("tab 1"); spec1.setIndicator("选项卡一", getResources().getDrawable(R.drawable.tab_icon)); spec1.
android中TabHost的图标(48×48)和文字叠加解决方法

开发过程中,有时候图标稍微大点,比如48×48的时候,文字就会和图标叠加起来,解决方法如下: 复制代码代码如下: TabWidget tw = tabHost.getTabWidget(); for (int i = 0; i < tw.getChildCount(); i++) { TextView tv=(TextView)tw.getChildAt(i).findViewById(android.R.id.title); ImageView iv=(ImageView)t
Android TabLayout(选项卡布局)简单用法实例分析

本文实例讲述了Android TabLayout(选项卡布局)简单用法.分享给大家供大家参考,具体如下: 我们在应用viewpager的时候,经常会使用TabPageIndicator来与其配合.达到很漂亮的效果.但是TabPageIndicator是第三方的,而且比较老了,当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求,在2015年的google大会上,google发布了新的Android Support Design库,里面包含了几个新的控件,其中就有一个

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

相关推荐

随机推荐