大多数应用程序都会在底部使用3~5个Tab对应用程序的主要功能进行划分,对于一些信息量非常大的应用程序,还需要在每个Tab下继续划分子Tab对信息进行分类显示.

本文实现采用FragmentTabHost+TabLayout+ViewPager实现双层嵌套Tab,实现原理如下:

第一层Tab:FragmentTabHost + Fragment;

第二层Tab:在第一层的Fragment中使用TabLayout和ViewPager实现.

第一层Tab实现:

1.布局文件activity_main.xml如下:

 <?xml version="1.0" encoding="utf-8"?>

 <android.support.v4.app.FragmentTabHost android:id="@android:id/tabhost"

     xmlns:android="http://schemas.android.com/apk/res/android"

     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="0dp"

             android:layout_weight="1"/>

         <TabWidget

             android:id="@android:id/tabs"

             android:layout_width="match_parent"

             android:layout_height="?attr/actionBarSize"

             android:layout_gravity="bottom"/>

     </LinearLayout>

 </android.support.v4.app.FragmentTabHost>

说明：其中FrameLayout用于显示内容，TabWidget用于显示标签。

2.底部Tab布局：view_tab_indicator.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical" android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:gravity="center">

    <ImageView

        android:id="@+id/tab_iv_image"

        android:layout_width="26dp"

        android:layout_height="26dp"

        android:contentDescription="@null"/>

    <TextView

        android:id="@+id/tab_tv_text"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="1dp"

        android:textColor="#ff847d7b"

        android:textSize="12sp"/>

</LinearLayout>

底部Tab由一张图片和tab名称组成。

3.在mainActivity.java中定义一个内部类TabItem，用于表示底部tab：

     class TabItem {

         //正常情况下显示的图片

         private int imageNormal;

         //选中情况下显示的图片

         private int imagePress;

         //tab的名字

         private int title;

         private String titleString;

         //tab对应的fragment

         public Class<? extends Fragment> fragmentClass;

         public View view;

         public ImageView imageView;

         public TextView textView;

         public TabItem(int imageNormal, int imagePress, int title,Class<? extends Fragment> fragmentClass) {

             this.imageNormal = imageNormal;

             this.imagePress = imagePress;

             this.title = title;

             this.fragmentClass =fragmentClass;

         }

         public Class<? extends  Fragment> getFragmentClass() {

             return fragmentClass;

         }

         public int getImageNormal() {

             return imageNormal;

         }

         public int getImagePress() {

             return imagePress;

         }

         public int getTitle() {

             return  title;

         }

         public String getTitleString() {

             if (title == 0) {

                 return "";

             }

             if(TextUtils.isEmpty(titleString)) {

                 titleString = getString(title);

             }

             return titleString;

         }

         public View getView() {

             if(this.view == null) {

                 this.view = getLayoutInflater().inflate(R.layout.view_tab_indicator, null);

                 this.imageView = (ImageView) this.view.findViewById(R.id.tab_iv_image);

                 this.textView = (TextView) this.view.findViewById(R.id.tab_tv_text);

                 if(this.title == 0) {

                     this.textView.setVisibility(View.GONE);

                 } else {

                     this.textView.setVisibility(View.VISIBLE);

                     this.textView.setText(getTitleString());

                 }

                 this.imageView.setImageResource(imageNormal);

             }

             return this.view;

         }

         //切换tab的方法

         public void setChecked(boolean isChecked) {

             if(imageView != null) {

                 if(isChecked) {

                     imageView.setImageResource(imagePress);

                 }else {

                     imageView.setImageResource(imageNormal);

                 }

             }

             if(textView != null && title != 0) {

                 if(isChecked) {

                     textView.setTextColor(getResources().getColor(R.color.main_botton_text_select));

                 } else {

                     textView.setTextColor(getResources().getColor(R.color.main_bottom_text_normal));

                 }

             }

         }

     }

