Android TabHost 实现Tab切换

TabHost是整个Tab的容器，包含TabWidget和FrameLayout两个部分，TabWidget是每个Tab的表情(图标效果)，FrameLayout是Tab内容

实现方式有两种：

1、继承TabActivity

2、继承Activity类

 

方法一：继承TabActivity

从TabActivity中用getTabHost()方法获取TabHost，然后设置标签内容

布局：

1、TabHost　　　　必须设置android:id为@android:id/tabhost
2、TabWidget　　　必须设置android:id为@android:id/tabs
3、FrameLayout　  必须设置android:id为@android:id/tabcontent

这几个都是系统自带id，最好是快捷键联想生成，不要手写，这样不容易出错

 

XML布局文件：

 1 <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:layout_width="match_parent"
 3     android:layout_height="match_parent"
 4     android:id="@android:id/tabhost"
 5     >
 6 
 7     <LinearLayout
 8         android:layout_width="match_parent"
 9         android:layout_height="match_parent"
10         android:orientation="vertical"
11         >
12 
13 
14 
15         <FrameLayout
16             android:layout_width="match_parent"
17             android:layout_height="0dp"
18             android:layout_weight="1"
19             android:id="@android:id/tabcontent"
20             >
21             <LinearLayout
22                 android:layout_width="match_parent"
23                 android:layout_height="match_parent"
24                 android:id="@+id/widget_layout_red"
25                 android:background="#ff0000"
26                 android:orientation="vertical"
27                 ></LinearLayout>
28 
29             <LinearLayout
30                 android:layout_width="match_parent"
31                 android:layout_height="match_parent"
32                 android:id="@+id/widget_layout_yellow"
33                 android:background="#FCD209"
34                 android:orientation="vertical"
35                 ></LinearLayout>
36 
37         </FrameLayout>
38         <TabWidget
39             android:layout_width="match_parent"
40             android:layout_height="wrap_content"
41             android:id="@android:id/tabs"
42             android:background="@mipmap/ic_launcher"
43             >
44 
45         </TabWidget>
46     </LinearLayout>
47 </TabHost>

 

 

Java代码实现：

 1 public class MainActivity extends TabActivity {
 2     private TabHost tabhost;
 3     @Override
 4     protected void onCreate(Bundle savedInstanceState) {
 5         super.onCreate(savedInstanceState);
 6         setContentView(R.layout.activity_main);
 7 
 8         //从TabActivity上面获取放置Tab的TabHost
 9         tabhost = getTabHost();
10 
11         tabhost.addTab(tabhost
12                 //创建新标签one
13                 .newTabSpec("one")
14                 //设置标签标题
15                 .setIndicator("红色")
16                 //设置该标签的布局内容
17                 .setContent(R.id.widget_layout_red));
18         tabhost.addTab(tabhost.newTabSpec("two").setIndicator("黄色").setContent(R.id.widget_layout_yellow));
19     }
20 }

 

 

实现效果如下：

 

 

方法二：继承Activity类

布局：

1、TabHost　　　　可自定义id
2、TabWidget　　　必须设置android:id为@android:id/tabs
3、FrameLayout　  必须设置android:id为@android:id/tabcontent

 

XML布局：

 

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/zidingyi"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >



        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:id="@android:id/tabcontent"
            >
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/widget_layout_red"
                android:background="#ff0000"
                android:orientation="vertical"
                ></LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/widget_layout_yellow"
                android:background="#FCD209"
                android:orientation="vertical"
                ></LinearLayout>

        </FrameLayout>
        <TabWidget
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@android:id/tabs"
            android:background="@mipmap/ic_launcher"
            >

        </TabWidget>
    </LinearLayout>
</TabHost>

 

 

 

 

java代码实现：

public class MainActivity extends Activity {
    private TabHost tabhost;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //得到TabHost对象实例
        tabhost =(TabHost) findViewById(R.id.ho);
        //调用 TabHost.setup()
        tabhost.setup();
        //创建Tab标签
        tabhost.addTab(tabhost.newTabSpec("one").setIndicator("红色").setContent(R.id.widget_layout_red));
        tabhost.addTab(tabhost.newTabSpec("two").setIndicator("黄色").setContent(R.id.widget_layout_yellow));

    }

}

 

 

 

 

 

自定义选项卡

