点击上方 "程序员小乐"关注, 星标或置顶一起成长
后台回复“大礼包”有惊喜礼包!
关注订阅号「程序员小乐」,收看更多精彩内容
每日英文
I’m grateful for the dark night coming,no matter how failed I am today;A new day remains to wait for my exertion.
感谢黑夜的来临,我知道今天不论有多失败,全新的明天仍然等待我来证明自己。
每日掏心话
有人浑身是伤,说,别管我,老子就想死扛。有人满脸是泪,说,去他妈,老子不想要了。坚持的咬住牙,但得失未必成正比。放弃的松口气,但回头也许来不及。坚持和放弃,都不会绝对正确。最恨恨不过一句,逼不得已;大大不过一句,老子乐意。
来自:da_caoyuan | 责编:乐乐
链接:me.csdn.net/da_caoyuan
程序员小乐(ID:study_tech)第 1087 次推文
往日回顾:“12306”的架构到底有多牛逼?
正文
/ 前言 /
啥话不说,先亮出效果图:
最近公司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的 范围裁切 就可以啦。
在公众号程序员小乐回复“offer”,获取算法面试题和答案惊喜礼包。
/ 代码实现 /
思路梳理好了,那我们就写代码吧:
情况一(关键代码):
//最左边的图形
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
PS:欢迎在留言区留下你的观点,一起讨论提高。如果今天的文章让你有新的启发,欢迎转发分享给更多人。
猜你还想看
BAT等大厂Java面试经验总结
别找了,想获取 Java大厂面试题学习资料,扫下方二维码回复「手册」就好了。
嘿,你在看吗?