TabLayout 与 FragmentTabHost

TabLayout 与 FragmentTabHost

Android提供实现Tab样式的控件大致有TabActivity、FragmentTabHost、TabLayout。而TabActivity已经过时，这里就不在多说，主要提 一下Tablayout与FragmentTabHost这两个

FragmentTabHost针对Fragment管理来进行界面切换，FragmentTabHost本身提供FragmentManager来管理Fragment。
TabLayout则倾向与ViewPager配合使用，可以支持手势来切换界面。也可以模仿FragmentTabHost利用Fragment来管理界面切换

FragmentTabHost：
 布局代码：

<!--TabHost布局-->
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
     >
     <!--Toolbar-->
     <include
         android:id="@+id/title_bar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         layout="@layout/toolbar_view"
         />
     <!--Fragment 容器-->
     <FrameLayout
         android:id="@+id/main_tab_host_context"
         android:layout_width="match_parent"
         android:layout_height="0dp"
         android:layout_weight="1.0"/>
     <!--Tab与Fragment分割线-->
     <View
         android:layout_width="match_parent"
         android:layout_height="2px"
         android:background="@color/divider_line_color"
         />
     <!--Tab布局-->
     <android.support.v4.app.FragmentTabHost
         android:layout_marginTop="4dp"
         android:id="@+id/bottom_tab_host"
         android:layout_width="match_parent"
         android:layout_height="wrap_content" />
 </LinearLayout>

 <!--Indicator布局-->
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:gravity="center"
     android:orientation="vertical"
     >
     <ImageView
         android:id="@+id/indicator_icon"
         android:layout_width="@dimen/main_tab_width"
         android:layout_height="@dimen/main_tab_height"
         android:src="@mipmap/apple"
         android:layout_gravity="center"
         />
     <TextView
         android:id="@+id/indicator_text"
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:text="@string/Apple"
         android:textColor="@color/tab_text_default_color"
         android:layout_gravity="center"
         />
 </LinearLayout>

Java代码

//初始化Tab
 private void initTab() {
  //获取TabHost
        FragmentTabHost mFragmentTabHost = (FragmentTabHost) findViewById(R.id.bottom_tab_host);
        //该方法必须调用，用于初始化FragmentTabHost
        mFragmentTabHost.setup(TabActivity.this, getSupportFragmentManager(), R.id.main_tab_host_context);
        TabEnum[] tabEnums = TabEnum.values();
        for(TabEnum tabEnum : tabEnums) {
         //初始化Indicator
            View indicator = LayoutInflater.from(getApplicationContext()).inflate(R.layout.indicator_tab, null);
            //设置显示文本
            TextView tv = (TextView) indicator.findViewById(R.id.indicator_text);
            tv.setText(getResources().getString(tabEnum.getName()));
            //设置显示图标
            ImageView iv = (ImageView) indicator.findViewById(R.id.indicator_icon);
            iv.setImageResource(tabEnum.getIcon());
            //创建Tab，并设置Indicator
            TabHost.TabSpec tabSpec= mFragmentTabHost.newTabSpec(getResources().getString(tabEnum.getName())).setIndicator(indicator);
            //添加Tab到TabHost
            mFragmentTabHost.addTab(tabSpec, tabEnum.getClz(), null);
        }
    }

TabLayout：
 布局代码：

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
     >

     <android.support.design.widget.TabLayout
         android:id="@+id/top_tab"
         android:layout_width="match_parent"
         android:layout_height="wrap_content" />

     <android.support.v4.view.ViewPager
         android:id="@+id/tab_viewpager"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />

 </LinearLayout>

Java代码： 

private void initToptab() {
  //创建TopLayout
        TabLayout tabLayout = (TabLayout) rootView.findViewById(R.id.top_tab);
        //创建ViewPager
        mViewPager = (ViewPager) rootView.findViewById(R.id.tab_viewpager);
        //创建PagerAdapter
        adapter = new TabViewPagerAdapter(getActivity());       
        mViewPager.setAdapter(adapter);
        //关键的语句，将ViewPager与TabLayout关联(Tab title在adapter中设置，Pager Title)
        tabLayout.setupWithViewPager(mViewPager);

        //使用自定义Tab
        int tabs = tabLayout.getTabCount();
        for(int i = 0; i < tabs; i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            View view = LayoutInflater.from(getActivity()).inflate(R.layout.indicator_tab, null, false);
            tab.setCustomView(view);

        }
       
    }

    PagerAdapter与直接使用ViewPager相同，重写getPagerTitle(int position) 方法，为Tab设置title
    @Override
    public CharSequence getPageTitle(int position) {
        return pagers[position].getName();
    }