定义布局

穿戴式设备使用与手持式 Android 设备相同的布局技术,但在设计时需要遵循特定约束。请勿移植手持式设备应用中的功能和界面,不要指望这样能带来良好的用户体验。如需了解设计卓越的穿戴式设备应用的详细信息,请阅读 Android Wear 设计原则

针对 Android Wear 应用创建布局时,您需要考虑设备屏幕是方形还是圆形。在圆形 Android Wear 设备上,屏幕角落附近的内容可能会被裁切。因此,专为方形屏幕设计的布局在圆形设备上可能会出现显示问题。有关此问题的演示,请观看视频适用于 Android Wear 的全屏应用

例如,图 1 展示了以下布局分别在方形屏幕和圆形屏幕上的样子。

图 1. 展示了专为方形屏幕设计的布局在圆形屏幕上不能正常显示。

因此,针对您的布局使用以下设置时,文本在具有圆形屏幕的设备上无法正确显示。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_square" />
</LinearLayout>

可以通过两种方法解决此问题:

  1. 针对方形和圆形设备使用 Wear 界面库中的布局。
    • BoxInsetLayout - 此布局根据设备屏幕的形状应用不同的窗口边衬区。当您想在这两种形状的屏幕上使用相似布局时可使用此方法,无需裁剪圆形屏幕边缘附近的视图。
    • 曲线布局 - 当您想要显示和操作专为圆形屏幕优化的垂直项目列表时可使用此布局。
  2. 按照提供资源指南中所述,为方形和圆形设备提供备用布局资源。在运行时,Wear 检测设备屏幕的形状并加载正确的布局。

要通过该库编译 Android Studio 项目,请确保在 Android SDK 管理器中安装 Extras > Google Repository 软件包。此外,在 wear 模块的 build.gradle 文件中包括以下依赖项:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:wear:26.0.0'
}

使用 BoxInsetLayout

图 2. 圆形屏幕上的窗口边衬区。

您可以通过 Wear 界面库中的 BoxInsetLayout 类定义一个可同时适用于方形屏幕和圆形屏幕的布局。此类根据屏幕形状应用所需的窗口边衬区,并让您可以轻松地调整屏幕中心位置或边缘附近的视图。

:在穿戴式设备支持库中,BoxInsetLayout 类取代了一个与其类似且已弃用的类。

图 2 中显示的灰色正方形区域是应用所需窗口边衬区后, BoxInsetLayout 可在圆形屏幕上自动放置其子视图的区域。如需在此区域中显示子视图,可通过以下值指定 layout_box 属性:

  • topbottomleftright 的组合。例如,"left|top" 值可确定图 2 灰色正方形中子视图左侧边缘和顶部边缘的位置。
  • "all" 值可确定图 2 灰色正方形中所有子视图内容的位置。

在正方形屏幕上,窗口边衬区为零,并忽略 layout_box 属性。

图 3. 同时适用于方形屏幕和圆形屏幕的布局定义。

图 3 中显示的布局使用 <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"
    android:padding="15dp">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp"
        app:boxedEdges="all">

        <TextView
            android:gravity="center"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:text="@string/sometext"
            android:textColor="@color/black" />

        <ImageButton
            android:background="@null"
            android:layout_gravity="bottom|left"
            android:layout_height="50dp"
            android:layout_width="50dp"
            android:src="@drawable/ok" />

        <ImageButton
            android:background="@null"
            android:layout_gravity="bottom|right"
            android:layout_height="50dp"
            android:layout_width="50dp"
            android:src="@drawable/cancel" />
    </FrameLayout>
</android.support.wear.widget.BoxInsetLayout>

请注意以粗体标记的布局部分:

  • android:padding="15dp"

    此行向 <BoxInsetLayout> 元素分配内边距。圆形设备上的窗口边衬区大于 15dp,因此,此内边距仅适用于方形屏幕。

  • android:padding="5dp"

    此行向内部 FrameLayout 元素分配内边距。此内边距对方形屏幕和圆形屏幕均适用。按钮和窗口边衬区之间的总内边距在方形屏幕上为 20dp (15+5) ,在圆形屏幕上为 5dp。

  • app:boxedEdges="all"

    此行确保 FrameLayout 元素及其子项被限制在圆形屏幕上窗口边衬区定义的区域内。此行对方形屏幕没有影响。

使用曲线布局

您可以通过 Wear 界面库中的 WearableRecyclerView 类选择使用专为圆形屏幕优化的曲线布局。要针对应用中的可滚动列表启用曲线布局,请参阅创建曲线布局

针对方形屏幕和圆形屏幕使用不同布局

您可以针对特定设备配置(例如,针对方形屏幕和圆形屏幕)提供备用资源。如需了解详细信息,请参阅有关此主题的博文中的相关说明。

要支持圆形手表和方形手表,请考虑按如下方式组织布局:

  • layout/ 目录包含同时适用于圆形手表和方形手表的布局。
  • layout-round/layout-notround/ 目录包含特定于屏幕形状的布局。

使用 -round-notround 资源限定符的方法还可以应用于维度或其他资源类型。例如,您可以使用 res/valuesres/values-roundres/values-notround 资源目录。通过此方式组织资源,您可以共享一个布局,仅需根据设备类型更改某些属性即可。