Android - TabHost 选项卡功能用法详解

Android - TabHost 选项卡功能用法详解

一. TabHost介绍

TabHost组件可以在界面中存放多个选项卡, 很多软件都使用了改组件进行设计;默认都是在屏幕上端的，如何做一个现实在屏幕下端的呢？

1. TabHost常用组件

TabWidget : 该组件就是TabHost标签页中上部或者下部的按钮, 可以点击按钮切换选项卡;
TabSpec : 代表了选项卡界面, 添加一个TabSpec即可添加到TabHost中;
-- 创建选项卡 : newTabSpec(String tag), 创建一个选项卡;
-- 添加选项卡 : addTab(tabSpec);

2. TabHost使用步骤

a. 定义布局 : 在XML文件中使用TabHost组件, 并在其中定义一个FrameLayout选项卡内容;
b. 继承TabActivity : 显示选项卡组件的Activity继承TabActivity;
c. 获取组件 : 通过调用getTabHost()方法, 获取TabHost对象;
d. 创建添加选项卡 : 通过TabHost创建添加选项卡;

3. 将按钮放到下面

布局文件中TabWidget代表的就是选项卡按钮, Fragement组件代表内容;
设置失败情况 : 如果Fragement组件没有设置 android:layout_weight属性, 那么将TabWidget放到下面, 可能不会显示按钮;
设置权重 : 设置了Fragment组件的权重之后, 就可以成功显示该选项卡按钮;

二. TabHost布局文件

1. 根标签及id

设置Android自带id : XML布局文件中, 可以使用 标签设置, 其中的id 需要引用 android的自带id : android:id=@android:id/tabhost ;
getHost()获取前提 : 设置了该id之后, 在Activity界面可以使用 getHost(), 获取这个TabHost 视图对象;

2. TabWidget组件

选项卡切换 : 该组件是选项卡切换按钮, 通过点击该组件可以切换选项卡;
设置android自带id : 这个组件的id要设置成android的自带id : android:id=@android:id/tabs ;
TabHost必备组件 : 该组件与FrameLayout组件是TabHost组件中必备的两个组件;
切换按钮下方显示 : 如果想要将按钮放到下面, 可以将该组件定义在下面, 但是注意,FrameLayout要设置android:layout_widget = 1;
设置TabWidget大小 : 如果想要设置该按钮组件的大小, 可以设置该组件与FrameLayout组件的权重;

3. FrameLayout组件 


组件作用 : 该组件中定义的子组件是TabHost中每个页面显示的选项卡, 可以将TabHost选项卡显示的视图定义在其中;
设置android自带id : 这个组件的id要设置成android的自带的id : android:id=@android:id/tabcontent ;

二. Activity方法

1. 获取TabHost

获取方法 : getHost();
前提 : 调用getHost()方法获取TabHost组件的方法的前提是在布局文件中, 设置了android自带的id android:id=@android:id/tabhost 才可以;

2. 创建选项卡

创建选项卡 : 调用TabHost组件的newTabHost(tag), 其中的tag是字符串, 即在选项卡的唯一标识;
设置选项卡 :
-- 设置按钮名称 : setIndicator();
-- 设置选项卡内容 : setContent(), 可以设置视图组件, 可以设置Activity, 也可以设置Fragement;
添加选项卡 : tabHost.add(tag), 传入的参数是创建选项卡的时候定义的唯一标识;

三 实例代码部分

（1）显示屏幕上端

第一步：定义三个listview布局文件（其它两个类似）

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:orientation="vertical"              android:layout_width="match_parent"              android:layout_height="match_parent">    <!--讨论组-->    <ListView            android:id="@+id/lv_myDiscussion"            android:layout_width="match_parent"            android:layout_height="match_parent"/></LinearLayout>

