今天在群里看到一个底部导航选中突出效果像这样

就想着 这个应该怎么做呢,我记得类似咸鱼那种的是中间突出,不像这种 是选中哪个,哪个就突出
第一种方法
简单快捷,让UI帮忙切几张带突出背景的图片,
选中切换图片简单粗暴
在群里找小伙伴要了UI的切图一看给的6张图片一样大小,也不带突出背景
于是想着有没有第二种方法实现
百度了许久也许是我找的方法不对,也许是大家都没遇到这样的UI。
怎么办,自己想想,静下心来看UI效果,发现突出的地方有点像贝塞尔曲线
再细细分析一下,如果突出的是贝塞尔曲线那么如何画出一条直线,固定的位置突出呢
贝塞尔曲线是Path 里面的api,而Path 是可以连续画线的,
那么就好实现了,前面直接设置起点
mPath.moveTo(0, 0);//起始点
然后中间是直接的直接调用
mPath.lineTo(x,y);
需要突出就调用二阶贝塞尔曲线
mPath.quadTo(x1,y1,x2,y2);
果然可行,画出来效果是这样

不错 实现第一步了,但是仔细观察发现 人家下面是有白色背景的,突出的地方也要白色背景,怎么搞呢!
又去查了下Path 和Paint Api 发现 有一种方法可以实现这样的效果
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
画笔要设置成 这种风格的
mPath.lineTo(getWidth(), getHeight());
mPath.lineTo(0, getHeight());
mPath.close(); //封闭path路径
Path路径全部占满
然后就可以实现效果了
记得把画笔颜色设置成白色的哦
mPaint.setColor(Color.WHITE);
果然可行!
一顿布局出来的效果是这样的

本文介绍了如何在Android中实现底部导航栏的选中突出效果,通过分析UI并利用贝塞尔曲线来绘制突出部分。首先尝试使用图片切换,但未达到预期效果。接着使用Path和Paint API,通过画出贝塞尔曲线来创建突出背景,并调整画笔样式以填充白色背景。在遇到四阶贝塞尔曲线限制后,改为使用三个二阶贝塞尔曲线实现。最终通过计算各个控制点的位置,成功实现动态切换选中状态的效果,并提供了完整代码示例。
最低0.47元/天 解锁文章
1889

被折叠的 条评论
为什么被折叠?



