Android选中突出背景效果的底部导航栏

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

就想着 这个应该怎么做呢,我记得类似咸鱼那种的是中间突出,不像这种 是选中哪个,哪个就突出

第一种方法

简单快捷,让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);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值