第二步：listview对应的item布局文件（其它两个类似）

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:orientation="horizontal"              android:layout_width="match_parent"              android:layout_height="match_parent"        >    <!--定义讨论组图片-->    <ImageView            android:id="@+id/iv_dis"            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:scaleType="fitXY"            />    <LinearLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_marginLeft="10dp"            android:orientation="vertical"            >        <!--定义讨论组名称文字控件-->        <TextView                android:id="@+id/tv_dis_title"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="left"                android:textColor="@color/blue"                android:textSize="20sp"/>        <!--定义讨论组简介文字的文字控件-->        <TextView                android:id="@+id/tv_dis_info"                android:gravity="left"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:textColor="@color/blue"                android:textSize="10dp"/>    </LinearLayout></LinearLayout>

第三步：定义实体类，javaBean

package com.ncsyeyy.YeyyQQTabHost.moudle;/** * Created by yeyy on 10/6/2015. */public class MyDiscussion {//    定义讨论组的实体类    public String Name;//名字    public int ImgId;//图片    public String Info;//信息    public MyDiscussion() {        super();    }    public MyDiscussion(String name, int imgId, String info) {        super();        Name = name;        ImgId = imgId;        Info = info;    }}

第四步：adapter适配，补数据映射到listview上

package com.ncsyeyy.YeyyQQTabHost.adapter;import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.TextView;import com.ncsyeyy.YeyyQQTabHost.R;import com.ncsyeyy.YeyyQQTabHost.activity.MyDiscussionActivity;import com.ncsyeyy.YeyyQQTabHost.moudle.MyDiscussion;import java.util.ArrayList;import java.util.List;/** * Created by yeyy on 10/6/2015. */public class MyDiscussionListAdapter extends BaseAdapter {    private LayoutInflater mInflater;    private List<MyDiscussion> list=new ArrayList<MyDiscussion>();    private Context context;    public MyDiscussionListAdapter(List<MyDiscussion> l, Context c) {        list = l;        context = c;    }    @Override    public int getCount() {        return list.size();    }    @Override    public Object getItem(int position) {        return list.get(position);    }    @Override    public long getItemId(int position) {        return position;    }    @Override    public View getView(int position, View convertView, ViewGroup parent) {        ViewHolder viewHolder=null;        if (convertView==null){//            初始化讨论组item视图            convertView= LayoutInflater.from(context).inflate(R.layout.activity_mydiscussion_item,null);            viewHolder=new ViewHolder();//            获得视图中的对象控件            viewHolder.Image=(ImageView)convertView.findViewById(R.id.iv_dis);            viewHolder.Name=(TextView)convertView.findViewById(R.id.tv_dis_title);            viewHolder.Number=(TextView)convertView.findViewById(R.id.tv_dis_info);            convertView.setTag(viewHolder);        } else {            viewHolder=(ViewHolder)convertView.getTag();        }//        设置控件的属性        viewHolder.Image.setBackgroundResource(list.get(position).ImgId);        viewHolder.Name.setText(list.get(position).Name);        viewHolder.Number.setText(list.get(position).Info);        return convertView    }    //    定义内部类作为占位符组合    class ViewHolder {        ImageView Image;        TextView Name;        TextView Number;    }}

第五步：每一个界面展示activity，最后应用到主界面activity上


主界面xml文件

<?xml version="1.0" encoding="utf-8"?><TabHost xmlns:android="http://schemas.android.com/apk/res/android"              android:orientation="vertical"              android:layout_width="fill_parent"              android:layout_height="fill_parent"              android:id="@android:id/tabhost" →组件的id要设置成android的自带的id        >    <!--定义TabHost的标签-->    <LinearLayout            android:orientation="vertical"            android:layout_width="match_parent"            android:layout_height="match_parent">        <!--定义TabWidget控件-->        <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"                android:padding="5dp"/>    </LinearLayout></TabHost>

需要注意几点是： 1、如果你的Tabhost是从xml文件中findViewById()得到的，
                   TabWidget 必须为 android:id="@android:id/tabs" ，
                   FrameLayout android:id="@android:id/tabcontent" ；

对应的界面展示的activity

package com.ncsyeyy.YeyyQQTabHost.activity;import android.app.Activity;import android.os.Bundle;import android.widget.ListView;import com.ncsyeyy.YeyyQQTabHost.R;import com.ncsyeyy.YeyyQQTabHost.adapter.MyDiscussionListAdapter;import com.ncsyeyy.YeyyQQTabHost.moudle.MyDiscussion;import java.util.ArrayList;import java.util.List;/** * Created by yeyy on 10/6/2015. */public class MyDiscussionActivity extends Activity {    private List<MyDiscussion> l=new ArrayList<MyDiscussion>();    private ListView dis_lv;    private MyDiscussionListAdapter myDiscussionListAdapter;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_mydiscussion);        getData();        dis_lv = (ListView) findViewById(R.id.lv_myDiscussion);        myDiscussionListAdapter = new MyDiscussionListAdapter(l,MyDiscussionActivity.this);                dis_lv.setAdapter(myDiscussionListAdapter);    }    private void getData(){        l.add(new MyDiscussion("临时讨论组",R.drawable.ic_launcher,"张三，李四，王五"));        l.add(new MyDiscussion("项目讨论组",R.drawable.ic_launcher,"小一，小二，小七"));        l.add(new MyDiscussion("自定义研讨组",R.drawable.ic_launcher,"a，b，c"));        l.add(new MyDiscussion("课程讨论组",R.drawable.ic_launcher,"wo,ni,ta"));    }}

主界面activity

package com.ncsyeyy.YeyyQQTabHost.activity;import android.app.TabActivity;import android.content.Intent;import android.os.Bundle;import android.widget.TabHost;import com.ncsyeyy.YeyyQQTabHost.R;import com.ncsyeyy.YeyyQQTabHost.moudle.MyDiscussion;public class MyActivity extends TabActivity {    /**     * Called when the activity is first created.     */    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);//        得到activity中的TabHost对象        TabHost tabHost=getTabHost();//        定义tabHost中的tabHost对象        TabHost.TabSpec spec;        Intent intent;//        设置第一个标签页的布局        intent=new Intent(this,MyFriendActivity.class);//setIndicator（）可以设置选项卡得图标和文字。        spec =tabHost.newTabSpec("0").setIndicator("好友").setContent(intent);//        添加到tabHost中        tabHost.addTab(spec);//        设置第二个标签页的布局        intent=new Intent(this,MyGroupActivity.class);        spec =tabHost.newTabSpec("1").setIndicator("群").setContent(intent);//        添加到tabHost中        tabHost.addTab(spec);//        设置第三个标签页的布局        intent=new Intent(this,MyDiscussionActivity.class);        spec =tabHost.newTabSpec("2").setIndicator("讨论组").setContent(intent);        tabHost.addTab(spec);//        设置当前的tabHost的选中标签        tabHost.setCurrentTab(1);    }}

（2）显示屏幕下端


之前写的类似详细介绍博客地址：http://write.blog.csdn.net/postedit/47318245


第一步：自己定义的styles

<?xml version="1.0" encoding="utf-8"?><resources>    <style name="main_tab_bottom">        <item name="android:textSize">13.0sp</item>        <item name="android:gravity">center</item>        <item name="android:background">@null</item>        <item name="android:layout_width">fill_parent</item>        <item name="android:layout_height">fill_parent</item>        <item name="android:button">@null</item>        <item name="android:layout_weight">1</item>    </style></resources>

第二步：主界面xml文件

<?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"        >    <!--TabHost底部RadioGroup样式-->    <LinearLayout            android:orientation="vertical"            android:layout_width="match_parent"            android:layout_height="match_parent">        <FrameLayout                android:id="@android:id/tabcontent"                android:layout_width="match_parent"                android:layout_height="0.0dp"                android:layout_weight="1.0"/>        <TabWidget                android:id="@android:id/tabs"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:visibility="gone"                android:layout_weight="0.0"/>        <!--定义RadioGroup模拟选项卡效果-->        <RadioGroup                android:id="@+id/main_radio"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_gravity="bottom"                android:gravity="center_vertical"                android:background="#ffffd60d"                android:orientation="horizontal">            <RadioButton                    android:id="@+id/radio_btn0"                    android:tag="radio_btn0"                    android:layout_marginTop="2dp"                    android:text="好友"                    android:drawableTop="@drawable/ic_launcher"                    style="@style/main_tab_bottom"                    />            <RadioButton                    android:id="@+id/radio_btn1"                    android:tag="radio_btn1"                    android:layout_marginTop="2dp"                    android:text="广场"                    android:drawableTop="@drawable/ic_launcher"                    style="@style/main_tab_bottom"                    />            <RadioButton                    android:id="@+id/radio_btn2"                    android:tag="radio_btn2"                    android:layout_marginTop="2dp"                    android:text="首页"                    android:drawableTop="@drawable/ic_launcher"                    style="@style/main_tab_bottom"                    />            <RadioButton                    android:id="@+id/radio_btn3"                    android:tag="radio_btn3"                    android:layout_marginTop="2dp"                    android:text="消息"                    android:drawableTop="@drawable/ic_launcher"                    style="@style/main_tab_bottom"                    />            <RadioButton                    android:id="@+id/radio_btn4"                    android:tag="radio_btn4"                    android:layout_marginTop="2dp"                    android:text="更多"                    android:drawableTop="@drawable/ic_launcher"                    style="@style/main_tab_bottom"                    />        </RadioGroup>    </LinearLayout></TabHost>

第三步：定义五个activity布局文件

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              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="one"        android:textSize="25sp"/></LinearLayout>

第四步：对应的五个activity

package com.ncsyeyy.YeyyXLTabHost;import android.app.Activity;import android.os.Bundle;/** * Created by yeyy on 10/6/2015. */public class OneActivity extends Activity {    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_one);    }}

