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，我之前看过的一篇博客，内容写得挺详细的