TabLayout小結

TabLayout+Fragment 如果Fragment界面基本一致的話，就可以複用一個Fragment

基本代碼如下：

public void initView() {
        fm=getSupportFragmentManager(); //獲得fragment管理者  
        tabLayout = (TabLayout) findViewById(R.id.activity_tab_layout_tablayout);
        
        for (int i = 0; i < 6; i++) {
            tabLayout.addTab(tabLayout.newTab().setText("Tab"+i).setIcon(R.drawable.tab_icon_selector));
       }

        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
               showFragment(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

   //初始化Fragment集合
    public void initFragment(){
        fragmentList = new ArrayList<>();
        for (int i = 0; i < 6; i++) {
            fragmentList.add(HomeFragment.newInstance("這個第"+i+"個Fragment"));
        }
    }

    public void showFragment(int position){
        Fragment fragment=fragmentList.get(position);
        FragmentTransaction ft=fm.beginTransaction();
        if(currentShowFragment!=null){//定義一個全局變量Fragment currentShowFragment
            ft.hide(currentShowFragment);
        }
        if(!fragment.isAdded()){
            ft.add(R.id.activity_tab_layout_framelayout,fragment);
        }else{
            ft.show(fragment);
        }
        currentShowFragment=fragment;
        ft.commit();
    }

如果我們想要tablayout跟隨着頁面的滑動而滑動，就要用另一種組合：TabLayout+ViewPager+Fragment

先看效果：

public void initView() {
        String titles[] = {"Tab1", "Tab2","Tab3", "Tab4","Tab5", "Tab6"};
        int images[] = {R.drawable.tab_icon_selector, R.drawable.tab_icon_selector,
                R.drawable.tab_icon_selector, R.drawable.tab_icon_selector,
                R.drawable.tab_icon_selector, R.drawable.tab_icon_selector};

        tabLayout = (TabLayout) findViewById(R.id.activity_tab_layout_tablayout);
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
               
                }
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
        List<Fragment> fragments = new ArrayList<>();
        fragments.add(new CartFragment());
        fragments.add(new MineFragment());
        fragments.add(new CartFragment());
        fragments.add(new MineFragment());
        fragments.add(new CartFragment());
        fragments.add(new MineFragment());
        TabViewPagerAdapter adapter=new TabViewPagerAdapter(this,getSupportFragmentManager(),fragments,titles,images);
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
}

注意，當和viewpager一起使用的時候

tabLayout.addTab()可以不寫

這裏Fragment的集合會傳到適配器中

public class TabViewPagerAdapter extends FragmentPagerAdapter {


    private Context context;
    private List<Fragment> fragmentList;
    private FragmentManager fragmentManager;
    private String titles[];
    private int images[];


    public TabViewPagerAdapter(Context mContext,FragmentManager fm, List<Fragment> fragmentList, String titles[], int images[]) {
        super(fm);
        this.context=mContext;
        this.fragmentList=fragmentList;
        this.fragmentManager=fm;
        this.titles=titles;
        this.images=images;
    }

    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

    @Override
    public int getCount() {
        return fragmentList.size();
    }

    //這個方法必須重寫一下，否則會出現tab的標題空白的情況
    @Override
    public CharSequence getPageTitle(int position) { 
        return titles[position];
    }
}

當運行出效果的時候我們發現圖片並沒有出來，並且字母全部成了大寫

此時，給tablayout加一個屬性

app:tabTextAppearance="@style/CustomTabTextAppearanceStyle"

<style name="CustomTabTextAppearanceStyle" parent="TextAppearance.Design.Tab">
        <item name="textAllCaps">false</item>
        <item name="android:textSize">28sp</item>
</style>

大寫的問題就解決了，但圖片問題還沒解決，這個需要在tablayout和viewpager關聯之後在進行設置

for (int i = 0; i < titles.length; i++) {
            //進行圖片設置，也可以設置文字、顏色等等
            tabLayout.getTabAt(i).setIcon(images[i]);
         //如果設置了text，則適配器中的getePageTitle()也可以不寫
          tabLayout.getTabAt(i).setText(titles[i]);
}

圖片的問題也解決了，但圖片只能顯示在文字上方，如果我們想要把圖片顯示在文字的左邊、下邊就又有問題了，此時我們可以給tab設置自定義view，就是tablayout.setCustomView(View view);裏面這個view使我們自己寫的一個佈局，裏面就可以隨意實現了。像這種，圖片在文字右邊

for (int i = 0; i < titles.length; i++) {
            tabLayout.addTab(tabLayout.newTab().setCustomView(setTabIcon(titles[i], images[i])));
}

//Tablayout自定義view綁定ViewPager 自定義view時使用 tabLayout.setupWithViewPager(viewPager)方法關聯無效，通過以下方法進行viewpager和tablayout的關聯
  viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
  tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));
        

但是這種綁定方式有一個問題，就是tablayout的這兩個屬性不會起作用

app:tabSelectedTextColor="@color/colorPrimary"
app:tabTextColor="@color/colorDatePress"

因爲設置的是customView,所以文字的選中顏色需要我們寫在佈局文件中,用selector選擇器

基本內容就是這些了，給自己做個總結省下一次的又忘了還得百度，希望對大家有幫助。