第五步，功能实现

package com.ncsyeyy.YeyyXLTabHost;import android.app.Activity;import android.app.TabActivity;import android.content.Intent;import android.os.Bundle;import android.widget.CompoundButton;import android.widget.RadioGroup;import android.widget.TabHost;public class MyActivity extends TabActivity implements RadioGroup.OnCheckedChangeListener {    private RadioGroup radioGroup;    private TabHost tabHost;    /**     * Called when the activity is first created.     */    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);//        实例化TabHost        tabHost = this.getTabHost();//        添加选项卡，并且设置跳转intent        tabHost.addTab(tabHost.newTabSpec("ONE").setIndicator("ONE").setContent(new Intent(this, OneActivity.class)));        tabHost.addTab(tabHost.newTabSpec("TWO").setIndicator("TWO").setContent(new Intent(this, TwoActivity.class)));        tabHost.addTab(tabHost.newTabSpec("THREE").setIndicator("THREE").setContent(new Intent(this, ThreeActivity.class)));        tabHost.addTab(tabHost.newTabSpec("FOUR").setIndicator("FOUR").setContent(new Intent(this, FourActivity.class)));        tabHost.addTab(tabHost.newTabSpec("FIVE").setIndicator("FIVE").setContent(new Intent(this, FiveActivity.class)));//        得到radioGroup对象        radioGroup = (RadioGroup) findViewById(R.id.main_radio);//        设置radioGroup对象的切换监听器        radioGroup.setOnCheckedChangeListener(this);    }//实现OnCheckedChangeListener中的RadioGroup的选项切换回调函数    @Override    public void onCheckedChanged(RadioGroup group, int checkedId) {//        根据所选中的RadioGroup的选项id，设置TabHost选项卡        switch (checkedId){            case R.id.radio_btn0:                tabHost.setCurrentTabByTag("ONE");                break;            case R.id.radio_btn1:                tabHost.setCurrentTabByTag("TWO");                break;            case R.id.radio_btn2:                tabHost.setCurrentTabByTag("THREE");                break;            case R.id.radio_btn3:                tabHost.setCurrentTabByTag("FOUR");                break;            case R.id.radio_btn4:                tabHost.setCurrentTabByTag("FIVE");                break;        }    }}

源码地址：http://download.csdn.net/detail/csdnyuandaimaxuexi/9177503