Wear 导航和操作

本课程介绍如何在应用中实现操作和抽屉式导航栏。

Material Design for Android Wear 将提供两个交互抽屉式导航栏：

  • 抽屉式导航栏。让用户可以在应用中的视图之间切换。
    • 多页抽屉式导航栏。您可以将抽屉式导航栏的内容显示在一个页面或多页面中。要在多页面中显示抽屉式导航栏内容，请使用 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"

以下代码演示如何初始化抽屉式导航栏的内容： 

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

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

要在抽屉式导航栏中使用自定义视图，请将 WearableDrawerView 添加到 WearableDrawerLayout。要设置滑出视图和抽屉式导航栏内容，请添加它们作为 WearableDrawerView 的子视图，并分别在 peekView 和 drawerContent 属性中指定它们的 ID。另外，使用 android:layout_gravity 属性的 top 或 bottom 值（仅支持 top 和 bottom）指定抽屉式导航栏位置。

自定义滑出视图必须指定其专用的顶部内边距和底部内边距。

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

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

侦听抽屉式导航栏 Event

要侦听抽屉式导航栏 Event，请在 WearableDrawerLayout 上调用 setDrawerStateCallback() 并向其传递 WearableDrawerLayout.DrawerStateCallback 的实现。此抽象类为抽屉式导航栏 Event（例如 onDrawerOpened()、onDrawerClosed() 和 onDrawerStatechanged()）提供了回调。

滑出抽屉式导航栏

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

例如： 

mActionDrawer.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。

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

上一页
下一页