Android自定义TabLayout效果

周末就要到了，今天项目中遇到这样一个Tab，选中tab的背景是个圆角矩形，方向指向器没有了，这样普通的TabLayout不能满足我的要求，可能会想到动态的去设置选中Tab的背景不就可以了，但是那样的话太生硬了，没有动画效果，其实想想也还比较简单，今天就简单的说一说这个YzzTab。效果如下图：

这里是四个Tab，一版只显示3个，这里假设有num个Tab，当滑动到第3个时，这里就需要考虑如何让TabLayout和指示器一起移动呢？

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 if (positionOffset>1){
  return;
 }
 int leftCop = (int) (positionOffset*(getMeasuredWidth()/mMaxLineNum)+position*getMeasuredWidth()/mMaxLineNum);
 if (leftCop!=leftForTabLayout){
  //这里要做判断是否滑动,当选择的位置大于TabLayout中显示的最大数-1时，会向左右滑动，指示器也会
  //跟这滑动，相对静止，否则指示器滑动，Tab布局不移动
  if (position>=mMaxLineNum-1) {
   scrollContent += leftCop - leftForTabLayout;
   scrollTo(scrollContent, 0);
   //这里要重新layout
   update();
  }
  leftForTabLayout = leftCop;
  invalidate();
 }
}

首先，在ViewPage的监听中，positionOffset有时候可能大于1，这点需要注意的，当两次left的坐标相等 时，我们就不进行绘制了，接下来就是
如何确定left的值了，对于这点我也想了很久，最后终于得出结论：

int leftCop = (int) (positionOffset*(getMeasuredWidth()/mMaxLineNum)+position*getMeasuredWidth()/mMaxLineNum);

因为当positionOffset的值在向右滑动80%左右的时候getCurrentItem（）的值会发生变化，这点可以试验一下，所以getCurrentItem（）方法不能用了，只能用参数position.Layout滑动的实际代码注释很详细了，我就不再阐述了，可以试试。在布局滑动了以后，必须要layout，不然View的属性不会变，点击没法应，但是也可以不更新，动态的告诉用户点击的真是Tab，这样也可以。

 private void update() {
 for (int i = 0; i <mChildCount ; i++) {
  View v = getChildAt(i);
  v.setLeft(v.getLeft()+scrollContent);
 }
 //必须调用，不然不会重新layout
 requestLayout();
}

接下来就是绘制了，ViewGroup是默认不调用onDraw（Canvas canvas）方法的，原因很简单，ViewGroup是个容器，主要作用是起承载作用，绘画就交给子View了，但是还是有办法让其调用该方法的，如下：

 setWillNotDraw(false);

这就告诉该容器，需要绘制；

接下来就是绘制指向器和选中背景了，一个圆角矩形和一条线，比较简单，我就不再详细说明了。

@Override
protected void onDraw(Canvas canvas) {
 //left = getMeasuredWidth() / mChildCount * mSelectPosition;
 super.onDraw(canvas);
 mPaint.setColor(Color.GREEN);
 int top = getMeasuredHeight() / 4;
 int right = leftForTabLayout + getMeasuredWidth() / mMaxLineNum;
 int bottom = getMeasuredHeight() - getMeasuredHeight() / 4;
 RectF rectF = new RectF(leftForTabLayout, top, right, bottom);
 mPaint.setAntiAlias(true);
 mPaint.setStyle(Paint.Style.FILL);
 canvas.drawRoundRect(rectF, 10, 10, mPaint);
 mPaint.setColor(Color.RED);
 mPaint.setStrokeWidth(5);
 canvas.drawLine(leftForTabLayout,getMeasuredHeight()-5,right,getMeasuredHeight()-5,mPaint);

}

接下来介绍建与ViewPager建立关联的方法

 /**
 * 于ViewPager建立联系,这里必须先要给ViewPager设置Adapter
 *
 * @param viewPager
 */
public void setUpWithViewPager(ViewPager viewPager) {
 mViewPager = viewPager;
 mChildCount = viewPager.getAdapter().getCount();
 mSelectPosition = viewPager.getCurrentItem();
 viewPager.setOnPageChangeListener(this);
}

初始化的方法

/**
 * 为Tab添加View
 */
