今天在群里看到一个底部导航选中突出效果像这样
就想着 这个应该怎么做呢,我记得类似咸鱼那种的是中间突出,不像这种 是选中哪个,哪个就突出
第一种方法
简单快捷,让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);