Android自定义TabLayout效果

更新时间：2017年03月04日 09:52:44 作者：尹忠政

这篇文章主要为大家详细介绍了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边框裁切的正确姿势实现示例
这篇文章主要为大家介绍了Android边框裁切的正确姿势实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
Android简单音乐播放实例
这篇文章主要介绍了Android简单音乐播放实例，详细介绍了Android Service使用方法
2015-12-12
在android中使用缓存和脱机存储
这篇文章主要介绍了在android中使用缓存和脱机存储，缓存可以加速你的应用程序，即使在网络不可用时，用户能够更加流畅地使用你的应用程序使用缓存是相当简单的，需要一个单一的代码行，下面来看看文章的详细内容
2021-11-11
Android打开WebView黑屏闪烁问题排查
这篇文章主要介绍了Android打开WebView黑屏闪烁问题排查,文章通过详细的代码示例和图文介绍WebView黑屏闪烁的问题，感兴趣的小伙伴可以跟着小编一起来学习
2023-05-05
Android UI实现SlidingMenu侧滑菜单效果
这篇文章主要为大家详细介绍了Android UI实现SlidingMenu侧滑菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
android ListActivity显示图标实例
在ListActivity中显示图标，好像并不复杂，实现起来却不轻松，我们下面一步步来实现ListActivity中显示图标
2013-11-11
Android开发笔记SQLite优化记住密码功能
这篇文章主要为大家详细介绍了Android开发笔记SQLite优化记住密码功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
Android签名知识小结
不止一次有用到Android签名相关的知识，每次都几乎从零开始在Google上搜索找，不想在继续这样了，找了个时间好好整理了一下自己用到的一些碎片知识，于是乎放到这里，一是备忘，二是帮助别人
2016-03-03
android判断一个Activity是否处于栈顶的实例
下面小编就为大家分享一篇android判断一个Activity是否处于栈顶的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Android天气预报app改进版
这篇文章主要为大家详细介绍了改进版的Android天气预报app，内容更加充实，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-07-07

Android自定义TabLayout效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具