前言

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

最近公司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; 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);
    }

步骤说明：

我们在 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布局中添加

<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();
        }

属性说明

文章到这里就已经说完啦，如果你对实现思路有更好的建议，欢迎留言，指正。

源码地址：

https://github.com/dacaoyuan/YPKTabDemo

最后

在这里我也分享一份由几位大佬一起收录整理的Android学习PDF+架构视频+面试文档+源码笔记，高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料

这些都是我闲暇还会反复翻阅的精品资料。可以有效的帮助大家掌握知识、理解原理。当然你也可以拿去查漏补缺，提升自身的竞争力。

如果你有需要的话，可以 点这领取

喜欢本文的话，不妨顺手给我点个小赞、评论区留言或者转发支持一下呗~

Android开发：自定义TabLayout，神奇效果竟是如此简单

前言

思路分析

代码实现

远程依赖使用

最后

猜你喜欢