【andorid进阶篇之View-自定义tablayout】dacaoyuan的博客-

啥话不说，先亮出效果图：

最近公司UI设计了一个这样的tab切换的样式，刚一看到UI的设计图，感觉还是不错滴。但是几秒钟后，下意识想到，这个效果，Android自带的 tablayout 控件应该并不能实现这效果呢。顿时一脸茫然，我还要自定义一个不成！但是这个弧度怎么搞…

此时有的小伙伴可能会想，自定义view太麻烦，不如让UI直接把这个弧度切出来，不是一共就三个tab项嘛，Textview，ImageView… 这样横着排起来，然后做适当的显示和隐藏不就行啦。

是的，确实是可以，但是作为一个优秀的开发人员。我们还是要优选自定义view滴。

思路分析

（1） 由效果图，我们很容易分析出，不管tab项一共几个，无非就这三种情况。
草图如下：

（2） 无论是哪种情况，首先我们需要画出一个背景矩形，这个比较简单。

（3）下面就是曲线的画法，草图中也已经标注了，很明显我需要2个控制点，那就需要用到三阶贝塞尔曲线啦！cubicTo

（4）画出图形后，点击事件如何响应处理呢？ 我们在 onTouchEvent 是能获取到点击控件后x，y的坐标，判断x的坐标是在哪个tab项的范围内，我们就认为点击了那个tab项，就可以了。

（5）控件的圆角的如何实现呢？canvas的 范围裁切 就可以啦。

代码实现

思路梳理好了，那我们就写代码吧：
情况一（关键代码）：

 //最左边的图形             Path pathLeft = new Path();               pathLeft.lineTo(textWidth, 0);              pathLeft.cubicTo(textWidth + arcControlX, arcControlY, textWidth + arcWidth - arcControlX, viewHeight - arcControlY, textWidth + arcWidth, viewHeight);              pathLeft.lineTo(0, viewHeight);              pathLeft.lineTo(0, 0);               paint.setColor(selectColor);             canvas.drawPath(pathLeft, paint); 

情况二（关键代码）：

 //中间的图形             Path pathCenter = new Path();             pathCenter.moveTo(tabPosition * textWidth + tabPosition * arcWidth, 0);             pathCenter.cubicTo(tabPosition * textWidth + tabPosition * arcWidth - arcControlX, arcControlY, tabPosition * textWidth + tabPosition * arcWidth - arcWidth + arcControlX, viewHeight - arcControlY, tabPosition * textWidth + tabPosition * arcWidth - arcWidth, viewHeight);             pathCenter.lineTo(tabPosition * textWidth + tabPosition * arcWidth + textWidth + arcWidth, viewHeight);             pathCenter.cubicTo(tabPosition * textWidth + tabPosition * arcWidth + textWidth + arcWidth - arcControlX, viewHeight - arcControlY, tabPosition * textWidth + tabPosition * arcWidth + textWidth + arcControlX, arcControlY, tabPosition * textWidth + tabPosition * arcWidth + textWidth, 0);             pathCenter.lineTo(tabPosition * textWidth + tabPosition * arcWidth, 0);               paint.setColor(selectColor);             canvas.drawPath(pathCenter, paint); 

情况三（关键代码）：

  //最右边的图形             Path pathRight = new Path();             pathRight.moveTo(viewWidth, 0);              pathRight.lineTo(viewWidth - textWidth, 0);               pathRight.cubicTo(viewWidth - textWidth - arcControlX, arcControlY, viewWidth - textWidth - arcWidth + arcControlX, viewHeight - arcControlY, viewWidth - textWidth - arcWidth, viewHeight);              pathRight.lineTo(viewWidth, viewHeight);              pathRight.lineTo(viewWidth, 0);              paint.setColor(selectColor);             canvas.drawPath(pathRight, paint); 

tabtext的绘制（关键代码）：

 for (int i = 0; i < tabTextList.size(); i++) {             String strTabText = tabTextList.get(i);             Rect rectText = new Rect();             textPaint.getTextBounds(strTabText, 0, strTabText.length(), rectText);             int strWidth = rectText.width();             int strHeight = rectText.height();             if (i == 0) {                 canvas.drawText(strTabText, (textWidth + arcWidth / 2) / 2 - strWidth / 2, viewHeight / 2 + strHeight / 2, textPaint);             } else if (i == tabTextList.size() - 1) {                 canvas.drawText(strTabText, viewWidth - (textWidth + arcWidth / 2) / 2 - strWidth / 2, viewHeight / 2 + strHeight / 2, textPaint);              } else {                 canvas.drawText(strTabText, textWidth * i + arcWidth * (i - 1) + (textWidth + 2 * arcWidth) / 2 - strWidth / 2, viewHeight / 2 + strHeight / 2, textPaint);             }          } 

tab点击处理（关键代码）：

@Override     public boolean onTouchEvent(MotionEvent event) {         boolean isHandleClick = false;//是否处理点击事件          switch (event.getAction()) {             case MotionEvent.ACTION_DOWN:                 float x = event.getX();                 float y = event.getY();                 System.out.println("YPKTabLayoutView.onTouchEvent x=" + x + " y=" + y);                 for (int i = 0; i < tabNumber; i++) {                     if (x <= ((i + 1) * textWidth + i * arcWidth + arcWidth / 2)) {//点击的第一个按钮                         tabPosition = i;                          if (onTabClickListener != null) {                             onTabClickListener.tabSelectedListener(tabPosition);                         }                          invalidate();                         isHandleClick = true;                          break;                     }                 }                  return isHandleClick;               case MotionEvent.ACTION_MOVE:                 break;             case MotionEvent.ACTION_UP:                 break;         }         return super.onTouchEvent(event);     } 

远程依赖使用

一： 添加依赖：

Add it in your root build.gradle at the end of repositories:

allprojects {   repositories {   ...   maven { url 'https://jitpack.io' }  }  }  

Add the dependency

dependencies {     implementation 'com.github.dacaoyuan:YPKTabDemo:1.0.0'  } 

二：在xml布局中添加

 <com.ypk.library.view.YPKTabLayoutView         android:id="@+id/mYPKTabLayoutView"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_margin="10dp"         app:view_bg_corners="0"         app:arcControlX="30" /> 

三：代码中

val tabTextList: MutableList<String> = ArrayList<String>()          tabTextList.add("推荐学习");         tabTextList.add("企业学院");         tabTextList.add("我的关注");         mYPKTabLayoutView.setTabTextList(tabTextList);          mYPKTabLayoutView.addTabSelectedListener { tabPosition ->             val makeText =                 Toast.makeText(                     this@MainActivity,                     "点击了第" + tabPosition + "项",                     Toast.LENGTH_SHORT                 )             makeText.setGravity(Gravity.CENTER, 0, 0);             makeText.show();         } 

属性说明：

文章到这里就已经说完啦，如果对你有些帮助的话，顺手也给点个赞吧，十分感谢！整理这篇文章快用2个星期时间了。如果你对实现思路有更好的建议，欢迎留言，指正。

源码地址