前言
啥话不说，先亮出效果图：
最近公司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);步骤说明：
- 首先我们的起始点坐标是(0，0)，到坐标(textWidth, 0) 画一条直线；
- 然后三阶贝塞尔曲线，2个控制点的坐标1(textWidth + arcControlX，arcControlY)，坐标2(textWidth + arcWidth - arcControlX，viewHeight - arcControlY)，结束的坐标(textWidth + arcWidth，viewHeight)；
- 最后画直线到坐标点(0, viewHeight)，再到最终的原点(0, 0)。
到这里一个封闭的路径，就画好啦。情况二和情况三也是同样的道理，我也不再废话了。
情况二(关键代码)：
//中间的图形 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; itab点击处理(关键代码)：
@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步骤说明：
我们在 onTouchEvent方法中， 首先获取到点击控件后x，y坐标，然后for循环判断x的坐标是在哪个tab项的范围内，最后在哪个范围内，我们就认为点击了那个tab项，回调对应的 tabPosition 就可以了。
远程依赖使用
一：添加依赖
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.2'}二：在xml布局中添加
三：代码中
val tabTextList: MutableList = ArrayList() 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(); }属性说明
文章到这里就已经说完啦，如果你对实现思路有更好的建议，欢迎留言，指正。
源码地址：
