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();    }