web-dev-qa-db-fra.com

Animation des fragments de non -Avigation avec des composants de navigation de l'architecture

J'ai réussi à introduire la navigation inférieure avec le dernier Android Composants de navigation d'architecture. Ce qui suit est mon code complet.

  1. La navigation
<?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>
  1. 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" />
  1. Activité principale
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);

Maintenant, comment puis-je ajouter une transition/animation sur Sélectionner chaque onglet/fragment dans la navigation inférieure?

androidnavigationandroid-architecture-componentsbottomnavigationview
8
Habeeb Rahman

son travail avec fragment de frères et sœurs de BottomNavigationView également (Composants de navigation 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()
}
1
Nimesh Hirpara

Au lieu d'utiliser la fonction SetupWithNavController, suivez cette façon.

Tout d'abord, créez vos navigations qui incluent l'animation indiquée ci-dessous.

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()

Ensuite, utilisez SetOnAnVIGATIONSItemSelectedlistener pour naviguer avec une animation comme celle-là.

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
    }

Enfin, vous devez éviter le même cas de sélection d'élément afin que vous puissiez ajouter le code ci-dessous.

bottomNavigationView.setOnNavigationItemReselectedListener { item ->
        return@setOnNavigationItemReselectedListener

J'ai utilisé la notedNavigation comme celle-ci dans mon projet pour ajouter une animation pour les transitions de page. J'espère que cela a aidé.

0
thegirlincode