Anroid Wear OS 手表应用开发 - UI

Wear UI

智能手表相对手机来说，由于使用场景不同，且屏幕较小，所以应用的设计、交互和手机是有些区别的。相对来说，布局会更简洁，更多地使用滑动手势进行操作。

为此，在 Wear OS 上，官方提供了一系列新的控件和交互，通过它们，我们可以很方便地打造出一个适合手表交互的应用。

添加依赖

下面用到的控件都来自 Wear 控件库，需要在 build.gradle 文件中添加以下依赖：

implementation 'com.android.support:wear:28.0.0'

布局

常见的表盘有方形和圆形两种，使用普通布局的情况下，可能会出现这种情况：

为了使圆形表盘上的内容不超出边界，同时兼容方形表盘，我们可以使用 BoxInsetLayout 这个布局：

<android.support.wear.widget.BoxInsetLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:boxedEdges="all">
        
        <...>
        
    </FrameLayout>
    
</android.support.wear.widget.BoxInsetLayout>

这样可以在保证方形表盘不受影响的情况下，圆形布局的内容，不会超过显示边界：

导航抽屉栏

为了节省宝贵的显示空间，通常手表应用是没有标题栏的，在使用 ViewPager 的时候，也没有 TabLayout 的显示，但因此我们无法很好的确认当前页面。

导航栏 WearableNavigationDrawerView 就是用来解决这个问题的，我们先看看它的效果：

从手表顶部向下滑，会出现一个导航栏，显示当前页面的图标和标题。当存在多个页面时，通过左右滑动它来切换页面。

下面来看看它的用法，我们修改布局文件，使用 WearableDrawerLayout 作为根布局，添加导航栏控件：

<android.support.wear.widget.drawer.WearableNavigationDrawerView
        android:id="@+id/navigation_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:navigationStyle="multiPage"/>

当存在多个页面时，需要添加 app:navigationStyle=“multiPage” 这个属性。

和 ViewPager 类似，我们需要给它设置一个适配器，设置每个页面的图标和标题，像这样：

class MainDrawerAdapter(context: Context) :
    WearableNavigationDrawerView.WearableNavigationDrawerAdapter(