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。