TabLayout是design包中的控件继承HorizontalScrollView,用作页面切换的指示器,在分类页面中经常使用。结合ViewPager使用起来很方便。先看下具体效果。
TabLayout的基本使用
- 添加依赖
implementation 'com.android.support:design:26.1.0'
- 布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
- 常用属性
app:tabIndicatorColor ：指示线的颜色
app:tabIndicatorHeight ：指示线的高度
app:tabSelectedTextColor ： tab选中时的字体颜色
app:tabMode="scrollable" ： 默认是fixed，固定的；scrollable：可滚动的
- 基本使用
public class MainActivity extends AppCompatActivity {
String[] title = new String[] { "A", "B", "C", "D", "E", "F", "G", "H" };
@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//默认的
TabLayout normal = (TabLayout) findViewById(R.id.normal);
//自定义布局
TabLayout custom = (TabLayout) findViewById(R.id.custom);
setTab(normal);
for (int i = 0; i < title.length; i++) {
custom.addTab(custom.newTab());
String titleName = title[i];
TabLayout.Tab tab = custom.getTabAt(i);
View view = View.inflate(this,R.layout.tab_custom_layou,null);
TextView text = (TextView) view.findViewById(R.id.text);
text.setText(titleName);
tab.setCustomView(view);
}
}
private void setTab(TabLayout tabLayout) {
for (int i = 0; i < title.length; i++) {
tabLayout.addTab(tabLayout.newTab());
tabLayout.getTabAt(i).setText(title[i]);
}
}
}
- 结合ViewPager使用
public class MainActivity extends AppCompatActivity {
String[] mTitle = new String[] { "A", "B", "C", "D", "E", "F", "G", "H" };
List<Fragment> mFragments = new ArrayList<>();
@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
for (int i = 0; i < mTitle.length; i++) {
TabFragment fragment = new TabFragment();
Bundle bundle = new Bundle();
bundle.putString(TabFragment.TEXT, mTitle[i]);
fragment.setArguments(bundle);
mFragments.add(fragment);
}
//绑定ViewPager
tabLayout.setupWithViewPager(viewPager);
TabViewPagerAdapter adapter = new TabViewPagerAdapter(getSupportFragmentManager(), mTitle,mFragments);
viewPager.setAdapter(adapter);
}
}
public class TabViewPagerAdapter extends FragmentStatePagerAdapter {
private String[] titles;
private List<Fragment> fragments;
public TabViewPagerAdapter(FragmentManager fm,String[] titles,List<Fragment> fragments) {
super(fm);
this.titles = titles;
this.fragments = fragments;
}
@Override public Fragment getItem(int position) {
return fragments.get(position);
}
@Override public int getCount() {
return fragments.size();
}
//设置指示器
@Override public CharSequence getPageTitle(int position) {
return titles[position];
}
}
- 效果
有时候需要修改指示器线条的样式和宽度，还要修改指示器的样式，这时候基本的使用无法满足需求，TabLayout自身也没有提供对应的方法。但是没关系我们可以通过反射来进行修改
- 看源码中是如何实现指示器的，先找到实现指示器相关的类
private final SlidingTabStrip mTabStrip;
通过源码查看SlidingTabStrip是继承LinearLayout的，通过draw方法去实现绘制指示器，mIndicatorLeft和mIndicatorRight变量是控制指示器的的宽度的
private class SlidingTabStrip extends LinearLayout {
private int mSelectedIndicatorHeight;
private final Paint mSelectedIndicatorPaint;
int mSelectedPosition = -1;
float mSelectionOffset;
private int mLayoutDirection = -1;
private int mIndicatorLeft = -1;
private int mIndicatorRight = -1;
private ValueAnimator mIndicatorAnimator;
SlidingTabStrip(Context context) {
super(context);
setWillNotDraw(false);
mSelectedIndicatorPaint = new Paint();
}
....省略代码
@Override
public void draw(Canvas canvas) {
super.draw(canvas);
////这里是关键代码，画指示线，那么我么也可以利用底下的几个参数画整个背景，后面需要用到
// Thick colored underline below the current selection
if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight,
mIndicatorRight, getHeight(), mSelectedIndicatorPaint);
}
}
}
- 对应的工具类
public class ProxyDrawable extends Drawable {
private View view;
private Paint paint;
private int indicatorPaddingLeft;
private int indicatorPaddingRight;
private int indicatorHeight;
private RectF drawRectF;
public ProxyDrawable(@NonNull View view,int indicatorHeight) {
this.view = view;
this.indicatorHeight = indicatorHeight;
paint = new Paint();
drawRectF = new RectF();
}
public void setIndicatorPaddingLeft(int indicatorPaddingLeft) {
this.indicatorPaddingLeft = indicatorPaddingLeft;
}
public void setIndicatorPaddingRight(int indicatorPaddingRight) {
this.indicatorPaddingRight = indicatorPaddingRight;
}
public void setIndicatorColor(int color) {
paint.setColor(color);
}
@Override public void draw(@NonNull Canvas canvas) {
//这里通过反射获取SlidingTabStrip的两个变量，源代码画的是下划线，我们现在画的是带圆角的矩形
int mIndicatorLeft = getIntValue("mIndicatorLeft") + indicatorPaddingLeft;
int mIndicatorRight = getIntValue("mIndicatorRight") - indicatorPaddingRight;
int mSelectedIndicatorHeight = getIntValue("mSelectedIndicatorHeight");
int height = view.getHeight();
/*mSelectedIndicatorHeight / 2*/
int radius = 0;
if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
drawRectF.set(mIndicatorLeft, height - mSelectedIndicatorHeight - DensityUtil.dip2px(indicatorHeight), mIndicatorRight,
height - DensityUtil.dip2px(indicatorHeight));
canvas.drawRoundRect(drawRectF, radius, radius, paint);
}
}
private int getIntValue(String name) {
try {
Field f = view.getClass().getDeclaredField(name);
f.setAccessible(true);
Object obj = f.get(view);
return (Integer) obj;
} catch (Exception e) {
e.printStackTrace();
}
return 0;
}
@Override public void setAlpha(@IntRange(from = 0, to = 255) int alpha) {
}
@Override public void setColorFilter(@Nullable ColorFilter colorFilter) {
}
@Override public int getOpacity() {
return PixelFormat.UNKNOWN;
}
- 进行修改
View tabStrip = mArticleTypeTab.getChildAt(0);
if (tabStrip != null) {
ProxyDrawable proxyDrawable = new ProxyDrawable(tabStrip, 7);
proxyDrawable.setIndicatorColor(Res.color(R.color.tax_describe_text_bottom));
proxyDrawable.setIndicatorPaddingLeft(DensityUtil.dip2px(getActivity(), 25));
proxyDrawable.setIndicatorPaddingRight(DensityUtil.dip2px(getActivity(), 25));
tabStrip.setBackground(proxyDrawable);
}
- 注意:存在的问题是画的下划线仍然存在，需要在布局将其隐藏
<android.support.design.widget.TabLayout
android:id="@+id/article_type_tab"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginTop="5dp"
app:tabBackground="@null"
app:tabIndicatorColor="@color/transparent"
app:tabIndicatorHeight="4dp"
app:tabMinWidth="70dp"
/>
</android.support.design.widget.AppBarLayout>
TabLayout切换的监听 实现文字大小变换
mArticleTypeTab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override public void onTabSelected(TabLayout.Tab tab) {
int position = tab.getPosition();
trackSensors(position);
View view = tab.getCustomView();
if (view != null) {
TextView textView = (TextView) view.findViewById(R.id.title);
textView.setTextSize(16);
}
}
@Override public void onTabUnselected(TabLayout.Tab tab) {
View view = tab.getCustomView();
if (view != null) {
TextView textView = (TextView) view.findViewById(R.id.title);
textView.setTextSize(14);
}
}
@Override public void onTabReselected(TabLayout.Tab tab) {
}
});
- 效果
有时候TabLayout的Tab指示器之间还需要有分隔线，TabLayout很贴心的帮我们提供了对应的方法
LinearLayout tabStrip = (LinearLayout) loginType.getChildAt(0);
tabStrip.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
tabStrip.setDividerDrawable(
ContextCompat.getDrawable(getActivity(), R.drawable.shape_tab_divider));
tabStrip.setDividerPadding(DensityUtil.dip2px(18));
-----shape----shape_tab_divider------
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/divider_color"/>
<size android:width="1dp"/>
</shape>
- 效果
TabLayout的常用方法就讲解到这里啦，欢迎补充!
