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