时间戳

首页 > 解决方案 > 如何使用底部导航视图更改选项卡切换之间的动画？

android-architecture-navigation - 如何使用底部导航视图更改选项卡切换之间的动画？

问题描述

我刚刚更新了我的代码以使用最新的 2.4.0-alpha05 作为导航组件，并且我在多个堆栈之间进行了自定义导航，我的主导航图就像我找到的文档一样。

<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:startDestination="@+id/accounts"
    android:id="@+id/bottom_nav">
    <inclue app:graph="@navigation/accounts_tab_nav"/>
    <include app:graph="@navigation/contact_tab_nav" />
    <include app:graph="@navigation/profile_tab_nav" />
</navigation>

我的大多数堆栈都通过从右到左的幻灯片进行动画处理。看起来当我在第二个屏幕上时，比如说配置文件屏幕，然后切换到第一个选项卡，它会触发在导致配置文件选项卡中的第二个屏幕的操作中定义的popEnteren 。popExitAnim像这样：

<fragment
    android:id="@+id/profileMain"
    android:name="com.app.ProfileFragment"
    tools:layout="@layout/fragment_profile">
    <action
        android:id="@+id/action_profileMain_to_secondFragment"
        app:destination="@id/secondFragment"
        app:enterAnim="@anim/slide_in_right"
        app:exitAnim="@anim/slide_out_left"
        app:popEnterAnim="@anim/slide_in_left"
        app:popExitAnim="@anim/slide_out_right" />
</fragment>

但显然我希望在切换标签时使用（默认）淡入淡出动画。那么我该怎么做呢？

而且我想在重新选择选项卡时弹出到堆栈的根目录。但我可能必须自己这样做？

标签： android-architecture-navigation

解决方案

不要使用 setupWithNavController 函数，而是按照这种方式。

首先，创建包含如下所示动画的 NavOptions。

val options = NavOptions.Builder()
       .setLaunchSingleTop(true)
       .setEnterAnim(R.anim.enter_from_bottom)
       .setExitAnim(R.anim.exit_to_top)
       .setPopEnterAnim(R.anim.enter_from_top)
       .setPopExitAnim(R.anim.exit_to_bottom)
       .setPopUpTo(navController.graph.startDestination,false)
       .build();

然后使用 setOnNavigationItemSelectedListener 来导航这样的动画。

bottomNavigationView.setOnNavigationItemSelectedListener 
    { item ->
    when(item.itemId) {
        R.id.fragmentFirst -> {
       navController.navigate(R.id.fragmentFirst,null,options)
        }
        R.id.fragmentSecond -> {
        navigate(R.id.fragmentSecond,null,options)
        }
        R.id.fragmentThird ->  {
       navController.navigate(R.id.fragmentThird,null,options)
        }
    }
}

最后，您应该防止相同的项目选择情况，以便您可以添加以下代码。

bottomNavigationView.setOnNavigationItemReselectedListener
 { item ->
    return@setOnNavigationItemReselectedListener
 }

我在项目中使用了类似的 bottomNavigation 来为页面转换添加动画。我希望它有所帮助。

推荐阅读