近日，据统计，抖音6月在苹果和谷歌两大系统中的营收继续稳居全球第一，当月实现营收逾9070万美元，是去年同期的8.3倍，其中约89%来自于国内市场，约6%来自美国市场。
本篇文章来自
da_caoyuan
的投稿，带大家一起实现了一个自定义的TabLayout，相信会对大家有所帮助！同时也感谢作者贡献的精彩文章！
da_caoyuan
的博客
地址
：
https://me.csdn.net/da_caoyuan
啥话不说，先亮出效果图：
最近公司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;
tabTextColor
tab的文字颜色
tabTextSize
tab文字大小（单位：sp）
tab_view_bg
控件背景色
select_tab_color
选中后tab的背景色
arcControlX
值越大，曲线弧度越大（单位：px）
view_bg_corners
控件的圆角大小（单位：dp）
文章到这里就已经说完啦，如果你对实现思路有更好的建议，欢迎留言，指正。
源码
地址
：
https://github.com/dacaoyuan/YPKTabDemo
返回搜狐，查看更多
责任编辑：
平台声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