很多时候系统自带的样式并不能满足我们的使用，就像QQ下面的选项栏有两种状态，点击时是一种图片效果，未点击时又是一种图片效果，下面记录一下怎么自定义选项卡，这里只实现了最左边的点击效果

效果图：

 

 

XML布局：（浅蓝色背景的是三个不同界面的布局内容，可以忽略。绿色背景是比较重要，但是容易被忽视的属性）

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/Mytab"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <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="wrap_content"
            android:layout_weight="1">

            <RelativeLayout
                android:id="@+id/one"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#f5f5f9"
                android:orientation="vertical">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/too"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#00a2ac">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_margin="15dp"
                        android:gravity="center"
                        android:text="设置"
                        android:textColor="#ffffff" />

                </android.support.v7.widget.Toolbar>

                <TextView
                    android:id="@+id/text_1"
                    android:layout_width="wrap_content"
                    android:layout_height="1px"
                    android:layout_below="@+id/too"
                    android:layout_marginTop="20dp"
                    android:background="#f3f3f3" />

                <TextView
                    android:id="@+id/text_2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/text_1"
                    android:background="#ffffff"
                    android:drawableRight="@mipmap/a2"
                    android:padding="20px"
                    android:text="服务大厅"
                    android:textColor="#000000" />

                <TextView
                    android:id="@+id/text_3"
                    android:layout_width="wrap_content"
                    android:layout_height="1px"
                    android:layout_below="@id/text_2"
                    android:background="#f3f3f3" />


                <TextView
                    android:id="@+id/text_4"
                    android:layout_width="wrap_content"
                    android:layout_height="1px"
                    android:layout_below="@id/text_3"
                    android:layout_marginTop="20dp"
                    android:background="#f3f3f3" />

                <TextView
                    android:id="@+id/text_5"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/text_4"
                    android:background="#ffffff"
                    android:drawableRight="@mipmap/a2"
                    android:padding="20px"
                    android:text="服务大厅"
                    android:textColor="#000000" />

                <TextView
                    android:id="@+id/text_6"
                    android:layout_width="wrap_content"
                    android:layout_height="1px"
                    android:layout_below="@id/text_5"
                    android:background="#f3f3f3" />

                <TextView
                    android:id="@+id/text_7"
                    android:layout_width="wrap_content"
                    android:layout_height="1px"
                    android:layout_below="@+id/text_6"
                    android:layout_marginTop="20dp"
                    android:background="#f3f3f3" />

                <TextView
                    android:id="@+id/text_8"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/text_7"
                    android:background="#ffffff"
                    android:drawableRight="@mipmap/a2"
                    android:padding="20px"
                    android:text="服务大厅"
                    android:textColor="#000000" />

                <TextView
                    android:id="@+id/text_9"
                    android:layout_width="wrap_content"
                    android:layout_height="1px"
                    android:layout_below="@id/text_8"
                    android:background="#f3f3f3" />


                <TextView
                    android:id="@+id/text_10"
                    android:layout_width="wrap_content"
                    android:layout_height="1px"
                    android:layout_below="@+id/text_9"
                    android:layout_marginTop="20dp"
                    android:background="#f3f3f3" />

                <TextView
                    android:id="@+id/text_11"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/text_10"
                    android:background="#ffffff"
                    android:drawableRight="@mipmap/a2"
                    android:padding="20px"
                    android:text="服务大厅"
                    android:textColor="#000000" />

                <TextView
                    android:id="@+id/text_12"
                    android:layout_width="wrap_content"
                    android:layout_height="1px"
                    android:layout_below="@id/text_11"
                    android:background="#f3f3f3" />

                <TextView
                    android:id="@+id/text_13"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/text_12"
                    android:background="#ffffff"
                    android:drawableRight="@mipmap/a2"
                    android:padding="20px"
                    android:text="服务大厅"
                    android:textColor="#000000" />

                <TextView
                    android:id="@+id/text_14"
                    android:layout_width="wrap_content"
                    android:layout_height="1px"
                    android:layout_below="@id/text_13"
                    android:background="#f3f3f3" />

                <TextView
                    android:id="@+id/text_15"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/text_14"
                    android:background="#ffffff"
                    android:drawableRight="@mipmap/a2"
                    android:padding="20px"
                    android:text="服务大厅"
                    android:textColor="#000000" />

                <TextView
                    android:id="@+id/text_16"
                    android:layout_width="wrap_content"
                    android:layout_height="1px"
                    android:layout_below="@id/text_15"
                    android:background="#f3f3f3" />


                <TextView
                    android:id="@+id/text_17"
                    android:layout_width="wrap_content"
                    android:layout_height="1px"
                    android:layout_below="@+id/text_16"
                    android:layout_marginTop="20dp"
                    android:background="#f3f3f3" />

                <TextView
                    android:id="@+id/text_18"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/text_17"
                    android:background="#ffffff"
                    android:drawableRight="@mipmap/a2"
                    android:padding="20px"
                    android:text="服务大厅"
                    android:textColor="#000000" />

                <TextView
                    android:id="@+id/text_19"
                    android:layout_width="wrap_content"
                    android:layout_height="1px"
                    android:layout_below="@id/text_18"
                    android:background="#f3f3f3" />


                <TextView
                    android:id="@+id/text_20"
                    android:layout_width="wrap_content"
                    android:layout_height="1px"
                    android:layout_below="@+id/text_19"
                    android:layout_marginTop="20dp"
                    android:background="#f3f3f3" />

                <TextView
                    android:id="@+id/text_21"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/text_20"
                    android:background="#ffffff"
                    android:drawableRight="@mipmap/a2"
                    android:padding="20px"
                    android:text="服务大厅"
                    android:textColor="#000000" />

                <TextView
                    android:id="@+id/text_22"
                    android:layout_width="wrap_content"
                    android:layout_height="1px"
                    android:layout_below="@id/text_21"
                    android:background="#f3f3f3" />

                <TextView
                    android:id="@+id/text_23"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/text_22"
                    android:background="#ffffff"
                    android:drawableRight="@mipmap/a2"
                    android:padding="20px"
                    android:text="服务大厅"
                    android:textColor="#000000" />

                <TextView
                    android:id="@+id/text_24"
                    android:layout_width="wrap_content"
                    android:layout_height="1px"
                    android:layout_below="@id/text_23"
                    android:background="#f3f3f3" />


            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/two"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/a3"
                android:orientation="vertical">

            </RelativeLayout>

            <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/three"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <LinearLayout
                    android:layout_width="match_parent"

                    android:layout_height="match_parent"
                    android:background="#FFFFFF"
                    android:gravity="center"
                    android:orientation="vertical">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="60dp"
                        android:background="#00A2AC"
                        android:gravity="center_vertical"
                        android:orientation="horizontal">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="15dp"
                            android:text="其他登录方式"
                            android:textColor="#FFFFFF" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1" />

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@mipmap/x" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="170dp"
                        android:background="#00A2AC"
                        android:gravity="center"
                        android:orientation="vertical">

                        <ImageView
                            android:layout_width="200dp"
                            android:layout_height="100dp"
                            android:src="@mipmap/x1" />

                        <ImageView
                            android:layout_width="200dp"
                            android:layout_height="50dp"
                            android:layout_marginBottom="20dp"
                            android:src="@mipmap/x2" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="150dp"
                        android:background="#FFFFFF"
                        android:gravity="center_vertical"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="wrap_content"

                            android:layout_height="wrap_content"
                            android:layout_marginLeft="20dp"
                            android:text="贷款，其实是一件小事"
                            android:textSize="22sp" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="20dp"
                            android:layout_marginTop="15dp"
                            android:text="为微小型企业，经营者提供便捷的贷款服务"
                            android:textColor="#CDCDCD" />
                    </LinearLayout>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="100dp"
                        android:layout_marginLeft="20dp"
                        android:background="#FFFFFF"
                        android:gravity="center_vertical"
                        android:text="无抵押  / 审核快   / 期限灵活"
                        android:textColor="#00A2AC"
                        android:textSize="22sp" />

                    <TextView

                        android:layout_width="fill_parent"
                        android:layout_height="5dp"
                        android:background="#CDCDCD" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="150dp"
                        android:background="#FFFFFF"
                        android:gravity="center_vertical"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="wrap_content"

                            android:layout_height="wrap_content"
                            android:layout_marginLeft="20dp"
                            android:text="选择不必太多，理财合适就好"
                            android:textSize="22sp" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="20dp"
                            android:layout_marginTop="15dp"
                            android:text="精选理财铲平，资金安全更安心"
                            android:textColor="#CDCDCD" />
                    </LinearLayout>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="100dp"
                        android:layout_marginLeft="20dp"
                        android:background="#FFFFFF"
                        android:gravity="center_vertical"
                        android:text="安全投资  / 收益稳健   / 周转灵活"
                        android:textColor="#F76D2B"
                        android:textSize="22sp" />


                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="120dp"
                        android:layout_marginLeft="20dp"
                        android:layout_marginRight="20dp"
                        android:gravity="center_horizontal"
                        android:orientation="horizontal">

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:layout_weight="4"
                            android:gravity="center_vertical"
                            android:orientation="vertical">

                            <TextView


                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="Ta行app转账攻略" />

                            <TextView


                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="15家银行转账操作指南" />

                            <TextView

                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="资讯"
                                android:textColor="#00A2AC" />
                        </LinearLayout>

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@mipmap/b1" />

                    </LinearLayout>


                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="120dp"
                        android:layout_marginLeft="20dp"
                        android:layout_marginRight="20dp"
                        android:gravity="center_horizontal"
                        android:orientation="horizontal">

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:layout_weight="4"
                            android:gravity="center_vertical"
                            android:orientation="vertical">

                            <TextView


                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="Ta行app转账攻略" />

                            <TextView


                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="15家银行转账操作指南" />

                            <TextView

                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="资讯"
                                android:textColor="#00A2AC" />
                        </LinearLayout>

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@mipmap/b1" />

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="120dp"
                        android:layout_marginLeft="20dp"
                        android:layout_marginRight="20dp"
                        android:gravity="center_horizontal"
                        android:orientation="horizontal">

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:layout_weight="4"
                            android:gravity="center_vertical"
                            android:orientation="vertical">

                            <TextView


                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="Ta行app转账攻略" />

                            <TextView


                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="15家银行转账操作指南" />

                            <TextView

                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="资讯"
                                android:textColor="#00A2AC" />
                        </LinearLayout>

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@mipmap/b1" />

                    </LinearLayout>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1" />
                </LinearLayout>
            </ScrollView>

        </FrameLayout>


        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="gone"></TabWidget>

        <RadioGroup
            android:id="@+id/group"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="#f3f3f3"
            android:gravity="center"
            android:orientation="horizontal">

            <RadioButton
                android:id="@+id/radio_one"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:drawableTop="@mipmap/agt"
                android:gravity="center"
                android:paddingTop="20px"
                android:text="叮咚" />

            <RadioButton
                android:id="@+id/radio_two"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:drawableTop="@mipmap/a1"
                android:paddingTop="20px" />

            <RadioButton
                android:id="@+id/radio_three"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:drawableTop="@mipmap/a1"
                android:paddingTop="20px" />

        </RadioGroup>

    </LinearLayout>