private void init() {
 setWillNotDraw(false);
 mPaint = new Paint();
 for (int i = 0; i < mChildCount; i++) {
  final TextView tv = new TextView(getContext());
  int w = getMeasuredWidth()/mMaxLineNum;
  LinearLayout.LayoutParams lp = new LayoutParams(w, ViewGroup.LayoutParams.MATCH_PARENT);
  tv.setText("tab" + i);
  tv.setGravity(Gravity.CENTER);
  tv.setLayoutParams(lp);
  final int finalI = i;
  tv.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
    if (monTabSelecterListener != null){
     monTabSelecterListener.selecter(finalI,tv);
    }
   }
  });
  addView(tv);
 }
}

这里只是很简单的加了几个TextView进去，也可以弄个方法，通过用户动态添加自己想要的View，都可以实现的。至于监听的话就很简单了.上面已经写到了。

YzzTab的代码

package a6he.android.yzz.com.mytablayout;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.Switch;
import android.widget.TextView;

/**
 * Created by yzz on 2017/2/24 0024.
 * <p/>
 * 实现背景随着ViewPager的滑动跟着移动
 */
public class YzzTab extends LinearLayout implements ViewPager.OnPageChangeListener {

private ViewPager mViewPager;
private Paint mPaint;
//tab的数量
private int mChildCount;
//tab选中的位置
private int mSelectPosition;
//绘制指向器的左顶点
private int leftForTabLayout = 0;
private int leftForInvidator = 0;
private int mMaxLineNum = 3;
private int scrollContent = 0;
private onTabSelecterListener monTabSelecterListener;

public YzzTab(Context context) {
 super(context);
}

public YzzTab(Context context, AttributeSet attrs) {
 super(context, attrs);
}

public YzzTab(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
}

@Override
protected void onFinishInflate() {
 super.onFinishInflate();

}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 init();
}


/**
 * 于ViewPager建立联系,这里必须先要给ViewPager设置Adapter
 *
 * @param viewPager
 */
public void setUpWithViewPager(ViewPager viewPager) {
 mViewPager = viewPager;
 mChildCount = viewPager.getAdapter().getCount();
 mSelectPosition = viewPager.getCurrentItem();
 viewPager.setOnPageChangeListener(this);

}

/**
 * 为Tab添加View
 */
private void init() {
 setWillNotDraw(false);
 mPaint = new Paint();
 for (int i = 0; i < mChildCount; i++) {
  final TextView tv = new TextView(getContext());
  int w = getMeasuredWidth()/mMaxLineNum;
  LinearLayout.LayoutParams lp = new LayoutParams(w, ViewGroup.LayoutParams.MATCH_PARENT);
  tv.setText("tab" + i);
  tv.setGravity(Gravity.CENTER);
  tv.setLayoutParams(lp);
  final int finalI = i;
  tv.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
    if (monTabSelecterListener != null){
     monTabSelecterListener.selecter(finalI,tv);
    }
   }
  });
  addView(tv);
 }
}

@Override
protected void onDraw(Canvas canvas) {
 //left = getMeasuredWidth() / mChildCount * mSelectPosition;
 super.onDraw(canvas);
 mPaint.setColor(Color.GREEN);
 int top = getMeasuredHeight() / 4;
 int right = leftForTabLayout + getMeasuredWidth() / mMaxLineNum;
 int bottom = getMeasuredHeight() - getMeasuredHeight() / 4;
 RectF rectF = new RectF(leftForTabLayout, top, right, bottom);
 mPaint.setAntiAlias(true);
 mPaint.setStyle(Paint.Style.FILL);
 canvas.drawRoundRect(rectF, 10, 10, mPaint);
 mPaint.setColor(Color.RED);
 mPaint.setStrokeWidth(5);
 canvas.drawLine(leftForTabLayout,getMeasuredHeight()-5,right,getMeasuredHeight()-5,mPaint);

}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 if (positionOffset>1){
  return;
 }
 int leftCop = (int) (positionOffset*(getMeasuredWidth()/mMaxLineNum)+position*getMeasuredWidth()/mMaxLineNum);
 if (leftCop!=leftForTabLayout){
  //这里要做判断是否滑动,当选择的位置大于TabLayout中显示的最大数-1时，会向左右滑动，指示器也会
  //跟这滑动，相对静止，否则指示器滑动，Tab布局不移动
  if (position>=mMaxLineNum-1) {
   scrollContent += leftCop - leftForTabLayout;
   scrollTo(scrollContent, 0);
   //这里要重新layout
   update();
  }
  leftForTabLayout = leftCop;
  invalidate();
 }
}

