Android底部导航栏突出（贝塞尔曲线）
项目中底部导航栏有UI定制需求，效果如下
在此记录一下实现方案
1.首先用组合控件的方式把图中图标按位置摆放好
xml文件如下
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="71dp" android:clipChildren="false" android:paddingBottom="10dp" android:background="#00000000" android:gravity="bottom" xmlns:app="http://schemas.android.com/apk/res-auto"> <ImageView android:id="@+id/first" android:layout_width="22dp" android:layout_height="22dp" android:layout_weight="1" android:src="@drawable/tab_home_selected2x"/> <ImageView android:id="@+id/second" android:layout_width="22dp" android:layout_height="22dp" android:layout_weight="1" android:src="@drawable/tab_find_unselected2x"/> <ImageView android:layout_width="44dp" android:layout_height="44dp" android:src="@drawable/plus" android:layout_marginBottom="9dp" android:id="@+id/centerIcon"/> <ImageView android:id="@+id/third" android:layout_width="22dp" android:layout_height="22dp" android:layout_weight="1" android:src="@drawable/tab_message_unselected2x" /> <ImageView android:id="@+id/forth" android:layout_width="22dp" android:layout_height="22dp" android:layout_weight="1" android:src="@drawable/tab_my_unselected2x"/> </LinearLayout>
Android studio内渲染效果
此处记得把最外层的LinearLayout背景设置为透明：android:background="#00000000"
2.自定义组合控件BottomNavigationBar继承自LinearLayout，代码如下：
public class BottomNavigationBar extends LinearLayout implements View.OnClickListener { private Paint paint; private Path path; private float width; private int currentPosition = 0; private onBottomNavClickListener listener; // private String[] tabText = {"打卡", "发现", "消息", "我的"}; //未选中icon private int[] normalIcon = {R.drawable.tab_home_unselected2x, R.drawable.tab_find_unselected2x, R.drawable.tab_message_unselected2x, R.drawable.tab_my_unselected2x}; //选中时icon private int[] selectIcon = {R.drawable.tab_home_selected2x, R.drawable.tab_find_selected2x, R.drawable.tab_message_selected2x, R.drawable.tab_my_selected2x}; private ImageView img1, img2, imgCenter, img3, img4; private ViewPager viewPager; public BottomNavigationBar(Context context) { super(context); init(context); } public BottomNavigationBar(Context context, @Nullable AttributeSet attrs) { super(context, attrs); init(context); } private void init(Context context) { paint = new Paint(Paint.ANTI_ALIAS_FLAG); path = new Path(); paint.setStyle(Paint.Style.FILL_AND_STROKE); paint.setColor(Color.WHITE); View view = LayoutInflater.from(context).inflate(R.layout.bottom_navigator, this); img1 = view.findViewById(R.id.first); img2 = view.findViewById(R.id.second); imgCenter = view.findViewById(R.id.centerIcon); img3 = view.findViewById(R.id.third); img4 = view.findViewById(R.id.forth); setWillNotDraw(false); //2、通过Resources获取 DisplayMetrics dm = getResources().getDisplayMetrics(); width = dm.widthPixels; img1.setOnClickListener(this::onClick); img2.setOnClickListener(this::onClick); img3.setOnClickListener(this::onClick); img4.setOnClickListener(this::onClick); imgCenter.setOnClickListener(this::onClick); } @Override protected void onDraw(Canvas canvas) { paint.setColor(getResources().getColor(R.color.White)); paint.setShadowLayer(30,0,20,Color.BLACK); path.moveTo(0, dip2px(28)); path.lineTo(dip2px(150), dip2px(28)); path.quadTo(width / 2 - dip2px(30), dip2px(28), width / 2 - dip2px(25), dip2px(18)); path.quadTo(width / 2, -45, width / 2 + dip2px(25), dip2px(18)); path.quadTo(width / 2 + dip2px(30), dip2px(28), width - dip2px(150), dip2px(28)); path.lineTo(width, dip2px(28)); path.lineTo(width, dip2px(71)); path.lineTo(0, dip2px(71)); path.close(); canvas.drawPath(path, paint); super.onDraw(canvas); } /** * 根据屏幕的分辨率从 dp 的单位 转成为 px(像素) */ private int dip2px(float dpValue) { final float scale = getResources().getDisplayMetrics().density; return (int) (dpValue * scale + 0.5f); } public void setUpWithViewPager(ViewPager viewPager) { this.viewPager = viewPager; } @Override public void onClick(View v) { switch (v.getId()) { case R.id.first: if (currentPosition == 0) break; setUnSelect(currentPosition); currentPosition = 0; viewPager.setCurrentItem(currentPosition,true); img1.setImageResource(selectIcon[currentPosition]); break; case R.id.second: if (currentPosition == 1) break; setUnSelect(currentPosition); currentPosition = 1; viewPager.setCurrentItem(currentPosition,true); img2.setImageResource(selectIcon[currentPosition]); break; case R.id.third: if (currentPosition == 2) break; setUnSelect(currentPosition); currentPosition = 2; viewPager.setCurrentItem(currentPosition,true); img3.setImageResource(selectIcon[currentPosition]); break; case R.id.forth: if (currentPosition == 3) break; setUnSelect(currentPosition); currentPosition = 3; viewPager.setCurrentItem(currentPosition,true); img4.setImageResource(selectIcon[currentPosition]); break; case R.id.centerIcon: if (listener != null) listener.onCenterIconClick(); break; } } private void setUnSelect(int position) { switch (position) { case 0: img1.setImageResource(normalIcon[0]); break; case 1: img2.setImageResource(normalIcon[1]); break; case 2: img3.setImageResource(normalIcon[2]); break; case 3: img4.setImageResource(normalIcon[3]); break; } } public interface onBottomNavClickListener { void onCenterIconClick(); } public void setOnListener(onBottomNavClickListener listener){ this.listener = listener; } }
其中只需关注和UI有关的方法（其余方法用于配合ViewPager），也就是init方法、dip2px方法和onDraw方法
init初始化paint、ptah，并获取屏幕宽度，为onDraw方法画贝塞尔曲线做准备
onDraw方法绘制按照xml中的尺寸绘制path，由于xml使用的是dp，而实际绘制时需要以px（像素）为单位，所以需要通过dip2px
进行转换，注意paint.setShadowLayer(30,0,20,Color.BLACK);用于设置阴影，否则颜色相近的情况下边界不明显
path.quadTo()方法用于绘制贝塞尔曲线，其中的坐标参数是我根据UI给的效果图手动计算滴
不了解path.quadTo()的同学可以戳这个传送门
还有一件事，由于viewgroup默认不触发onDraw方法，需要加一句：setWillNotDraw(false);（我的代码中在init方法里面）
最终效果：
拿下~
最最最最后一句，使用的时候不能直接把上方的布局放在BottomNavigationBar之上，因为BottomNavigationBar的高度是按最高的地方算的，直接放上去会出现突起的地方左右侧是空白，建议使用相对布局，然后上方的控件使用marginBottom来卡距离~
有帮助的话记得点个赞~
