如何在Android底部导航栏实现LinkedIn同款图标交互效果

LinkedIn的底部导航点击效果本质是「选中/未选中态样式切换」加「轻量点击动效」，可以通过以下几种方式实现：

基础静态样式切换（使用原生控件自带能力） #

• 首先为每个导航栏图标准备选中态、未选中态两套资源，优先用矢量图保证清晰度
• 为每个图标创建Selector drawable，示例代码：

<!-- res/drawable/nav_home_selector.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_home_selected" android:state_checked="true"/>
    <item android:drawable="@drawable/ic_home_normal" android:state_checked="false"/>
</selector>

• 创建底部导航的menu资源，将每个item的android:icon属性指定为对应的selector drawable
• 在布局中引入BottomNavigationView（或Material3的NavigationBar），绑定上述menu资源，控件会自动根据选中状态切换图标样式，无需额外代码处理

增加点击动效（匹配LinkedIn的细微反馈效果） #

如果需要实现点击时的缩放、弹跳微动效，可以通过属性动画实现，示例Kotlin代码：

bottomNav.setOnItemSelectedListener { menuItem ->
    // 获取点击的导航项对应的View
    val menuView = bottomNav.getChildAt(0) as BottomNavigationMenuView
    val clickedItem = menuView.getChildAt(menuItem.order)
    
    // 实现轻量缩放回弹效果
    ObjectAnimator.ofFloat(clickedItem, "scaleX", 1f, 0.88f, 1f).apply {
        duration = 160
        interpolator = OvershootInterpolator(1.2f)
    }.start()
    ObjectAnimator.ofFloat(clickedItem, "scaleY", 1f, 0.88f, 1f).apply {
        duration = 160
        interpolator = OvershootInterpolator(1.2f)
    }.start()
    
    // 处理对应页面切换逻辑
    true
}

可以通过调整缩放比例、动画时长、插值器参数，控制动效的幅度和手感，匹配LinkedIn的轻量化交互风格。

更复杂的图标变换效果 #

如果需要实现图标内部元素的位移、渐变等细腻动画，可以使用AnimatedVectorDrawable（动画矢量图），将selector中的资源替换为对应的动画矢量文件，选中时主动触发动画即可实现更精细化的样式变化效果。

内容的提问来源于stack exchange，提问作者Amit Kumar