Android 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);