Wear 抽屉式导航栏和操作抽屉式导航栏

这节课介绍如何在您的应用中实现操作抽屉式导航栏和抽屉式导航栏。

作为 Wear OS by Google 谷歌设计的一部分,我们提供了两种交互抽屉式导航栏:

  • 抽屉式导航栏。您可以让用户在应用中的视图之间切换。
    • 多页抽屉式导航栏。您可以在单个页面或多个页面中显示抽屉式导航栏的内容。要在多个页面中显示抽屉式导航栏内容,请使用 app:navigationStyle 属性,并将值设为 multiPage
  • 操作抽屉式导航栏。您可以让用户轻松访问应用中的常用操作。操作抽屉式导航栏显示在屏幕底部,并且包含特定于上下文的用户操作,与手机上的操作栏类似。当用户到达滚动内容的顶部或底部时,操作抽屉式导航栏将会滑出。

图 1. 抽屉式导航栏和操作抽屉式导航栏。

如需详细了解本页介绍的类,请参阅 android.support.wear.widget.drawer 软件包的 API 参考。这些类位于 Wear 界面库中。如需了解该库以及 Wear 界面库取代的已弃用的类(包括以前用于操作抽屉式导航栏和抽屉式导航栏的类),请参阅使用 Wear 界面库

创建抽屉式导航栏布局

要将操作抽屉式导航栏或抽屉式导航栏添加到您的应用,请将包含 WearableDrawerLayout 对象的界面声明为布局的根视图。在 WearableDrawerLayout 内,如果内容滚动,则必须支持嵌套滚动。

例如,以下布局使用了一个 WearableDrawerLayout,该对象包含三个子视图:一个包含主要内容的 LinearLayout、一个抽屉式导航栏和一个操作抽屉式导航栏。

    <android.support.wear.widget.drawer.WearableDrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ScrollView
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:nestedScrollingEnabled="true">
            <LinearLayout
                android:id="@+id/linear_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" />
        </ScrollView>
        <android.support.wear.widget.drawer.WearableNavigationDrawerView
            android:id="@+id/top_navigation_drawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
        <android.support.wear.widget.drawer.WearableActionDrawerView
            android:id="@+id/bottom_action_drawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:actionMenu="@menu/action_drawer_menu"/>
    </android.support.wear.widget.drawer.WearableDrawerLayout>
    

注意 WearableDrawerLayout 类取代了穿戴式设备支持库中的一个与其类似且已弃用的类。

创建多页抽屉式导航栏

默认情况下,抽屉式导航栏是单页抽屉式导航栏。不过,单页抽屉式导航栏可能不适合您的应用,特别是在您的应用具有七个以上的视图时,或具有不能轻松使用图标表示的视图时。要创建多页抽屉式导航栏,请将 navigationStyle="multiPage" 属性应用于抽屉式导航栏。例如:

    <android.support.wear.widget.drawer.WearableNavigationDrawerView
        android:id="@+id/top_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/holo_red_light"
        app:navigationStyle="multiPage"
    

初始化抽屉式导航栏内容

作为创建 Activity 的主要步骤之一,您应初始化抽屉式导航栏的项目列表。您必须扩展 WearableNavigationDrawerAdapter 以填充抽屉式导航栏内容。您可以使用 app:actionMenu 属性在布局 XML 文件中填充操作抽屉式导航栏内容:

    app:actionMenu="@menu/action_drawer_menu"
        

以下代码展示了如何初始化抽屉式导航栏的内容:

Kotlin

    class MainActivity : Activity(), MenuItem.OnMenuItemClickListener {

        private lateinit var wearableDrawerLayout: WearableDrawerLayout
        private lateinit var wearableNavigationDrawer: WearableNavigationDrawerView
        private lateinit var wearableActionDrawer: WearableActionDrawerView
        ...
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
            ...
            // Top navigation drawer
            wearableNavigationDrawer = findViewById(R.id.top_navigation_drawer)
            wearableNavigationDrawer.setAdapter(YourImplementationNavigationAdapter(this))
            // Peeks navigation drawer on the top.
            wearableNavigationDrawer.controller.peekDrawer()
            // Bottom action drawer
            wearableActionDrawer =
                    findViewById<WearableActionDrawerView>(R.id.bottom_action_drawer).apply {
                        // Peeks action drawer on the bottom.
                        controller.peekDrawer()
                        setOnMenuItemClickListener(this@MainActivity)
                    }
        }
    }
    

