java - 从 Drawerlayout 过渡的 Android 导航组件

Question

是否可以通过使用 android 导航组件从抽屉布局中打开 fragment 来更改过渡效果。 android 文档中没有任何内容。

Answer 1

莎拉!对的，这是可能的。您可以添加自定义监听器来处理导航项选择并在其中添加动画。为了其他目的，我不得不自己添加一个，但它绝对适合作为您任务的解决方案。

如何:

1. 添加带抽屉的布局。示例:

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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/drawer_layout"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:fitsSystemWindows="true"
   tools:openDrawer="start">

   <!-- Other views can be added here, or below -->

   <com.google.android.material.navigation.NavigationView
       android:id="@+id/nav_view"
       android:layout_width="wrap_content"
       android:layout_height="match_parent"
       android:layout_gravity="start"
       app:menu="@menu/menu_for_drawer" />

</androidx.drawerlayout.widget.DrawerLayout>

1. 按 ID 查找 NavigationView 并将其分配给 Activity 中的变量 private NavigationView navigationView，您可以使用 findViewById(R.id.nav_view )。此步骤是可选的。您可以在不持有对 NavigationView 的引用的情况下找到 View 和评估导航项选择监听器；
2. 设置导航项选择监听器:

navigationView.setNavigationItemSelectedListener(menuItem -> {
           @IdRes
           int id = menuItem.getItemId();
           NavOptions.Builder optionsBuilder = new NavOptions.Builder();

           switch (id) {
               case R.id.first_menu_item_id: {
                   // Lets assume for the first menu item navigation is default
                   optionsBuilder
                           .setEnterAnim(R.anim.nav_default_enter_anim)
                           .setExitAnim(R.anim.nav_default_exit_anim)
                           .setPopEnterAnim(R.anim.nav_default_pop_enter_anim)
                           .setPopExitAnim(R.anim.nav_default_pop_exit_anim);
               }
               break;
               case R.id.second_menu_item_id: {
                   // Lets assume for the second menu item navigation is missing
                   // empty here
               }
               break;
               case R.id.thrid_menu_item_id: {
                   // Lets assume for the third menu item navigation is custom
                   optionsBuilder
                           .setEnterAnim(R.anim.slide_in_right)
                           .setExitAnim(R.anim.slide_out_left)
                           .setPopEnterAnim(R.anim.slide_in_left)
                           .setPopExitAnim(R.anim.slide_out_right);
               }
               break;
           }

           navController.navigate(id, null, optionsBuilder.build());
           
           // Do not forget to close the drawer
           // drawer.closeDrawers();
           return true;
       });

这应该有所帮助!欢迎提出任何想法和问题!

---

如果您对示例中提到的动画感兴趣:

• slide_in_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate android:fromXDelta="-100%" android:toXDelta="0%"
        android:fromYDelta="0%" android:toYDelta="0%"
        android:duration="300"/>
</set>

• slide_in_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate android:fromXDelta="100%" android:toXDelta="0%"
        android:fromYDelta="0%" android:toYDelta="0%"
        android:duration="300"/>
</set>

• slide_out_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate android:fromXDelta="0%" android:toXDelta="-100%"
        android:fromYDelta="0%" android:toYDelta="0%"
        android:duration="300"/>
</set>

• slide_out_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate android:fromXDelta="0%" android:toXDelta="100%"
        android:fromYDelta="0%" android:toYDelta="0%"
        android:duration="300"/>
</set>

更新(2020 年 3 月 28 日)

如果此解决方案不适用于抽屉菜单，请尝试将其与以下代码一起使用。

请注意，由于 NavigationUI 函数有时设置它自己的监听器，我将 setNavigationItemSelectedListener 调用放在方法的末尾。这也可能是问题的原因。

NavigationUI 函数背后有很多事情要做，如果有什么不对，请检查您使用的函数的实现。

private void setupNavigation() {
        // Set custom toolbar as action bar
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawer.addDrawerListener(toggle);
        toggle.syncState();

        // Setup navigation with toolbar and drawer
        NavController navController = Navigation.findNavController(this, R.id.main_nav_host_fragment);

        /* The set of destinations by id considered at the top level 
        of your information hierarchy. The Up button will not be displayed 
        when on these destinations. */
        Set<Integer> set = new HashSet<>(Arrays.asList(R.id.first_fragmentId_from_nav_graph, R.id.second_fragmentId_from_nav_graph, R.id.third_fragmentId_from_nav_graph)); 
        /* Configuration options for {@link NavigationUI} methods that interact with implementations of the
        app bar pattern */
        AppBarConfiguration configuration = new AppBarConfiguration.Builder(set).setDrawerLayout(drawer).build();

        NavigationUI.setupWithNavController(toolbar, navController, configuration);
        NavigationUI.setupWithNavController(navigationView, navController);
        NavigationUI.setupActionBarWithNavController(this, navController, configuration);
        
        // And here you set the listener.
        navigationView.setNavigationItemSelectedListener(...);
    }

NavigationUI 函数有多个调用，例如 setupWithNavController 和 setupActionBarWithNavController。原因是在它们中的每一个后面都添加了一个导航 Controller 的目的地更改监听器。参见 addOnDestinationChangedListener有关监听器的更多信息。

1. 第一次调用添加new ToolbarOnDestinationChangedListener(toolbar, configuration);
2. 第二次调用添加了 NavController.OnDestinationChangedListener 的自定义实现，可以正确更新抽屉中的导航 View ；
3. 第三次调用添加了new ActionBarOnDestinationChangedListener(activity, configuration)。

此配置允许我在平板电脑上使用主从模式的单个应用程序，并在手机上将其作为带抽屉菜单的普通应用程序使用。

引用的字符串资源就是:

<string name="navigation_drawer_open">Open navigation drawer</string>
<string name="navigation_drawer_close">Close navigation drawer</string>

但它们是可访问性所必需的。如果您支持多种语言，那么翻译它们是非常好的。基本上任何用于辅助功能的内容通常都适合翻译。