时间戳

首页 > 解决方案 > 为 BottomNavigationView 上的选定图标设置动画

android - 为 BottomNavigationView 上的选定图标设置动画

问题描述

我正在考虑为当前在猫头鹰应用程序中选择一个标签时，在底部范围内使用的vectordrawables动画。然而，与工具栏视图不同的是，当我使用 MenuItem.getIcon() 获取图标时，将其转换为 AnimatedVectorDrawable 并调用 animate() 方法，没有动画。

我想知道我是否可以做些什么来实现这一点，这是否可能包含在稳定的 Material Components 库中，或者我是否最好创建一个扩展 BottomNavigationView 类的自定义视图。

标签： androidmaterial-designbottomnavigationviewmaterial-componentsmaterial-components-android

解决方案

我们可以使用以下代码为底部导航视图图标设置动画：

bottomNavigationId.menu.getItem(i).icon  =  
AnimatedVectorDrawableCompat.create(this, R.drawable.ic_settings_active_avd)
val anim = bottomNavigationId.menu.getItem(i).icon as Animatable
anim.start()

但这不起作用 api > 24 因此，更好的方法是创建一个 AnimatedStateListDrawable，其中 AVD 是用于 android:state_checked="true" 的转换。然后，您可以将其设置为 MenuItem 上的可绘制对象，并在选择该项目时运行 AVD。

例如：

<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    tools:targetApi="16">
    <item android:id="@+id/state_on"
       android:drawable="@drawable/ic_settings_active"
       android:state_checked="true"/>
    <item android:id="@+id/state_off"
       android:drawable="@drawable/ic_settings_inactive"/>
    <transition
       android:drawable="@drawable/ic_settings_active_avd"
       android:fromId="@id/state_off"
       android:toId="@id/state_on" />
  </animated-selector>

将此动画状态列表绘制为菜单中的图标

 <?xml version="1.0" encoding="utf-8"?>
 <menu xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
       android:id="@+id/item_settings_fragment"
       android:icon="@drawable/anim_settings"
       android:title="@string/settings"
      app:showAsAction="always" />
       ...
    </menu>

结帐下面的链接以完全理解带有动画绘图的底部导航视图

https://medium.com/@naththeprince/delightful-animations-in-android-d6e9c62a23d3

推荐阅读