上次在项目里面加入官方的TabLayout之后,发现底下的线不能修改长度,只能通过反射去修改,没办法,强迫症不能忍受,只能动手来造车轮子,正好加深一下对自定义View的认识,废话不多说,代码撸起撸起,先来看看最后实现的效果
实现的效果:
YSTablayout.gif
接着我们来看看怎么实现的吧
结构图:
jiegoutu.png
我们先继承 HorizontalScrollView 使之可以滑动，因为HorizontalScrollView只能有一个子View，所以我们里面放入一个 LinearLayout 然后在 LinearLayout 里面去放入 TabItem 和绘制滑动的线条
按照思路，我们一步一步来:
步骤一: 创建父容器
我们先继承自HorizontalScrollView
public class YSTabLayout extends HorizontalScrollView{
public YSTabLayout(Context context) {
super(context);
setTabViewLinear(context);
}
public YSTabLayout(Context context, AttributeSet attrs) {
super(context, attrs);
setTabViewLinear(context);
}
}
步骤二:创建LinearLayout
我们所有的Item和滑动的线都放在这个容器里面，我们先把Item添加进来
class TabViewLinearLayout extends LinearLayout{
public TabViewLinearLayout(Context context) {
super(context);
setOrientation(LinearLayout.HORIZONTAL);
setGravity(Gravity.CENTER);
setBackgroundColor(backgroundColor);
setWillNotDraw(false);
}
}
添加Item,这里我们在父容器里面去往 LinearLayout 添加子View ,因为有些操作我们要提供给使用者调用
protected void setTabViewLinear(Context context) {
this.setHorizontalScrollBarEnabled(false);
tab = new TabViewLinearLayout(context);
mContext = context;
addView(tab);
}
public YSTabLayout setTabView(List list) {
LinearLayout.LayoutParams layoutParams = null;
if (margin != 0) {
layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(margin, 0, margin, 0);
}
for (int i = 0; i < list.size(); i++) {//添加Item
TextView view = new TextView(mContext);
view.setText(list.get(i));
view.setTextColor(noSelectColor);
view.setTextSize(px2dip(textSize));
if (overstriking){
TextPaint textPaint=view.getPaint();
textPaint.setFakeBoldText(true);
}
if (margin != 0 && layoutParams != null) {
view.setLayoutParams(layoutParams);
}
if (tab != null) {
tab.addView(view);
}
}
return this;
}
添加完子View之后我们要确定我们整个LinearLayout 的宽度，这样如果我们的item一旦很多，超出了屏幕的宽度。能够滑动操作
/**
* 测量控件宽高
*
* @param widthMeasureSpec
* @param heightMeasureSpec
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int width = 0;
int height = 0;
if (heightMode == MeasureSpec.EXACTLY) {
height = heightSize;
} else {
height = 50;//默认高度
}
for (int i = 0; i < getChildCount(); i++) {
getChildAt(i).measure(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
getChildAt(i).setOnClickListener(this);
width += getChildAt(i).getMeasuredWidth() + margin * 2;
views.add(getChildAt(i));
}
if (width < getScene(SCENE_WIDTH)) {
width = LayoutParams.MATCH_PARENT;
}
setMeasuredDimension(width, height);
views.clear();
}
子view添加完成之后，我们开始画滑动的线条，我们先要做画线的初始化工作
/**
* 初始化画笔
*/
private void initPaint() {
paint = new Paint();
paint.setColor(lineColor);
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.FILL);
}
/**
* 初始化Rect
*/
@TargetApi(Build.VERSION_CODES.JELLY_BEAN)
private void initRect() {
rect = new Rect(0, 0, 0, 0);
}
/**
* 实时更新线的宽度以及位置
*
* @param left
* @param top
* @param right
* @param bottom
*/
@TargetApi(Build.VERSION_CODES.JELLY_BEAN)
private void updateRect(int left, int top, int right, int bottom) {
rect.left = left;
rect.top = top;
rect.right = right;
rect.bottom = bottom;
postInvalidateOnAnimation();
}
/**
* 画底下的线
*
* @param canvas
*/
@Override
public void onDrawForeground(Canvas canvas) {
canvas.drawRect(rect, paint);
}
线画好了，怎么让他动起来呢，因为我们这个是结合ViewPage来使用的，所以我们要在ViewPage的滑动监听里面拿到当前滑动的偏移百分比，进行计算，得到我们要移动的距离和结果
/**
* 在这里进行计算 当选中之后 如果下一个的Item没有显示或者显示不全 那么要处理 让滚动的距离刚好下一个Item给显示出来
* @param position
*/
@Override
public void onPageSelected(int position) {
tab.setSelectItem(position);
TextView nextView = null;
if (position > tempPosition) {
nextView = (TextView) tab.getChildAt(position + 1);
if (nextView != null) { //当手指像左滑的时候
if (isCover(nextView)) {
float scrollPosition = getScrollX() + getItemHideWidth(nextView)+margin;//当item的数量超出屏幕的时候 使之固定
//这里是使用ValueAnimator来实现 平缓滚动的效果
ValueAnimator valueAnimator = ValueAnimator.ofFloat(getScrollX()-margin, scrollPosition);
valueAnimator.setDuration(slideTiem);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float anim = (float) animation.getAnimatedValue();
scrollTo((int) anim+margin, 0);
}
});
valueAnimator.start();
}
}else {
ValueAnimator valueAnimator = ValueAnimator.ofFloat(getScrollX()-margin, tab.getMeasuredWidth());
valueAnimator.setDuration(slideTiem);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float anim = (float) animation.getAnimatedValue();
scrollTo((int) anim+margin, 0);
}
});
valueAnimator.start();
}
} else if (position < tempPosition) {//当手指向右滑的时候
nextView = (TextView) tab.getChildAt(position - 1);
TextView view = (TextView) tab.getChildAt(position);
if (nextView != null) { //当手指像左滑的时候
if (isCover(nextView)) {
float scrollPosition = getScrollX() - getItemHideWidth(nextView) - margin;//当item的数量超出屏幕的时候 使之固定
//这里是使用ValueAnimator来实现 平缓滚动的效果
ValueAnimator valueAnimator = ValueAnimator.ofFloat(getScrollX() + margin, scrollPosition);
valueAnimator.setDuration(slideTiem);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float f = (float) animation.getAnimatedValue();
scrollTo((int) f - margin, 0);
}
});
valueAnimator.start();
}
}else {
ValueAnimator valueAnimator = ValueAnimator.ofFloat(getScrollX() + margin, 0);
valueAnimator.setDuration(slideTiem);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float f = (float) animation.getAnimatedValue();
scrollTo((int) f - margin, 0);
}
});
valueAnimator.start();
}
}
tempPosition = position;
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
int lastPosition = tab.indexOfChild(lastView);
if (lastPosition < 0) {
tab.updateRect(tab.getChildAt(position).getLeft(), getHeight() - lineHeight, tab.getChildAt(position).getLeft() + tab.getChildAt(position).getMeasuredWidth(), getHeight() + lineHeight);
tab.setSelectItem(position);
return;
}
float leftoffset = 0;
float rightoffset = 0;
nextPosition = -1;
if (positionOffsetPixels > 0) {
if (lastValue < positionOffsetPixels) {//左滑
nextPosition = position + 1;
//获取到当前View和下一个View
View nextview = tab.getChildAt(nextPosition);
View currentview = tab.getChildAt(position);
if (nextview != null) {
//计算出从当前view到下一个view的宽度 算出百分百
leftoffset = (nextview.getLeft() - currentview.getLeft()) * positionOffset;
rightoffset = (nextview.getRight() - currentview.getRight()) * positionOffset;
}
} else if (lastValue > positionOffsetPixels) {//右滑
nextPosition = position;
//获取到当前View和下一个View
View nextview = tab.getChildAt(nextPosition);
View currentview = tab.getChildAt(position + 1);
if (nextview != null) {
//计算出从当前view到下一个view的宽度 算出百分百
leftoffset = (currentview.getLeft() - nextview.getLeft()) * positionOffset;
rightoffset = (currentview.getRight() - nextview.getRight()) * positionOffset;
}
}
View view = tab.getChildAt(nextPosition);
if (view != null) {
float left = tab.getChildAt(position).getLeft() + leftoffset;//计算出要位移的距离+百分比
float right = tab.getChildAt(position).getRight() + rightoffset;
float top = getHeight() - lineHeight;//高度
float bottom = getHeight();
tab.updateRect((int) left, (int) top, (int) right, (int) bottom);//得到最新的数据 通知Canvas更新界面
}
}
lastValue = positionOffsetPixels;
}
在ViewPage的滑动监听里面我们可以得到当前选中的下标，那么我们就可以计算出下个 View 的下标，通过 getChildAt() 来拿到View，通过当前的View和下一个View的宽度，我们就可以计算出当我们滑动到下一个的时候我们要自动滑动多少，然后根据下个Item的宽度实时去更新滑动线条的宽度。
通过滑动的下标，我们可以得到下一个View和当前的View，如果下一个View没有显示出来，或者只显示一半，那么我们就自动滑动，让下一个Item显示出来，到这里我们就基本上就达到了我们的效果
个人空闲之余的成果，如有错误，请多多反馈，当然里面可能还有许多坑，本作品只用于参考！
码字码到凌晨1点半，明天困成狗去上班
项目Github地址:YSTabLayout
个人博客:小白的博客