注册 登录
> Android

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

系统 2183 0

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. <? xml version = "1.0" encoding = "utf-8" ?>
  2. < TabHost xmlns: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" >
  7. < LinearLayout
  8. android:layout_width = "fill_parent"
  9. android:layout_height = "fill_parent"
  10. android:orientation = "vertical" >
  12. < TabWidget
  13. android:id = "@android:id/tabs"
  14. android:layout_width = "fill_parent"
  15. android:layout_height = "wrap_content"
  16. android:orientation = "horizontal" />
  18. < FrameLayout
  19. android:id = "@android:id/tabcontent"
  20. android:layout_width = "fill_parent"
  21. android:layout_height = "fill_parent"
  22. android:layout_weight = "1" >
  24. < LinearLayout
  25. android:id = "@+id/alwayswet"
  26. android:layout_width = "fill_parent"
  27. android:layout_height = "fill_parent"
  28. android:orientation = "vertical" >
  29. < ImageView
  30. android:scaleType = "fitXY"
  31. android:layout_height = "fill_parent"
  32. android:layout_width = "fill_parent"
  33. android:src = "@drawable/alwayswet" />
  34. </ LinearLayout >
  36. < LinearLayout
  37. android:id = "@+id/isanimal"
  38. android:layout_width = "fill_parent"
  39. android:layout_height = "fill_parent"
  40. android:orientation = "vertical" >
  41. < ImageView
  42. android:scaleType = "fitXY"
  43. android:layout_height = "fill_parent"
  44. android:layout_width = "fill_parent"
  45. android:src = "@drawable/isanimal" />
  46. </ LinearLayout >
  48. < LinearLayout
  49. android:id = "@+id/nezha"
  50. android:layout_width = "fill_parent"
  51. android:layout_height = "fill_parent"
  52. android:orientation = "vertical" >
  53. < ImageView
  54. android:scaleType = "fitXY"
  55. android:layout_height = "fill_parent"
  56. android:layout_width = "fill_parent"
  57. android:src = "@drawable/nazha" />
  58. </ LinearLayout >
  60. </ FrameLayout >
  62. </ LinearLayout >
  64. </ TabHost >


Activity主界面代码 :


[java] view plain copy 在CODE上查看代码片
  1. package shuliang.han.tabhost_test;
  3. import android.app.TabActivity;
  4. import android.os.Bundle;
  5. import android.widget.TabHost;
  6. import android.widget.TabHost.TabSpec;
  8. public class MainActivity extends TabActivity{
  10. @Override
  11. protected void onCreate(BundlesavedInstanceState){
  12. super .onCreate(savedInstanceState);
  13. setContentView(R.layout.tabhost);
  15. TabHosttabHost=getTabHost();
  17. TabSpecpage1=tabHost.newTabSpec( "tab1" )
  18. .setIndicator( "叫兽" )
  19. .setContent(R.id.isanimal);
  20. tabHost.addTab(page1);
  22. TabSpecpage2=tabHost.newTabSpec( "tab2" )
  23. .setIndicator( "老湿" )
  24. .setContent(R.id.alwayswet);
  25. tabHost.addTab(page2);
  27. TabSpecpage3=tabHost.newTabSpec( "tab3" )
  28. .setIndicator( "哪吒" )
  29. .setContent(R.id.nezha);
  30. tabHost.addTab(page3);
  31. }
  33. }
转自：http://blog.csdn.net/shulianghan/article/details/18233209
感谢分享！

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


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧，站长会非常 感谢您的哦！！！

发表我的评论
最新评论 总共0条评论