Android TabHost 实现Tab切换
Posted 西红柿里没有番茄
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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" /> </android里实现一个tabhost显示怎么弄？Android典型界面设计——FragmentTabHost+Fragment实现底部tab切换
Android零基础入门第70节：ViewPager轻松完成TabHost效果
Android 微信 底部tab 切换时是新的activity 还是 fragment
android中的tabHost怎样在点击一个选项卡后跳转到一个activity，点击另一个选项卡跳转到另一个activity?