4.初始化Tab数据：

     //初始化Tab数据

     private void initTabData() {

         mTableItemList = new ArrayList<>();

         //添加tab

         mTableItemList.add(new TabItem(R.drawable.main_bottom_home_normal,R.drawable.main_bottom_home_press,R.string.main_home_text, TestFragment1.class));

         mTableItemList.add(new TabItem(R.drawable.main_bottom_attention_normal,R.drawable.main_bottom_attention_press,R.string.main_attention_text, TestFragment2.class));

         mTableItemList.add(new TabItem(R.drawable.main_bottom_mine_normal,R.drawable.main_bottom_mine_press,R.string.main_mine_text, TestFragment3.class));

     }

5.初始化选项卡视图：

 //初始化主页选项卡视图

     private void initTabHost() {

         //实例化FragmentTabHost对象

         FragmentTabHost fragmentTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);

         fragmentTabHost.setup(this,getSupportFragmentManager(),android.R.id.tabcontent);

         //去掉分割线

         fragmentTabHost.getTabWidget().setDividerDrawable(null);

         for (int i = 0; i<mTableItemList.size(); i++) {

             TabItem tabItem = mTableItemList.get(i);

             //实例化一个TabSpec,设置tab的名称和视图

             TabHost.TabSpec tabSpec = fragmentTabHost.newTabSpec(tabItem.getTitleString()).setIndicator(tabItem.getView());

             fragmentTabHost.addTab(tabSpec,tabItem.getFragmentClass(),null);

             //给Tab按钮设置背景

             fragmentTabHost.getTabWidget().getChildAt(i).setBackgroundColor(getResources().getColor(R.color.main_bottom_bg));

             //默认选中第一个tab

             if(i == 0) {

                 tabItem.setChecked(true);

             }

         }

         fragmentTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {

             @Override

             public void onTabChanged(String tabId) {

                 //重置Tab样式

                 for (int i = 0; i< mTableItemList.size(); i++) {

                     TabItem tabitem = mTableItemList.get(i);

                     if (tabId.equals(tabitem.getTitleString())) {

                         tabitem.setChecked(true);

                     }else {

                         tabitem.setChecked(false);

                     }

                 }

             }

         });

     }

6.在oncreate()中调用以上两个方法:

     @Override

     protected void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.activity_main);

         initTabData();

         initTabHost();

     }

至此，第一层tab实现完成，效果如下图所示：

第二层Tab实现：

第二层的tab基于第一层中的Fragment实现,本文使用了TabLayout和ViewPager。

注意：在使用TabLayout之前需要添加依赖包，例如在build.gradle中添加compile 'com.android.support:design:23.3.0'。

1.第二层tab的布局文件：

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

     xmlns:app="http://schemas.android.com/apk/res-auto"

     android:layout_width="match_parent"

     android:layout_height="match_parent"

     android:clickable="true"

     android:orientation="vertical">

     <android.support.design.widget.TabLayout

         android:id="@+id/tab_essence"

         android:layout_width="match_parent"

         android:layout_height="40dp"

         android:background="@color/essence_tab_bg"

         app:tabMode="scrollable"

         app:tabSelectedTextColor="@color/essence_tab_text_color_press"

         app:tabTextColor="@color/essence_tab_text_color_normal"

         app:tabIndicatorColor="@color/essence_tab_text_color_press"/>

     <android.support.v4.view.ViewPager

         android:id="@+id/vp_essence"

         android:layout_width="match_parent"

         android:layout_height="match_parent"

         app:layout_behavior="@string/appbar_scrolling_view_behavior" />

 </LinearLayout>

其中TabLayout用于显示子tab，VierPager用于显示子tab对应的内容。

2.在strings.xml中配置标签数据：

     <array name="home_video_tab">

         <item>全部@dream@0</item>

         <item>视频@dream@1</item>

         <item>声音@dream@2</item>

         <item>图片@dream@3</item>

         <item>段子@dream@4</item>

         <item>广告@dream@5</item>

         <item>剧情@dream@6</item>

     </array>

3.定义显示在ViewPager中的Fragment：

 public class ContentFragment extends Fragment {

     private View viewContent;

     private int mType = 0;

     private String mTitle;

     public void setType(int mType) {

         this.mType = mType;

     }

     public void setTitle(String mTitle) {

         this.mTitle = mTitle;

     }

     @Nullable

     @Override

     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

         //布局文件中只有一个居中的TextView

         viewContent = inflater.inflate(R.layout.fragment_content,container,false);

         TextView textView = (TextView) viewContent.findViewById(R.id.tv_content);

         textView.setText(this.mTitle);

         return viewContent;

     }

 }

