安卓TabLayout詳解

XML布局：

<android.support.design.widget.TabLayout
        android:id="@+id/aftserop_tab"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tabIndicatorColor="@android:color/holo_orange_light"
        app:tabIndicatorHeight="2dp"
        app:tabSelectedTextColor="@android:color/holo_blue_light"
        app:tabTextAppearance="@style/TabTextSize"
        app:tabTextColor="@android:color/black" />
           

<com.google.android.material.tabs.TabLayout      

androidx的依賴包引入：com.google.android.material:material:1.0.0-rc01

app:tabIndicatorColor：标簽下面移動的橫線的顔色。

app:tabIndicatorHeight="0dp"    标簽下面移動的橫線的高度，如果不想要将它設定為0

app:tabTextColor：标簽文字的顔色

app:tabSelectedTextColor ：标簽被選中後的文字顔色

app:tabTextAppearance="@style/TabTextSize"  字型大小

預設的Tab字型大小有點小，看起來不太舒服，當我們去修改字型大小時卻發現，TabLayout居然沒有提供跟TextSize相關的屬性。

不過不用急，TabLayout其實提供了一個更靈活的屬性app:tabTextAppearance ，它可以修改字型的樣式，進而間接修改字型的大小。

我們在style.xml中自定義一個樣式，繼承于TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse ，

在屬性android:textSize中設定我們想要的字型大小，這裡我設為20sp。

<!--TabLayout的字型大小-->
<style name="TabTextSize" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
    <item name="android:textSize">20sp</item>
</style>
           

一種隻是普通添加tabLayout的文字：

//        tabLayout.addTab(tabLayout.newTab().setText("未審批"));
//        tabLayout.addTab(tabLayout.newTab().setText("已審批"));
           

第二種TabLayout+ViewPage建立關聯

public class AftSerOpActivity extends BaseActivity implements View.OnClickListener {
    private TabLayout tabLayout;
    private ViewPager vp;
    private List<Fragment> fragments = new ArrayList<>();
    private String[] tabs = {"未審批", "已審批"};
    public static String approval = "approval";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_aft_ser_op);
        baseapp.addActivity(this);
        initView();
        initTab();
    }

    private void initTab() {
        tabLayout.setTabMode(TabLayout.MODE_FIXED);


TabLayout.MODE_FIXED ：當Tab較少，且占滿整個螢幕時可以使用這種模式；
TabLayout.MODE_SCROLLABLE ：當Tab數量較多，螢幕寬度不夠時使用該模式，整個TabLayout是可以左右滑動的。
        /*如果tabLayout和viewpager綁定的,以下這種方式無法顯示title.
        這個原因是因為tablayout與viewpager建立關聯關系的時候，已經把tab全部remove了
        要在FragmentPagerAdapter中的getPageTitle設定*/
//        tabLayout.addTab(tabLayout.newTab().setText("未審批"));
//        tabLayout.addTab(tabLayout.newTab().setText("已審批"));
        fragments.add(new AftSerOpFragment(false));
        fragments.add(new AftSerOpFragment(true));

        vp.setAdapter(new TabAdapter(getSupportFragmentManager()));

        Bundle extras = getIntent().getExtras();
        if (extras != null) {
            vp.setCurrentItem(extras.getInt(approval));
        }

        tabLayout.setupWithViewPager(vp);
    }

    private void initView() {
        findViewById(R.id.aftserop).setOnClickListener(this);
        findViewById(R.id.aftserop_add).setOnClickListener(this);
        tabLayout = (TabLayout) findViewById(R.id.aftserop_tab);
        vp = (ViewPager) findViewById(R.id.aftserop_vp);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.aftserop:
                baseapp.finishActivity();
                break;
            case R.id.aftserop_add:
                SmallUtil.getActivity(AftSerOpActivity.this, OpNew.class);
                break;
        }
    }


    /*TabLayout改變狀态的監聽器*/
    TabLayout.OnTabSelectedListener tabSelect = new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            vp.setCurrentItem(tab.getPosition());
            Logs.v("滑動選擇：" + tab.getPosition());
        }

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

        }

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

        }

    };


    /* Fragment擴充卡*/
    class TabAdapter extends FragmentPagerAdapter {

        public TabAdapter(FragmentManager fm) {
            super(fm);
        }

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

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

        //顯示标簽上的文字
        @Override
        public CharSequence getPageTitle(int position) {
            return tabs[position];
        }
    }


}
           

效果圖