TabLayout的使用:这一篇就够了

作者: 同学别闹 | 来源:发表于2018-06-24 20:26 被阅读0次

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的常用方法就讲解到这里啦，欢迎补充!

TabLayout的使用:这一篇就够了

TabLayout的基本使用

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读