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