TabLayout的使用
程序员文章站
2022-06-01 15:15:05
...
TabLayout的使用
简介:TabLayout是Android Design库提供的控件。TabLayout提供一个横向布局用来显示标签。如果在Layout中与 android.support.v4.view.ViewPager 联用,可以使用setupWithViewPager(ViewPager)将两者关联起来,实现根据标签自动从PagerAdapter中填充layout。
效果:
一、导包
compile 'com.android.support:design:25.3.1'
使用TabLayout必须使用Theme.AppCompat系列主题,否则:
还需要导入appcompat-v7包。
compile 'com.android.support:appcompat-v7:25.3.1'
然后更换主题样式。
二、xml中添加
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tl_tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#ff4400"
app:tabIndicatorHeight="1dp"
app:tabSelectedTextColor="#ff4400"
app:tabTextColor="#000000"/>
<android.support.v4.view.ViewPager
android:id="@+id/tl_viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
TabLayout属性说明:
- app:tabIndicatorColor:设置指示器下标颜色。
- app:tabIndicatorHeight:设置指示器下标高度。
- app:tabTextColor:设置标签默认字体颜色。
- app:tabSelectedTextColor:设置标签选中字体颜色。
- app:tabMode:设置标签显示模式。fixed模式:不可滑动。scrollable模式:标签设置为默认大小,标签数量多时,Tab区域可滑动。默认为fixed模式。
- app:theme:设置主题。
- app:tabBackground:设置Tab区域的背景。
- app:tabGravity:设置标签的内容显示模式。center模式:所有标签居中显示。fill模式:所有标签充满Tab区域。默认为fill模式。
- app:tabMinWidth:设置标签的最小宽度。
- app:tabMaxWidth:设置标签的最大宽度。
- app:tabTextAppearance:设置标签字体样式。
- app:paddingStart:设置Tab区域的padding。
- app:paddingEnd:设置Tab区域的padding。
- app:tabPadding:设置标签的padding。
- app:tabPaddingTop:设置标签的paddingTop。
- app:tabPaddingBottom:设置标签的paddingBottom。
- app:tabPaddingStart:设置标签的paddingLeft。
- app:tabPaddingEnd:设置标签的paddingRight。
- app:tabContentStart:设置标签开始位置偏移量。
三、代码中使用
3.1 声明控件并初始化
@BindView(R.id.tl_tabLayout)
TabLayout mTabLayout;
@BindView(R.id.tl_viewPager)
ViewPager mViewPager;
private List<Fragment> mFViews = new ArrayList<>();
private String [] mFTabs = new String[]{"第一页","第二页","第三页"};
private FragmentPagerAdapter mfpAdapter;
//onCreate()
mFViews.add(new OneFragment());
mFViews.add(new TwoFragment());
mFViews.add(new ThreeFragment());
3.2 设置Adapter并建立关联
方式一:手动重写Adapter里的getPageTitle()方法
mfpAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return mFViews.get(position);
}
@Override
public int getCount() {
return mFViews.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mFTabs[position];
}
};
mViewPager.setAdapter(mfpAdapter);
//关联TabLayout和ViewPager
mTabLayout.setupWithViewPager(mViewPager);
方式二: 关联后再设置标签内容
mfpAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return mFViews.get(position);
}
@Override
public int getCount() {
return mFViews.size();
}
};
mViewPager.setAdapter(mfpAdapter);
//关联TabLayout和ViewPager
mTabLayout.setupWithViewPager(mViewPager);
//设置标签text
for(int i = 0 ;i<mFViews.size();i++){
mTabLayout.getTabAt(i) .setText(mFTabs[i]);
}
注意:要先【关联TabLayout和ViewPager】,再【设置标签text】。因为执行setupWithViewPager()方法时,会调用populateFromPagerAdapter()方法。
不执行【设置标签text】会出现标签丢失,界面不显示标签,例如:
四、 TabLayout设置分割线
效果:
4.1 创建分隔线资源文件
文件位置://drawable/tablayout_divider.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/theme_background_deep"/>
<size android:width="2dp"/>
</shape>
4.2 代码中使用
LinearLayout linearLayout = (LinearLayout) mTabLayout.getChildAt(0);
linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
linearLayout.setDividerDrawable(ContextCompat.getDrawable(this,R.drawable.tablayout_divider));
五、TabLayout添加角标
效果:
5.1 自定义Tab布局
文件位置://layout/tab_title_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/transparent">
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="14dp"
android:layout_centerInParent="true"
android:gravity="center"
android:textSize="16sp"/>
</RelativeLayout>
5.2 代码中使用
自定义方法:
private void setUpTabBadge(int position) {
TabLayout.Tab tab = mTabLayout.getTabAt(position);//拿到对应位置的tab
if (tab != null) {
View view = LayoutInflater.from(this).inflate(R.layout.tab_title_layout, null);//填充一个布局拿到View的引用
((TextView) view.findViewById(R.id.tv_title)).setText(mFTabs[position]);//设置标题
tab.setCustomView(view);//tab设置自定义view
Badge badgeView = new QBadgeView(this).bindTarget(view.findViewById(R.id.tv_title));//将Badge与view绑定
badgeView.setBadgeGravity(Gravity.END | Gravity.TOP);
badgeView.setBadgeText(position+"");
badgeView.setBadgeTextSize(10,true);
badgeView.setBadgePadding(2,true);
}
}
循环调用:
for(int i = 0; i< mFTabs.length;i++){
setUpTabBadge(i);
}
备注:Badge是一个gitHub上的开源库,详见项目。点击此处跳转
上一篇: TabLayout 的使用
下一篇: TabLayout简单的使用