Question

我已成功将底部导航与最新的Android体系结构导航组件集成在一起。以下是我完整的代码。

导航

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mobile_navigation"
    app:startDestination="@+id/navigation_home">

    <fragment
        android:id="@+id/navigation_home"
        android:name="in.zedone.bottomsample.ui.home.HomeFragment"
        android:label="@string/title_home"
        tools:layout="@layout/fragment_home" />

    <fragment
        android:id="@+id/navigation_saloons"
        android:name="in.zedone.bottomsample.ui.saloons.SaloonsFragment"
        android:label="@string/title_saloon"
        tools:layout="@layout/fragment_saloons" />

    <fragment
        android:id="@+id/navigation_offers"
        android:name="in.zedone.bottomsample.ui.offers.OffersFragment"
        android:label="@string/title_offer"
        tools:layout="@layout/fragment_offers" />

    <fragment
        android:id="@+id/navigation_account"
        android:name="in.zedone.bottomsample.ui.account.AccountFragment"
        android:label="@string/title_account"
        tools:layout="@layout/fragment_account" />

</navigation>

BottomNavigationView

<com.google.android.material.bottomnavigation.BottomNavigationView
     android:id="@+id/nav_view"
     android:layout_width="0dp"
     android:layout_height="wrap_content"
     android:layout_marginStart="0dp"
     android:layout_marginEnd="0dp"
     android:background="?android:attr/windowBackground"
     app:labelVisibilityMode="labeled"
     app:itemTextAppearanceActive="@style/BottomNavigationView.Active"
     app:itemTextAppearanceInactive="@style/BottomNavigationView"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintLeft_toLeftOf="parent"
     app:layout_constraintRight_toRightOf="parent"
     app:menu="@menu/bottom_nav_menu" />

MainActivity

BottomNavigationView navView = findViewById(R.id.nav_view);
// Passing each menu ID as a set of Ids because each
// menu should be considered as top level destinations.
AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
                R.id.navigation_home, R.id.navigation_saloons, R.id.navigation_offers,R.id.navigation_account)
                .build();
NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
NavigationUI.setupWithNavController(navView, navController);

现在如何在底部导航中的每个选项卡/片段上添加过渡/动画？

Answer 1

不要使用 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 -> {
                navController.navigate(R.id.fragmentSecond,null,options)
            }
            R.id.fragmentThird -> {
                navController.navigate(R.id.fragmentThird,null,options)
            }
        }
         true
    }

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

bottomNavigationView.setOnNavigationItemReselectedListener { item ->
        return@setOnNavigationItemReselectedListener

我在我的项目中使用了底部导航来为页面过渡添加动画。我希望它有所帮助。

Answer 2

它也与 BottomNavigationView 的兄弟片段一起工作（JetPack 导航组件）

// FragmentA.kt
override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)

  exitTransition = MaterialFadeThrough()
}


// FragmentB.kt
override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)

  enterTransition = MaterialFadeThrough()
}

Answer 3

您也可以通过在每个 setupWithNavController 中覆盖 onCreateAnimation() 并检查您是否使用 {{ 进入或退出 Fragment 来保持 Fragment 1}} 参数，然后使用 enter 创建适当的 Animation。

AnimationUtils.loadAnimation(context, animationId)

编辑作为对 iloo 的回应：

根据 Material Design (https://material.io/components/bottom-navigation#behavior)，您一开始不应该这样做，但我想它仍然可以实现。

由于使用 override fun onCreateAnimation(transit: Int, enter: Boolean, nextAnim: Int): Animation? { return if (enter) { AnimationUtils.loadAnimation(context, R.anim.fade_in) } else { AnimationUtils.loadAnimation(context, R.anim.fade_out) } } 时所有目的地都是顶级的永远是唯一一个setupWithNavController，其目的地指向家目的地，因此 previousBackStackEntry 并不能帮助您确定您来自哪个 previousBackStackEntry。

其他方法可能是在 Fragment 中有一个公共变量，您将在其中存储您所在的最后一个目的地，并在恢复时在每个 Activity 中设置该变量。您可以在 Fragment 中检查该变量以了解您来自哪个 onAnimationCreate 并应用适当的动画。

Answer 4

我是Android导航的新手，但是我认为如果您想更改默认动画，可以尝试一下

将这些文件放在动画目录中

nav_default_enter_anim.xml
nav_default_exit_anim.xml
nav_default_pop_enter_anim.xml
nav_default_pop_exit_anim.xml

，交易的默认动画将更改为您放置在上述文件中的动画。

Answer 5

首先，添加 anim 资源文件夹。

第二，添加过渡文件，例如：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="@integer/slideAnimDuration"
android:interpolator="@android:anim/decelerate_interpolator"
android:shareInterpolator="true">
<translate
    android:fromXDelta="@integer/negSlideAnimValue"
    android:toXDelta="0" />

<alpha
    android:fromAlpha="0.0"
    android:toAlpha="1.0" />
</set>

第三，打开导航图，单击目标，在“动画”部分中，选择刚创建的动画/过渡文件。

我希望这会有所帮助。

快乐编码?

具有建筑导航组件的BottomNavigation片段的动画

5 个答案: