常用创建TabHost导航的几种方式

2016-06-19 01:04 阅读 7,282 次 评论 2 条

一、摘要

每个APP基本都有TabHost控件导航效果，从大公司的APP到小公司的APP，可以说Tab选项卡是APP的基础版块，比如常见的新浪、QQ、微信、网易、搜狐、人人等等，实现的Tab效果一种是可以滑动切换，一种是点击切换，同时实现选项卡的方式主要有以下几种（针对个人使用情况）：

二、继承TabActivity

新的应用程序推荐使用Fragment代替TabActivity，TabActivity可以继续使用在旧版本的设备中，它的使用方式，第一步：设置布局文件，使用TabHost控件，第二步：继承TabActivity，仿QQ底部导航效果：

布局文件固定的写法：

  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" >  
  6.   
  7.     <LinearLayout  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="match_parent"  
  10.         android:orientation="vertical" >  
  11.   
  12.         <FrameLayout  
  13.             android:id="@android:id/tabcontent"  
  14.             android:layout_width="match_parent"  
  15.             android:layout_height="match_parent" />  
  16.   
  17.         <TabWidget  
  18.             android:id="@android:id/tabs"  
  19.             android:layout_width="match_parent"  
  20.             android:layout_height="wrap_content"  
  21.             android:layout_alignParentBottom="true">  
  22.         </TabWidget>  
  23.     </LinearLayout>  
  24.   
  25. </TabHost>  

继续TabActivity，初始化控件，为TabHost对象配置选项卡内容

  1. /** 
  2.  * 添加选项卡 
  3.  */  
  4. private void initView(){  
  5.         mTabHost= (TabHost) findViewById(android.R.id.tabhost);  
  6.         mTabHost.setFocusable(true);//设置当前对象是否获取焦点  
  7.     mTabHost.setup();//使用findViewById()，在添加选项卡前，调用该方法  
  8.         mTabHost.addTab(mTabHost.newTabSpec("tab1").setIndicator("消息").setContent(new Intent(this,cn.teachcourse.MessageActivity.class)));  
  9.         mTabHost.addTab(mTabHost.newTabSpec("tab2").setIndicator("联系人").setContent(new Intent(this,cn.teachcourse.ContactsActivity.class)));  
  10.         mTabHost.addTab(mTabHost.newTabSpec("tab3").setIndicator("动态").setContent(new Intent(this,cn.teachcourse.DynamicActivity.class)));  
  11. }  

TabHost方法使用说明：

setup()——>使用findViewById()方法获得TabHost对象，需要在addTab()方法前调用setup()方法

newTabSpec(String tag)——>创建TabHost.TabSpec对象，调用newTabSpec(String)，tag标签区别不同的选项卡，通常不要重复就行

更多TabHost方法

addTab(TabHost.TabSpec tabSpec)——>添加一个选项卡

clearAllTabs()——>从TabWidget控件中删除与TabHost相关的选项卡

dispatchkeyEvent(KeyEvent event)——>获取焦点调度事件切换下一个视图

dispatchWindowFocusChanged(boolean hasFocus)——>window窗体包含当前视图，获得或失去焦点回调

getAccessibilityClassName()——>返回当前对象可访问的类名称

getCurrentTab()——>获得当前tab

getCurrentTabTag()——>获得当前tab的tag标签

getCurrentTabView()——>获得当前tab的View对象

getCurrentView()——>获得当前tab

getTabContentView()——>返回FrameLayout持有的tabcontent

getTabWidget()——>返回TabWidget对象

onTouchModeChanged(boolean isInTouchMode)——>回调方法，在touch mode改变时调用

setCurrentTab(int index)

setCurrentTabByTag(String tag)

setOnTabChangedListener(TabHost.OnTabChangeListener l)——>注册回调方法，在选项卡选择状态发生改变时调用

setup(LocalActivityManager activityGroup)——>调用setContent(Intent)，必须调用该方法加载本地activity

TabHost.TabSpec方法使用说明：

setIndicator(CharSequence label)——>设置选项卡显示的文字信息，如上面的QQ选项卡的“消息”、“联系人”、“动态”

setContent(Intent intent)——>设置选项卡切换显示的Activity

更多TabHost.TabSpec方法

getTag()

setContent(int viewId)——>指定viewId，被用为tab content

setContent(TabHost.TabContentFactory contentFactory)——>指定TabHost.TabContentFactory创建tab content

setIndicator(View view)——>指定view，作为tab导航

setIndicator(CharSequence label,Drawable icon)——>指定标签、图标，作为tab导航

通常APP的导航的效果，上面显示图片，下面显示文字，可以使用setIndicator(View)加载自定义布局，当然也可以使用setIndicator(CharSequence,Drawable)直接指定文字和图标

三、继承FragmentActivity

使用FragmentTabHost代替TabHost，创建的activity需要继承FragmentActivity，相比TabHost布局文件，FragmentTabHost多一个FrameLayout控件，设置实际的内容，布局代码：

  1. <android.support.v4.app.FragmentTabHost  
  2.     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">  
  6.   
  7.     <LinearLayout  
  8.         android:orientation="vertical"  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="match_parent">  
  11.   
  12.         <TabWidget  
  13.             android:id="@android:id/tabs"  
  14.             android:orientation="horizontal"  
  15.             android:layout_width="match_parent"  
  16.             android:layout_height="wrap_content"  
  17.             android:layout_weight="0"/>  
  18.   
  19.         <FrameLayout  
  20.             android:id="@android:id/tabcontent"  
  21.             android:layout_width="0dp"  
  22.             android:layout_height="0dp"  
  23.             android:layout_weight="0"/>  
  24.   
  25.         <FrameLayout  
  26.             android:id="@+id/realtabcontent"  
  27.             android:layout_width="match_parent"  
  28.             android:layout_height="0dp"  
  29.             android:layout_weight="1"/>  
  30.   
  31.     </LinearLayout>  
  32. </android.support.v4.app.FragmentTabHost>  

继承FragmentActivity中添加初始化控件代码，配置tab导航数据，相比TabActivity，使用Fragment代替Activity，代码如下：

  1. /** 
  2.  * 添加选项卡 
  3.  */  
  4. private void initView(){  
  5.         mTabHost = (FragmentTabHost)findViewById(android.R.id.tabhost);  
  6.         mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);//初始化层次结构时，必须设置setup()方法  
  7.         mTabHost.addTab(mTabHost.newTabSpec("tab1").setIndicator("消息"),MessageFragment.class, null);  
  8.         mTabHost.addTab(mTabHost.newTabSpec("tab2").setIndicator("联系人"),ContactsFragment.class, null);  
  9.         mTabHost.addTab(mTabHost.newTabSpec("tab3").setIndicator("动态"),DynamicFragment.class, null);    
  10. }  

需要注意一点，FragmentTabHost继承了TabHost，具备父类的属性和方法，同时重写父类方法或添加自身特有的方法，比如：addTab(TabHost.TabSpec tabSpec,Class clss,Bundle args)，方便使用。

四、RadioButton+RadioGroup完美搭配

之前写过一篇文章《如何使用RadioGroup和RadioButton实现FragmentTabHost导航效果？》，简单介绍怎么去掉RadioButton默认属性，添加图标，设置选择时切换不同Activity或Fragment效果，最终的目的实现类似上文介绍的TabActivity、FragmentActivity实现的选项卡功能，似乎相比较，RadioButton+RadioGroup更加完美。

五、PagerSlidingTabStrip+ViewPager框架

在以前的文章里面有演示过PagerSlidingTabStrip+ViewPager实现新闻APP效果，PagerSlidingTabStrip一个封装好的控件，类似于TabWidget，使用的时候将PagerSlidingTabStrip作为自定义View复制当前项目中（包括各种属性），按照自定义View使用的方法在布局文件中引入PagerSlidingTabStrip和ViewPager，打造常见新闻APP导航效果。

关于PagerSlidingTabStrip

查看PagerSlidingTabStrip源码，知道PagerSlidingTabStrip继承HorizontalScrollView，重写HorizontalScrollView对应的方法，同时添加setViewPager(ViewPager vp)关联ViewPager，终点熟悉PagerSlidingTabStrip声明的属性：

  1. <declare-styleable name="PagerSlidingTabStrip">  
  2.         <attr name="pstsIndicatorColor" format="color" />  
  3.         <attr name="pstsUnderlineColor" format="color" />  
  4.         <attr name="pstsDividerColor" format="color" />  
  5.         <attr name="pstsCheckedTextColor" format="reference" />  
  6.         <attr name="pstsUncheckedTextColor" format="reference" />  
  7.         <attr name="pstsIndicatorHeight" format="dimension" />  
  8.         <attr name="pstsUnderlineHeight" format="dimension" />  
  9.         <attr name="pstsDividerPadding" format="dimension" />  
  10.         <attr name="pstsTabPaddingLeftRight" format="dimension" />  
  11.         <attr name="pstsScrollOffset" format="dimension" />  
  12.         <attr name="pstsTabBackground" format="reference" />  
  13.         <attr name="pstsShouldExpand" format="boolean" />  
  14.         <attr name="pstsTextAllCaps" format="boolean" />  
  15. </declare-styleable>  

上面的属性按理可以在布局文件中设置或代码设置都是可以的，怎么在自定义控件中引用自定义属性，可以参考《xml命名空间如何为自定义View取名？》按照上述字面上的英语意思比较好理解:

app:sptsIndicatorColor=""设置选项卡颜色

app:pstsUnderlineColor=""设置选项卡下划线颜色

app:pstsDividerColor=""设置选项卡之间间隔的颜色

app:pstsCheckedTextColor=""设置选项卡选中的颜色，可以参考默认颜色

app:pstsUncheckedTextColor=""设置选项卡默认的颜色，可以参考默认颜色

app:pstsIndicatorHeight=""设置选项卡的高度

app:pstsUnderlineHeight=""设置选项卡下划线的高度

app:pstsDividerPadding=""设置选项卡之间的内边距离

app:pstsTabPaddingLeftRight=""设置当前屏幕导航与左右边缘的之间距离

app:pstsScrollOffset=""设置选项卡滚动的偏移大小

app:pstsTabBackground=""设置导航背景颜色，可以参考默认颜色

app:pstsShouldExpand=""设置是否可以伸展，默认true，即导航可以左右滑动

app:pstsTextAllCaps=""设置导航文本是否大写，默认true

PagerSlidingTabStrip+ViewPager打造神奇导航

  1. <cn.teachcourse.viewpager.PagerSlidingTabStrip  
  2.         android:id="@+id/translate_pagertabstrip"  
  3.         xmlns:app="scheme.android.com/apk/res/cn.teachcourse.demoapp"  
  4.         android:layout_width="match_parent"  
  5.         android:layout_height="@dimen/dp_040"  
  6.         app:pstsIndicatorColor="@color/color_Pink"  
  7.         app:pstsUnderlineColor="@color/color_Crimson"  
  8.         app:pstsDividerColor="@color/color_LightGrey"  
  9.         app:pstsCheckedTextColor="@color/color_Crimson"  
  10.         app:pstsUncheckedTextColor="@color/color_DimGray"  
  11.         app:pstsIndicatorHeight="@dimen/dp_004"  
  12.         app:pstsUnderlineHeight="@dimen/dp_001"  
  13.         app:pstsShouldExpand="false"  
  14.         app:pstsTextAllCaps="true"  
  15.         android:layout_alignParentTop="true"/>  
  16. <android.support.v4.view.ViewPager  
  17.         android:layout_below="@+id/translate_pagertabstrip"  
  18.         android:id="@+id/translate_viewpager"  
  19.         android:layout_width="match_parent"  
  20.         android:layout_height="match_parent"/>  

在Activity中初始化布局，然后设置ViewPager适配器，添加PagerSlidingTabStrip和ViewPager之间的关联即可

  1. ViewPagerAdapter mAdapater=new ViewPagerAdapter(getSupportFragmentManager());  
  2.         mViewPager.setAdapter(mAdapater);  
  3.         mTabs.setViewPager(mViewPager);  
  4.         DisplayMetrics dm = getResources().getDisplayMetrics();  
  5.         mTabs.setTextSize((int) TypedValue.applyDimension(  
  6.                 TypedValue.COMPLEX_UNIT_SP, 16, dm));  

接下来的一篇文章会介绍Tab之间切换添加一些颜色渐变或动画效果，类似微信选项卡切换颜色渐变或类似新闻新闻下划线由短变长的动画效果。
tabhost-demo

你可能感兴趣的文章

来源：TeachCourse， 每周一次，深入学习Android教程，关注（QQ158#9359$239或公众号TeachCourse）
转载请注明出处： https://www.teachcourse.cn/1825.html ，谢谢支持！

资源分享

分类：Android, Android基础 标签：, ,
MediaRecorder实现微信、QQ、人人、易信等语音录制功能工具:MediaUtilAPI MediaRecorder实现微信、QQ、
调试最快的Android模拟器-Genymotion常见问题 调试最快的Android模拟器-Geny
Eclipse卸载已安装的Genymotion插件 Eclipse卸载已安装的Genymotio
浅谈final关键字 浅谈final关键字