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

TabHost效果图:


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布局文件中, 可以使用<TabHost> 标签设置, 其中的id 需要引用 android的自带id :android:id="@android:id/tabhost" ;

getHost()获取前提: 设置了该id之后, 在Activity界面可以使用 getHost(), 获取这个TabHost 视图对象;

示例 :

[html] view plain copy 在CODE上查看代码片
  1. <TabHost
  2. android:id="@android:id/tabhost"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent">


2. TabWidget组件


选项卡切换: 该组件是选项卡切换按钮, 通过点击该组件可以切换选项卡;

设置android自带id: 这个组件的id要设置成android的自带id :android:id="@android:id/tabs" ;

TabHost必备组件: 该组件与FrameLayout组件是TabHost组件中必备的两个组件;

切换按钮下方显示: 如果想要将按钮放到下面, 可以将该组件定义在下面, 但是注意,FrameLayout要设置android:layout_widget = "1";

设置TabWidget大小: 如果想要设置该按钮组件的大小, 可以设置该组件与FrameLayout组件的权重;

示例 :

[html] view plain copy 在CODE上查看代码片
  1. <TabWidget
  2. android:id="@android:id/tabs"
  3. android:layout_width="fill_parent"
  4. android:layout_height="wrap_content"
  5. android:orientation="horizontal"/>


3. FrameLayout组件


组件作用: 该组件中定义的子组件是TabHost中每个页面显示的选项卡, 可以将TabHost选项卡显示的视图定义在其中;

设置android自带id: 这个组件的id要设置成android的自带的id :android:id="@android:id/tabcontent" ;

示例 :

[html] view plain copy 在CODE上查看代码片
  1. <FrameLayout
  2. android:id="@android:id/tabcontent"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. android:layout_weight="1">

二. Activity方法


1. 获取TabHost


获取方法: getHost();

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


2. 创建选项卡


创建选项卡: 调用TabHost组件的newTabHost(tag), 其中的tag是字符串, 即在选项卡的唯一标识;

设置选项卡:

--设置按钮名称:setIndicator("叫兽");

--设置选项卡内容: setContent(), 可以设置视图组件, 可以设置Activity, 也可以设置Fragement;

添加选项卡: tabHost.add(spec), 传入的参数是创建选项卡的TabSpec对象;


三 代码


XML布局文件:


[html] view plain copy 在CODE上查看代码片
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <TabHostxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:id="@android:id/tabhost"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent">
  6. <LinearLayout
  7. android:layout_width="fill_parent"
  8. android:layout_height="fill_parent"
  9. android:orientation="vertical">
  10. <TabWidget
  11. android:id="@android:id/tabs"
  12. android:layout_width="fill_parent"
  13. android:layout_height="wrap_content"
  14. android:orientation="horizontal"/>
  15. <FrameLayout
  16. android:id="@android:id/tabcontent"
  17. android:layout_width="fill_parent"
  18. android:layout_height="fill_parent"
  19. android:layout_weight="1">
  20. <LinearLayout
  21. android:id="@+id/alwayswet"
  22. android:layout_width="fill_parent"
  23. android:layout_height="fill_parent"
  24. android:orientation="vertical">
  25. <ImageView
  26. android:scaleType="fitXY"
  27. android:layout_height="fill_parent"
  28. android:layout_width="fill_parent"
  29. android:src="@drawable/alwayswet"/>
  30. </LinearLayout>
  31. <LinearLayout
  32. android:id="@+id/isanimal"
  33. android:layout_width="fill_parent"
  34. android:layout_height="fill_parent"
  35. android:orientation="vertical">
  36. <ImageView
  37. android:scaleType="fitXY"
  38. android:layout_height="fill_parent"
  39. android:layout_width="fill_parent"
  40. android:src="@drawable/isanimal"/>
  41. </LinearLayout>
  42. <LinearLayout
  43. android:id="@+id/nezha"
  44. android:layout_width="fill_parent"
  45. android:layout_height="fill_parent"
  46. android:orientation="vertical">
  47. <ImageView
  48. android:scaleType="fitXY"
  49. android:layout_height="fill_parent"
  50. android:layout_width="fill_parent"
  51. android:src="@drawable/nazha"/>
  52. </LinearLayout>
  53. </FrameLayout>
  54. </LinearLayout>
  55. </TabHost>


Activity主界面代码:


[java] view plain copy 在CODE上查看代码片
  1. packageshuliang.han.tabhost_test;
  2. importandroid.app.TabActivity;
  3. importandroid.os.Bundle;
  4. importandroid.widget.TabHost;
  5. importandroid.widget.TabHost.TabSpec;
  6. publicclassMainActivityextendsTabActivity{
  7. @Override
  8. protectedvoidonCreate(BundlesavedInstanceState){
  9. super.onCreate(savedInstanceState);
  10. setContentView(R.layout.tabhost);
  11. TabHosttabHost=getTabHost();
  12. TabSpecpage1=tabHost.newTabSpec("tab1")
  13. .setIndicator("叫兽")
  14. .setContent(R.id.isanimal);
  15. tabHost.addTab(page1);
  16. TabSpecpage2=tabHost.newTabSpec("tab2")
  17. .setIndicator("老湿")
  18. .setContent(R.id.alwayswet);
  19. tabHost.addTab(page2);
  20. TabSpecpage3=tabHost.newTabSpec("tab3")
  21. .setIndicator("哪吒")
  22. .setContent(R.id.nezha);
  23. tabHost.addTab(page3);
  24. }
  25. }
转自:http://blog.csdn.net/shulianghan/article/details/18233209
感谢分享!

你可能感兴趣的:(android)