</TabHost>

 

 

java代码

package com.contentprovide.liuliu.relayout;

import android.content.Intent;
import android.support.annotation.IdRes;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TabHost;

public class MainActivity extends AppCompatActivity {
    TabHost Mytab;
    RadioButton radio_one, radio_two, radio_three;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        radio_one = (RadioButton) findViewById(R.id.radio_one);
        radio_two = (RadioButton) findViewById(R.id.radio_two);
        radio_three = (RadioButton) findViewById(R.id.radio_three);


        Mytab = (TabHost) findViewById(R.id.Mytab);
        Mytab.setup();
        Mytab.addTab(Mytab.newTabSpec("one").setIndicator("").setContent(R.id.one));
        Mytab.addTab(Mytab.newTabSpec("two").setIndicator("").setContent(R.id.two));
        Mytab.addTab(Mytab.newTabSpec("three").setIndicator("").setContent(R.id.three));

//给每个RadioButton都添加点击事件，每个按钮就相当于选项卡
        radio_one.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Mytab.setCurrentTab(2);
                radio_one.setCompoundDrawablesRelativeWithIntrinsicBounds(0, R.mipmap.ai7, 0, 0);//设置点击时的图标


            }
        });

        radio_two.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Mytab.setCurrentTab(1);
                radio_one.setCompoundDrawablesRelativeWithIntrinsicBounds(0, R.mipmap.agt, 0, 0);//

            }
        });

        radio_three.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Mytab.setCurrentTab(0);

            }
        });

    }
}

 

 

 

 

 

如果觉得我这篇记录得不是很清晰需要拓展TabHost样式的也可以看看http://www.cnblogs.com/lichenwei/p/3975095.html，我之前看过的一篇博客，内容写得挺详细的

 

来源：https://www.cnblogs.com/lyd447113735/p/8203232.html