Android NDK开发详解Wear之处理不同的手表形状

注意：本指南探讨的是使用 Android View 的方案。请考虑使用 Compose for Wear OS，这是一种新的声明式方法，用于根据最新 Material 准则在穿戴式设备上构建界面。借助 Jetpack Compose，您可以通过更少的代码编写出更出色的应用。
Wear OS 上的应用采用与其他 Android 设备相同的布局技术，但在设计时需要遵循特定于手表的约束。

注意：请不要将具体功能和界面从移动应用移植到 Wear OS 上，不要指望这样能带来良好的用户体验。

如果您设计的应用用于矩形手持设备，那么在圆形手表上，屏幕角落附近的内容可能会被剪裁掉。如果您使用的是可滚动的垂直列表，这就没什么问题，因为用户可以滚动屏幕，居中显示内容。但是，对于单屏，这样可能会导致糟糕的用户体验。

如果您为布局使用以下设置，文本在圆形屏幕的设备上会无法正确显示：

<androidx.constraintlayout.widget.ConstraintLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="@string/very_long_hello_world"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

如要解决此问题，请使用支持圆形设备的 Wear OS 界面库中的布局。

您可以使用 BoxInsetLayout 防止视图在圆形屏幕边缘附近被剪裁。
当您想显示和操作针对圆形屏幕而优化的垂直项目列表时，可以使用 WearableRecyclerView 创建曲线布局。
如需详细了解如何设计应用，请参阅 Wear OS 设计准则。

使用 BoxInsetLayout

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

您可以使用 Wear OS 界面库中的 BoxInsetLayout 类定义适用于圆形屏幕的布局。利用这个类，便可以轻松地在屏幕中心或边缘附近对齐视图。

图 2 中的灰色方形区域显示了在应用所需的窗口边衬区后，BoxInsetLayout 可在圆形屏幕上自动放置其子视图的区域。若要使子视图显示在此区域内，可使用以下值指定 layout_boxedEdges 属性：

top、bottom、left 和 right 的组合。例如，“left|top” 值可将子视图的左侧边缘和顶部边缘定位在图 2 中的灰色方形区域内。
“all” 值可确定图 2 灰色方形中所有子视图内容的位置。这是包含 ConstraintLayout 的最常用方法。
图 2 中显示的布局使用了 元素，适用于圆形屏幕：

<androidx.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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp"
        app:layout_boxedEdges="all">

        <TextView
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:text="@string/sometext"
            android:textAlignment="center"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageButton
            android:background="@android:color/transparent"
            android:layout_height="50dp"
            android:layout_width="50dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:src="@drawable/cancel" />

        <ImageButton
            android:background="@android:color/transparent"
            android:layout_height="50dp"
            android:layout_width="50dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:src="@drawable/ok" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.wear.widget.BoxInsetLayout>

请注意该布局中以粗体标记的部分：

android:padding="15dp"

此行用于为 元素指定内边距。

android:padding="5dp"

此行用于为内部 ConstraintLayout 元素指定内边距。

app:layout_boxedEdges="all"

此行可确保 ConstraintLayout 元素及其子项位于圆形屏幕上的窗口边衬区所定义的区域内。

使用曲线布局

您可以通过 Wear OS 界面库中的 WearableRecyclerView 类选择使用针对圆形屏幕进行了优化的曲线布局。如需为应用中的可滚动列表启用曲线布局，请参阅在 Wear OS 上创建列表。

本页面上的内容和代码示例受内容许可部分所述许可的限制。Java 和 OpenJDK 是 Oracle 和/或其关联公司的注册商标。

最后更新时间 (UTC)：2023-11-27。