4.定义ViewPager的adapter：

 //继承FragmentStatePagerAdapter

 public class TestFragmentAdapter extends FragmentStatePagerAdapter {

     public static final String TAB_TAG = "@dream@";

     private List<String> mTitles;

     public TestFragmentAdapter(FragmentManager fm, List<String> titles) {

         super(fm);

         mTitles = titles;

     }

     @Override

     public android.support.v4.app.Fragment getItem(int position) {

         //初始化Fragment数据

         ContentFragment fragment = new ContentFragment();

         String[] title = mTitles.get(position).split(TAB_TAG);

         fragment.setType(Integer.parseInt(title[1]));

         fragment.setTitle(title[0]);

         return fragment;

     }

     @Override

     public int getCount() {

         return mTitles.size();

     }

     @Override

     public CharSequence getPageTitle(int position) {

         return mTitles.get(position).split(TAB_TAG)[0];

     }

 }

5.Fragment具体实现：

 public class TestFragment1 extends android.support.v4.app.Fragment{

     private View viewContent;

     private TabLayout tab_essence;

     private ViewPager vp_essence;

     @Nullable

     @Override

     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

         viewContent = inflater.inflate(R.layout.fragment_test_1,container,false);

         initConentView(viewContent);

         initData();

         return viewContent;

     }

     public void initConentView(View viewContent) {

         this.tab_essence = (TabLayout) viewContent.findViewById(R.id.tab_essence);

         this.vp_essence = (ViewPager) viewContent.findViewById(R.id.vp_essence);

     }

     public void initData() {

         //获取标签数据

         String[] titles = getResources().getStringArray(R.array.home_video_tab);

         //创建一个viewpager的adapter

         TestFragmentAdapter adapter = new TestFragmentAdapter(getFragmentManager(), Arrays.asList(titles));

         this.vp_essence.setAdapter(adapter);

         //将TabLayout和ViewPager关联起来

         this.tab_essence.setupWithViewPager(this.vp_essence);

     }

 }

至此，第二层tab实现完成，效果如下：

总结：

1.本文实现的双层嵌套Tab使用到了FragmentTabHost，Fragment，ViewPager和TabLayout.

2.内外层的实现是解耦的，外层实现使用的是FragmentTabHost+Fragment，内层的实现是对外层Fragment的扩展，实现方式是使用TabLayout+VierPager。

最新文章

  1. web app开发利器 - iscroll4 解决方案
  2. [翻译]Understanding Weak References(理解弱引用)
  3. Android 代理服务器为全网提供代理
  4. jQuery插件开发模式
  5. viPlugin安装破解
  6. PHP 读取/导出 CSV文件
  7. MediaPlayer本地播放流程解析（一）
  8. log(n)在第一时间，以确定该阵列i小号码
  9. Python爬虫小白入门（六）爬取披头士乐队历年专辑封面-网易云音乐
  10. 关于DCL的使用
  11. HDFS概述（1）————HDFS架构
  12. AutoMapper在asp.netcore中的使用
  13. Topcoder口胡记 SRM 562 Div 1 ~ SRM 599 Div 1
  14. 家庭记账本小程序之java代码部分（java web基础版二）
  15. Transparent PageRoute in Flutter for displaying a (semi-) transparent page
  16. echarts Cannot read property &#39;getAttribute&#39; of null 问题的解决方法
  17. mui之上拉刷新和mui-content结合解决ios上拉不回弹的bug
  18. topcoder srm 485 div1
  19. round()和trunc()用法
  20. vsphere性能

热门文章

  1. 趣味GPS
  2. ViewPager+RadioGroup实现标题栏切换,Fragment切换
  3. ES6 - Note5：Promise
  4. mysql default unix_timestamp(now())
  5. 【iOS】NSNumberFormatter
  6. js 获取当前的时间
  7. （八）WebGIS中栅格图层的设计
  8. Java中的反射和注解
  9. html5 canvas 画图表
  10. C++ 面试 （1） 指针