Material Design控件之TabLayout

Material Design Android官方控件之介紹

TabLayout

• 標籤欄
• extends HorizontalScrollView 水平滾動佈局
• 需要結合TabItem一起使用
• 不再需要使用第三方庫如PagerSlidingTabStrip,或者TabHost,
• TabLayout簡單地實現標籤欄

導入design庫

'com.android.support:design:26.1.0'

xml

TabLayout
- 這裏直接寫入三個TabItem
- app:tabIndicatorColor:指示器顏色
- app:tabIndicatorHeight:指示器高度
- app:tabSelectedTextColor: 選中TabItem字體顏色
- app:tabTextColor:未選中TabItem字體顏色
TabItem
- android:icon=”@drawable/ic_action_tab”//設置圖片
- android:text=”第一項”//設置文字

<android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:background="#3558B3"
            app:tabIndicatorColor="#cdcdcd"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="#fff"
            app:tabTextColor="#cdcdcd"
            app:tabTextAppearance="@style/TextAppearance.AppCompat.Small"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.design.widget.TabItem
                android:icon="@drawable/ic_action_tab"
                android:text="第一項"
                android:tag="tag第三項"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

            <android.support.design.widget.TabItem
                android:icon="@drawable/ic_action_tab"
                android:text="第二項"
                android:tag="tag第三項"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
            <android.support.design.widget.TabItem
                android:icon="@drawable/ic_action_tab"
                android:tag="tag第三項"
                android:text="第三項"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </android.support.design.widget.TabLayout>

    </LinearLayout>

OnTabSelectedListener TabLayout監聽事件

切換Tab

• 先調用onTabUnselected(TabLayout.Tab tab):切換前選中tab
• 再調用onTabSelected(TabLayout.Tab tab):切換後選中tab

重新點擊選中Tab

• onTabReselected(TabLayout.Tab tab):選中Tab

        TabLayout mTabLayout =   findViewById(R.id.tabLayout);
        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                tab.getText();
                tab.getPosition();
                tab.getTag();
                Toast.makeText(TabLayoutActivity.this,"onTabSelected"+tab.getText()+tab.getPosition()+tab.getTag(), Toast.LENGTH_SHORT).show();
                Log.e("onTabSelected",""+tab.getText()+tab.getPosition()+tab.getTag());
            }

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

                Log.e("onTabUnselected",""+tab.getText()+tab.getPosition()+tab.getTag());
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                Log.e("onTabReselected",""+tab.getText()+tab.getPosition()+tab.getTag());
            }
        });

MaterialDesignWidget.TabLayoutActivity 設置nestedScrollView的topMargin,

• 實現Toolbar、TabLayout、NestedScrollView在CoordinatorLayout中的合理佈局

        //測量ll_appbar,設置nestedScrollView的topMargin
        LinearLayout mLLAppbar =   findViewById(R.id.ll_appbar);
        int width2 = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
        int height2 = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
        mLLAppbar.measure(width2,height2);
        int  height=mLLAppbar.getMeasuredHeight();
        NestedScrollView mNestedScrollView =   findViewById(R.id.nestedScrollView);
        CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) mNestedScrollView.getLayoutParams();
        layoutParams.topMargin=height;
        mNestedScrollView.setLayoutParams(layoutParams);

源碼地址：https://github.com/LinweiJ/MaterialDesignWidget