Java

    public class MainActivity extends Activity implements
            OnMenuItemClickListener {
        private WearableDrawerLayout wearableDrawerLayout;
        private WearableNavigationDrawerView wearableNavigationDrawer;
        private WearableActionDrawerView wearableActionDrawer;
        ...
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            ...
            // Top navigation drawer
            wearableNavigationDrawer = (WearableNavigationDrawerView) findViewById(R.id.top_navigation_drawer);
            wearableNavigationDrawer.setAdapter(new YourImplementationNavigationAdapter(this));
            // Peeks navigation drawer on the top.
            wearableNavigationDrawer.getController().peekDrawer();
            // Bottom action drawer
            wearableActionDrawer = (WearableActionDrawerView) findViewById(R.id.bottom_action_drawer);
            // Peeks action drawer on the bottom.
            wearableActionDrawer.getController().peekDrawer();
            wearableActionDrawer.setOnMenuItemClickListener(this);
        }
    }
    

创建自定义抽屉式导航栏视图

要在抽屉式导航栏中使用自定义视图,请将 WearableDrawerView 添加到 WearableDrawerLayout。要设置滑出视图和抽屉式导航栏内容,请将它们添加为 WearableDrawerView 的子视图,并分别在 peekViewdrawerContent 属性中指定其 ID。另外,使用 android:layout_gravity 属性的 topbottom 值(仅支持 topbottom)指定抽屉式导航栏位置。

自定义滑出视图必须指定其自己的上下内边距。

以下示例指定了一个具有滑出视图和抽屉式导航栏内容的顶部抽屉式导航栏:

    <android.support.wear.widget.drawer.WearableDrawerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="top"
        android:background="@color/red"
        app:drawerContent="@+id/drawer_content"
        app:peekView="@+id/peek_view">
        <FrameLayout
            android:id="@id/drawer_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <!-- Drawer content goes here.  -->
        </FrameLayout>
        <LinearLayout
            android:id="@id/peek_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:paddingTop="8dp"
            android:paddingBottom="8dp"
            android:orientation="horizontal">
            <!-- Peek view content goes here.  -->
        </LinearLayout>
    </android.support.wear.widget.drawer.WearableDrawerView>
    

监听抽屉式导航栏事件

要监听抽屉式导航栏事件,请在 WearableDrawerLayout 上调用 setDrawerStateCallback() 并向其传递 WearableDrawerLayout.DrawerStateCallback 的实现。此抽象类为抽屉式导航栏事件(如 onDrawerOpened()onDrawerClosed()onDrawerStatechanged())提供了回调。

滑出抽屉式导航栏

要使抽屉式导航栏滑出,请调用 getController() 以访问 peekDrawer()closeDrawer()openDrawer()

例如:

Kotlin

    wearableActionDrawer.controller.peekDrawer()
    

Java

    wearableActionDrawer.getController().peekDrawer();
    

默认情况下,当有多项操作时,操作抽屉式导航栏会显示第一项操作与一个 V 形图标。如果您希望只显示溢出图标(三个垂直的点)而不显示第一项操作,可通过将 showOverflowInPeek 标志设为 true 来替换默认行为。例如:

    <android.support.wear.widget.drawer.WearableActionDrawerView
        android:id="@+id/bottom_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/holo_blue_dark"
        app:showOverflowInPeek="true"/>
    

默认情况下,无论是通过正常滚动还是通过滑屏,当用户到达主要滚动内容(即,实现 NestedScrollingChild 的视图)的顶部或底部时,操作抽屉式导航栏都将会滑出。如果您愿意,可以让抽屉式导航栏在用户向下滚动内容时滑出,只需将 actionDrawer.setPeekOnScrollDownEnabled() 方法设为 true 即可。

默认情况下,当用户通过正常滚动或滑屏到达内容的顶部时,抽屉式导航栏将会滑出。