Question

当我在this Material Product Study for the Owl app中选择一个选项卡时，我正在为BottomNavigationView中当前使用的VectorDrawables设置动画。但是，与工具栏视图不同，当我使用MenuItem.getIcon（）获取图标，将其转换为AnimatedVectorDrawable并调用animate（）方法时，没有动画。

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

Answer 1

我们可以使用以下代码为bottomnavigationview图标设置动画：

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>

在下面的链接中结帐，可全面了解带有动画可绘制对象的bottomnavigationview

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

Answer 2

当前无法在BottomNavigationView中使用动画图标。我们已经在内部提交了此功能请求，但已取消了对其的优先处理。

如果您想增加支持，我们很高兴在https://github.com/material-components/material-components-android接受公关

Answer 3

使用Shape Shifter使动画矢量可绘制
在build.gradle（Module：app）中添加此行

defaultConfig { vectorDrawables.useSupportLibrary = true }

制作Drawable选择器文件-selector_search.xml

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

AVD搜索是动画矢量可绘制文件 icon_search 是普通的可绘制文件

将此可绘制选择器文件用作菜单中的图标

<?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/navigation_search"
       android:icon="@drawable/selector_search"
       android:title="@string/search"
       />
</menu>

享受

在BottomNavigationView上对选定的图标进行动画处理

3 个答案: