具有从Drawerlayout过渡的Android导航组件

2020年5月26日 22点热度 0条评论

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

解决方案如下:

莎拉!是的,有可能。您可以添加自定义侦听器来处理导航项的选择,并在其中添加动画。为了其他目的,我不得不添加一个自己,但这绝对适合您的任务。
如何:

  • 添加带抽屉的布局。示例:
  • <?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>
    
  • 通过ID查找NavigationView并将其分配给 Activity 中的变量private NavigationView navigationView,您可以使用findViewById(R.id.nav_view)提取该变量。此步骤是可选的。您可能会发现 View 和关联导航项选择侦听器,而没有持有对NavigationView的引用。
  • 设置导航项目选择侦听器:
  • 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日)

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

    请注意,由于
    setNavigationItemSelectedListener函数(有时是
    设置,它是它自己的侦听器),因此我将
    NavigationUI调用放置在方法的末尾。那也可能是问题的原因。
    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

  • 首先调用添加new ToolbarOnDestinationChangedListener(toolbar, configuration)
  • 第二次调用添加了NavController.OnDestinationChangedListener的自定义实现,可正确更新抽屉中的导航 View ;
  • 第三次调用将添加new ActionBarOnDestinationChangedListener(activity, configuration)
  • 这种配置使我可以在具有主从模式的平板电脑上使用单个应用程序,而在手机上作为抽屉菜单的常规应用程序可以使用单个应用程序。

    引用的字符串资源仅是:

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

    但是它们是可访问性所必需的。如果您支持多种语言,将它们翻译是非常好的。基本上,任何用于可访问性的东西通常都很好翻译。