底部导航栏选中图标上方弧形动画及自定义视图实现咨询

一、自定义View绘制弧形区域 #

• 新建继承自View的自定义视图，重写onDraw()方法
• 用Path构建凸起弧形：以选中项的中心为顶点，左右取固定长度（或按item宽度比例）作为弧的两个端点，通过quadTo()绘制二次贝塞尔曲线，形成平滑凸起
• 绘制时动态计算弧的位置和尺寸：根据当前选中项的中心坐标，实时调整Path的路径，再用Paint填充颜色

二、实现弧形平滑过渡动画 #

• 维护当前选中项的中心x坐标、目标选中项的中心x坐标，以及弧的高度参数
• 使用ValueAnimator创建动画：
  • 针对x坐标，从旧位置过渡到新位置，实现弧的平移
  • 针对弧的高度，从0过渡到目标高度（选中时）或从目标高度过渡到0（取消选中时）
• 在动画更新回调中，更新弧的顶点坐标和高度，调用invalidate()触发重绘，实现平滑动画

三、与底部导航栏绑定联动 #

• 将自定义弧形View布局在底部导航栏的上方，调整层级确保不遮挡图标（可通过padding或translationY微调位置）
• 监听底部导航栏的选中事件（如OnNavigationItemSelectedListener），当选中项切换时：
  • 获取新选中项的中心x坐标（通过导航栏子View的getLeft()、getRight()计算）
  • 启动弧形的平移+高度动画

四、细节优化 #

• 快速切换处理：动画未完成时切换选中项，先调用animator.cancel()取消当前动画，再启动新动画，避免动画冲突
• 屏幕适配：通过导航栏总宽度、item数量动态计算每个item的中心坐标，不写死固定值
• 视觉增强：给绘制弧形的Paint设置setShadowLayer()添加阴影，提升凸起的立体感

内容的提问来源于stack exchange，提问作者Ahmed Rabee