(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”
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此我收集整理了一份《2024年Android移动开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
[外链图片转存中…(img-gvOweIxk-1715418871607)]
[外链图片转存中…(img-Zq0a0jaI-1715418871609)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!