private void update() {
 for (int i = 0; i <mChildCount ; i++) {
  View v = getChildAt(i);
  v.setLeft(v.getLeft()+scrollContent);
 }
 requestLayout();
}

@Override
public void onPageSelected(int position) {

}

@Override
public void onPageScrollStateChanged(int state) {
 switch (state){

 }
}

public void setmMaxLineNum(int mMaxLineNum) {
 this.mMaxLineNum = mMaxLineNum;
}

public void setonTabSelecterListener(onTabSelecterListener monTabSelecterListener) {
 this.monTabSelecterListener = monTabSelecterListener;
}

interface onTabSelecterListener{
 void selecter(int position,View view);
 }
}

好啦，就介绍这么多，还有待完善，继续封装，完成更强大的功能。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Android  # TabLayout  # Android TabLayout(选项卡布局)简单用法实例分析  # Android TabLayout设置指示器宽度的方法  # android TabLayout使用方法详解  # Android中修改TabLayout底部导航条Indicator长短的方法  # Android 自定义View结合自定义TabLayout实现顶部标签滑动效果  # Android中TabLayout结合ViewPager实现页面切换效果  # android TabLayout的指示器宽度问题  # Android原生TabLayout使用的超全解析(看这篇就够了)  # 很简单  # 我就  # 是个  # 也会  # 要做  # 要给  # 必须先  # 会向  # 判断是否  # 圆角  # 我也  # 几个  # 是有  # 的说  # 就不  # 这么多  # 两次  # 很久  # 这就  # 用了 

相关文章： 微信小程序 input输入框控件详解及实例（多种示例）  如何在IIS7中新建站点？详细步骤解析  如何通过商城自助建站源码实现零基础高效建站？  C++如何使用std::optional？（处理可选值）  网站制作公司,橙子建站是合法的吗？  如何选择网络建站服务器？高效建站必看指南  北京企业网站设计制作公司,北京铁路集团官方网站？  专业制作网站的公司哪家好,建立一个公司网站的费用.有哪些部分,分别要多少钱？  外汇网站制作流程,如何在工商银行网站上做外汇买卖？  香港服务器网站卡顿？如何解决网络延迟与负载问题？  如何有效防御Web建站篡改攻击？  相册网站制作软件,图片上的网址怎么复制？  如何撰写建站申请书？关键要点有哪些？  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  无锡营销型网站制作公司,无锡网选车牌流程？  SQL查询语句优化的实用方法总结  武汉外贸网站制作公司,现在武汉外贸前景怎么样啊？  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册？  宝塔面板如何快速创建新站点？  黑客如何通过漏洞一步步攻陷网站服务器？  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  网站制作费用多少钱,一个网站的运营，需要哪些费用？  如何通过二级域名建站提升品牌影响力？  香港服务器部署网站为何提示未备案？  网站制作软件有哪些,制图软件有哪些？  b2c电商网站制作流程,b2c水平综合的电商平台？  网站专业制作公司,网站编辑是做什么的？好做吗？工作前景如何？  整蛊网站制作软件,手机不停的收到各种网站的验证码短信,是手机病毒还是人为恶搞?有这种手机病毒吗？  青岛网站设计制作公司,查询青岛招聘信息的网站有哪些？  东莞专业网站制作公司有哪些,东莞招聘网站哪个好？  Java解压缩zip - 解压缩多个文件或文件夹实例  怎么制作一个起泡网,水泡粪全漏粪育肥舍冬季氨气超过25ppm，可以有哪些措施降低舍内氨气水平？  如何通过.red域名打造高辨识度品牌网站？  设计网站制作公司有哪些,制作网页教程？  企业网站制作公司网页,推荐几家专业的天津网站制作公司？  北京网站制作网页,网站升级改版需要多久？  宁波免费建站如何选择可靠模板与平台？  免费制作海报的网站,哪位做平面的朋友告诉我用什么软件做海报比较好?ps还是cd还是ai这几个软件我都会些我是做网页的？  小捣蛋自助建站系统：数据分析与安全设置双核驱动网站优化  兔展官网 在线制作,怎样制作微信请帖？  如何通过老薛主机一键快速建站？  江苏网站制作公司有哪些,江苏书法考级官方网站？  大学网站设计制作软件有哪些,如何将网站制作成自己app？  大连网站制作公司哪家好一点,大连买房网站哪个好？  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？  建站之星如何取消后台验证码生成？  建站之星安装提示数据库无法连接如何解决？  浅谈Javascript中的Label语句