为啥要自己定义TabLayout？
1.design包中的TabLayout很多时候不能满足UI的需求
2.我们需要自定义tab的位置和tab内容的字体和style
3.我们自定义的控件比较容易适配
有人可能会百度，改变tab字体大小和style不是有方法吗？但是当你要加入自定义布局的时候，就无法实现了。但是字体大小和字体的style还是可以通过反射来修改的，TabLayout中Tab的字段textView来设置字体的大小和style，值得注意的是TabLayout设计了一个最大的textSize，这里我们要通过反射区修改这个最大值，这样下来我们才能说我们已经完美的自定义了每个Tab，嗯？是这样的吗？那么布局怎么搞？Tab都是居中的，我们想让左右的Tab对齐父布局，那我们怎么处理呢？so，今天带给大家一个比较完善的自定义View–YzzTabLayout.
第一：我们要实现自定义Tab的位置，让它出现在我们预期的位置
（1）测量
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
measureChildren(widthMeasureSpec, heightMeasureSpec);
this.widthMeasureSpec = widthMeasureSpec;
this.heightMeasureSpec = heightMeasureSpec;
//获取宽高的大小和模式
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
int wModel = MeasureSpec.getMode(widthMeasureSpec);
int hModel = MeasureSpec.getMode(heightMeasureSpec);
int count = getChildCount();
switch (mModel) {
case MODEL_CENTER:
measureCenter(count, wModel, hModel, width, height);
break;
case MODEL_DEFAULT:
measureDefault(count, wModel, hModel, width, height);
break;
}
} private void measureCenter(int count, int wModel, int hModel, int width, int height) {
int w = 0;
int h = 0;
if (wModel == MeasureSpec.EXACTLY) {
w = width;
//计算margin
getMargin(count, width);
} else {
w = getCenterW(count, width);
}
if (hModel == MeasureSpec.EXACTLY) {
h = height;
} else {
h = getH(count);
}
setMeasuredDimension(w, h);
}
//获取center模式下的宽度（default模式下就是普通的LinearLayout逻辑），这里是当YzzTab的宽度的model为ATMOST的时候，我们就有一个默认的margin
private int getCenterW(int count, int pW) {
int w = 0;
int childW = 0;
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
MarginLayoutParams lp;
if (child.getLayoutParams() instanceof MarginLayoutParams) {
lp = (MarginLayoutParams) child.getLayoutParams();
} else {
lp = new MarginLayoutParams(child.getLayoutParams());
}
childW += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
}
// if (w + getPaddingLeft() + getPaddingRight() < pW) {
// getMargin(count, pW);
// return pW;
// }
w = childW + getPaddingRight() + getPaddingLeft() + (count - 1) * margin;
//当
if (w > pW) getMargin(count, pW);
//这里我为了统一，Tab的宽度不得超过父容器
return w > pW ? pW : w;
}//获取margin，这是该View的核心，UI是这样的左右两边必须对其父布局，然后整体平分父容器。
private void getMargin(int count, int w) {
int childW = 0;
int num = 0;
for (int i = 0; i < count; i++) {
num++;
View child = getChildAt(i);
//通过这种方式获取View的margin，标准形式。
MarginLayoutParams lp;
if (child.getLayoutParams() instanceof MarginLayoutParams) {
lp = (MarginLayoutParams) child.getLayoutParams();
} else {
lp = new MarginLayoutParams(child.getLayoutParams());
}
childW += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
//这里我设置了一个最小margin，当小于此margin后，我们就讲最小margin作为我们的值。不明白的童鞋这里可以画一个草图算算这个margin要怎么求，我这里就不做详细说明了，应该问题不大。
if (num > 1) {
margin = (w - (childW + getPaddingLeft() + getPaddingRight())) / (num - 1);
if (margin < MINE_MARGIN) {
childW -= child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
num--;
margin = (w - (childW + getPaddingLeft() + getPaddingRight())) / (num - 1);
break;
}
}
// if (childW > w - getPaddingLeft() - getPaddingRight()) {
// childW -= child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
// num--;
// break;
// }
}
//if (num<=one)return;
//margin = (int) ((w - (childW + getPaddingLeft() + getPaddingRight())) / (num - one));
}//这里就是普通模式下的测量，思路跟LinearLayout是差不多的，下面的getW()和getH()方法就比较常见了，就不做介绍了。
private void measureDefault(int count, int wModel, int hModel, int width, int height) {
int w = 0;
int h = 0;
if (wModel == MeasureSpec.EXACTLY) {
w = width;
} else {
w = getW(count, width);
}
if (hModel == MeasureSpec.EXACTLY) {
h = height;
} else {
h = getH(count);
}
setMeasuredDimension(w, h);
}
/**
* 获取高度
*/
private int getH(int count) {
int h = 0;
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
MarginLayoutParams lp;
if (child.getLayoutParams() instanceof MarginLayoutParams) {
lp = (MarginLayoutParams) child.getLayoutParams();
} else {
lp = new MarginLayoutParams(child.getLayoutParams());
}
h = Math.max(h, child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin);
}
return h + getPaddingBottom() + getPaddingTop();
}
/**
* 获取宽度
*/
private int getW(int count, int pW) {
int w = 0;
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
MarginLayoutParams lp;
if (child.getLayoutParams() instanceof MarginLayoutParams) {
lp = (MarginLayoutParams) child.getLayoutParams();
} else {
lp = new MarginLayoutParams(child.getLayoutParams());
}
w += lp.leftMargin + lp.rightMargin + child.getMeasuredWidth();
// if (w + getPaddingLeft() + getPaddingRight() < pW) {
// return pW;
// }
}
return (w + getPaddingLeft() + getPaddingRight()) > pW ? pW : (w + getPaddingLeft() + getPaddingRight());
}（2）layout
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int count = getChildCount();
switch (mModel) {
case MODEL_DEFAULT:
layoutDefault(count);
break;
case MODEL_CENTER:
layoutCenter(count);
break;
}
}
//普通模式下的layout
private void layoutDefault(int count) {
int w = getPaddingLeft();
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
MarginLayoutParams lp;
if (child.getLayoutParams() instanceof MarginLayoutParams) {
lp = (MarginLayoutParams) child.getLayoutParams();
} else {
lp = new MarginLayoutParams(child.getLayoutParams());
}
int l = w + lp.leftMargin;
int centerH = (getMeasuredHeight() - getPaddingTop() - getPaddingBottom() - child.getMeasuredHeight()) / 2;
int t = centerH + lp.topMargin;
int r = l + child.getMeasuredWidth();
int b = t + child.getMeasuredHeight();
if (r > getMeasuredWidth()) {
isNeedScroll = true;
} else {
isNeedScroll = false;
}
child.layout(l, t, r, b);
w = r + lp.rightMargin;
if (i == count - 1) {
maxScroll = child.getRight() - getMeasuredWidth();
}
}
}
/居中效果的测量
private void layoutCenter(int count) {
int w = getPaddingLeft();
int h = getPaddingTop();
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
MarginLayoutParams lp;
if (child.getLayoutParams() instanceof MarginLayoutParams) {
lp = (MarginLayoutParams) child.getLayoutParams();
} else {
lp = new MarginLayoutParams(child.getLayoutParams());
}
//lp = (LayoutParams) child.getLayoutParams();
int l = w + lp.leftMargin;
//这里我们处理的原因是，前面我在计算margin的时候用到了除法运算，并且转型成int类型造成了精度损失，那么我们只好控制最后一个Tab的位置了，让其准确的居于父容器的右侧，这样就能解决这个精度丢失的问题。
if (i == count - 1 && getMeasuredWidth() - w > 0) {
l = getMeasuredWidth() - child.getMeasuredWidth() - lp.leftMargin;
}
int centerH = (getMeasuredHeight() - getPaddingTop() - getPaddingBottom() - child.getMeasuredHeight()) / 2;
int t = lp.topMargin + centerH;
int r = l + child.getMeasuredWidth();
int b = t + child.getMeasuredHeight();
//这里要得到我们时候要滑动的值，当子View的宽度大于容器宽度了，我们是需要滑动的。
if (r > getMeasuredWidth()) {
isNeedScroll = true;
} else {
isNeedScroll = false;
}
child.layout(l, t, r, b);
w = r + lp.rightMargin + margin;
//这里我们要得到可滑动的最大距离，方便后面的滑动处理
if (i == count - 1) {
maxScroll = child.getRight() - getMeasuredWidth();
}
}
}第二：我们要处理Tab的点击滑动
这里我是用YzzTabLayout这个控件来处理该任务的
（1）测量和layuout
//这里的测量和layout就是简单的居中效果，不再重复
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (getChildCount() == 0) return;
yzzTab = (YzzTab) getChildAt(0);
measureChildren(widthMeasureSpec, heightMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
int wModel = MeasureSpec.getMode(widthMeasureSpec);
int hModel = MeasureSpec.getMode(heightMeasureSpec);
int w;
int h;
if (wModel == MeasureSpec.EXACTLY) {
w = width;
} else {
w = yzzTab.getMeasuredWidth();
}
if (hModel == MeasureSpec.EXACTLY) {
h = height;
} else {
h = yzzTab.getMeasuredHeight();
}
setMeasuredDimension(w, h);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
if (getChildCount() == 0) return;
MarginLayoutParams lp;
if (yzzTab.getLayoutParams() instanceof MarginLayoutParams) {
lp = (MarginLayoutParams) yzzTab.getLayoutParams();
} else {
lp = new MarginLayoutParams(yzzTab.getLayoutParams());
}
int ll = getPaddingLeft() + lp.leftMargin;
int centerH = (getMeasuredHeight() - getPaddingTop() - getPaddingBottom() - yzzTab.getMeasuredHeight()) / 2;
int tt = centerH + lp.topMargin;
int rr = ll + yzzTab.getMeasuredWidth();
int bb = tt + yzzTab.getMeasuredHeight();
yzzTab.layout(ll, tt, rr, bb);
maxScroll = yzzTab.getMaxScroll();
}
（2）处理Tab的添加修改，这里由Tab这个类来进行管理
public static class Tab {
private TextView textView;
private View customView;
private LayoutParams layoutParams;
public static final int TEXT_SIZE = 15;
public static final int TEXT_COLOR = 0xff333333;
public static final int TEXT_SELECTOR_COLOR = 0xff00ff00;
private static int selectColor = TEXT_SELECTOR_COLOR;
private static int nomalColor = TEXT_COLOR;
//这里初始化textView，设置默认的颜色，字体，style
private Tab(Context context) {
layoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
textView = new TextView(context);
textView.setLayoutParams(layoutParams);
textView.setTextSize(TEXT_SIZE);
textView.setTypeface(Typeface.DEFAULT);
textView.setTextColor(TEXT_COLOR);
tabList.add(this);
tabViews.add(textView);
}
//这里让外部创建Tab对象
public static Tab newTab() {
return new Tab(mContext);
}
//设置字体的颜色
public Tab setText(String textContent) {
if (TextUtils.isEmpty(textContent)) return this;
textView.setText(textContent);
return this;
}
//设置字体的size
public Tab setTextSize(int size) {
textView.setTextSize(size);
return this;
}
//设置color
public Tab setTexrColor(int color) {
nomalColor = color;
textView.setTextColor(color);
return this;
}
//设置字体的style
public Tab setTextStyle(Typeface typeface) {
textView.setTypeface(typeface == null ? Typeface.DEFAULT : typeface);
return this;
}
//设置选中颜色的color
public Tab setSelectColor(int color) {
selectColor = color;
return this;
}
//添加自定义的布局
public void setCustomView(View customView) {
if (customView == null) return;
this.customView = customView;
tabViews.remove(textView);
tabViews.add(customView);
}
//修改tab属性
public void changeFace(int textSize, int textColor, Typeface typeface) {
nomalColor = textColor;
setTextSize(textSize).setTexrColor(textColor).setTextStyle(typeface == null ? Typeface.DEFAULT : typeface);
}
}
（3）处理触摸事件
//默认拦截所有的事件
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return true;
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//这里需要为点击事件设置isClickEvent
firstTouch = event.getRawX();
touchFirst = event.getRawX();
isClickEvent = true;
break;
case MotionEvent.ACTION_MOVE:
//当滑动小于系统最小的滑动距离的时候，认为是点击操作
if (Math.abs(event.getRawX() - touchFirst) < mineScrollDistance) {
isClickEvent = true;
} else if (yzzTab.isNeedScroll) {
//否则我们将沿着手势滑动YzzTab
isClickEvent = false;
if (getScrollX() < 0) scrollTo(0, 0);
if (getScrollX() > maxScroll) scrollTo((int) maxScroll, 0);
isClickEvent = false;
float d = firstTouch - event.getRawX();
if (d < 0 && yzzTab.getScrollX() == 0) {
break;
}
if (yzzTab.getScrollX() < 0) {
yzzTab.scrollTo(0, 0);
break;
}
if (yzzTab.getScrollX() == maxScroll && d > 0) {
break;
}
if (yzzTab.getScrollX() > maxScroll) {
yzzTab.scrollTo((int) maxScroll, 0);
return false;
}
yzzTab.scrollTo((int) (d + yzzTab.getScrollX()), 0);
firstTouch = event.getRawX();
}
break;
case MotionEvent.ACTION_UP:
if (isClickEvent) {
//处理点击事件
clickEvent(event);
}
break;
}
return true;
}
/**
* 处理点击事件
*
* @param event
*/
private void clickEvent(MotionEvent event) {
int size = tabViews.size();
for (int i = 0; i < size; i++) {
View tab = tabViews.get(i);
float x = event.getRawX() + yzzTab.getScrollX();
if (x >= tab.getLeft() && x <= tab.getRight()) {
//该tab点击事件发生
//记录选中的位置记录
lastChosePosition = currentChosePosition;
currentChosePosition = i;
//改变文字的颜色
changeTabTextColor();
//当超过父布局的宽度后，我们移动tab个宽度
if (tab.getLeft() - yzzTab.getScrollX() < 0) {
int scroll = tab.getLeft();
yzzTab.scrollTo(scroll, 0);
}
int ll = tab.getRight() - yzzTab.getMeasuredWidth() - yzzTab.getScrollX();
if (ll > 0 && ll < tab.getMeasuredWidth()) {
int scroll = tab.getRight() - yzzTab.getMeasuredWidth();
yzzTab.scrollTo(scroll, 0);
}
break;
}
}
}private void changeTabTextColor(boolean isFirst) {
//当viewpager的count和tab的个数不等式我们要破异常提醒
if (viewPager != null && viewPager.getAdapter() != null) {
if (viewPager.getAdapter().getCount() != tabViews.size()) {
throw new RuntimeException("the tab's num must equal the viewpager's child num");
}
viewPager.setCurrentItem(currentChosePosition);
}
//下面就是回调事件的调用
if (isFirst && yzzTabSelectListener != null) {
yzzTabSelectListener.onSelect(tabViews.get(currentChosePosition), currentChosePosition);
}
if (!isFirst && yzzTabSelectListener != null) {
if (currentChosePosition == lastChosePosition) {
yzzTabSelectListener.onReSelect(tabViews.get(currentChosePosition), currentChosePosition);
} else {
yzzTabSelectListener.onSelect(tabViews.get(currentChosePosition), currentChosePosition);
yzzTabSelectListener.onUnSelect(tabViews.get(lastChosePosition), lastChosePosition);
}
}
DrawHelper.changeTextColor(yzzTab, isNeedIndicator, paint);
}
//这里我们要写一个方法专门为ViewPager的切换来改变Tab，防止混乱
private void changeTabTextColorByViewPager() {
if (yzzTabSelectListener != null) {
if (currentChosePosition == lastChosePosition) {
yzzTabSelectListener.onReSelect(tabViews.get(currentChosePosition), currentChosePosition);
} else {
yzzTabSelectListener.onSelect(tabViews.get(currentChosePosition), currentChosePosition);
yzzTabSelectListener.onUnSelect(tabViews.get(lastChosePosition), lastChosePosition);
}
}
DrawHelper.changeTextColor(yzzTab, isNeedIndicator, paint);
}
//这里在第一次的时候我们需要判断一下，否则出现第一次tab未选中的现象
private void changeTabTextColor() {
changeTabTextColor(false);
}提供两种形式去添加Tab形式和TabLayout相似
public YzzTabLayout setTab(Tab tab) {
return this;
}
public YzzTabLayout setTabList(List<String> tabList) {
if (tabList == null) return this;
int size = tabList.size();
for (int i = 0; i < size; i++) {
if (TextUtils.isEmpty(tabList.get(i))) return this;
Tab.newTab().setText(tabList.get(i));
}
return this;
}
public void changeTabView(int textSize, int textColor, Typeface typeface) {
if (tabList == null) return;
int size = tabList.size();
for (int i = 0; i < size; i++) {
tabList.get(i).changeFace(textSize, textColor, typeface);
}
}
public void commit() {
yzzTab.removeAllViews();
int count = tabViews.size();
for (int i = 0; i < count; i++) {
yzzTab.addView(tabViews.get(i));
if (i == 0) changeTabTextColor(true);
}
// if (count > 0)
// yzzTab.setCurrentPosition(currentChosePosition, paint);
}（4）绘制指示器，由YzzTab来完成
protected void setCurrentPosition(int position, Paint paint) {
currentPosition = position;
linePaint = paint;
invalidate();
}
private void drawLine(Canvas canvas) {
if (linePaint == null) return;
View tab = getChildAt(currentPosition);
fx = tab.getLeft();
sx = fx+tab.getMeasuredWidth();
int fy = getMeasuredHeight();
int sy = fy;
canvas.drawLine(fx, fy, sx, sy, linePaint);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawLine(canvas);
}
以上几个步骤，我们大致就完成了该TabLayout的定义，由于时间关系，添加更多的功能我就以后再做，后面我将实时更新音视频处理方面的文章。github地址：https://github.com/yzzAndroid/YzzTab
扫一扫
952
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
