برنامهها در 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
شکل ۲. درجهای پنجره در صفحهنمایش گرد.
کلاس
BoxInsetLayout در «کتابخانه واسط کاربر Wear OS» به شما امکان میدهد
چیدمانی را تعریف کنید که برای صفحهنمایشهای گرد مناسب باشد. این کلاس به شما امکان میدهد
بهراحتی نماها را در مرکز یا نزدیک لبههای صفحهنمایش تراز کنید.
مربع خاکستری در شکل ۲ ناحیهای را نشان میدهد که BoxInsetLayout
میتواند بهطور خودکار نماهای فرزند خود را پساز اعمال
درجهای پنجره موردنیاز در صفحههای گرد قرار دهد. برای نمایش در این ناحیه، نماهای فرزند
مشخصه layout_boxedEdges را با مقادیر زیر مشخص میکنند:
- ترکیبی از
top،bottom،left، وright. برای مثال، مقدار"left|top"لبههای چپ و بالای فرزند را درون مربع خاکستری در شکل ۲ قرار میدهد. - مقدار
"all"همه محتوای فرزند را داخل مربع خاکستری در شکل ۲ قرار میدهد. این رایجترین رویکرد باConstraintLayoutدر داخل است.
چیدمان نشاندادهشده در شکل ۲ از عنصر <BoxInsetLayout>
استفاده میکند و در صفحهنمایشهای گرد کار میکند:
<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"این خط حاشیه داخلی را به عنصر
<BoxInsetLayout>اختصاص میدهد. -
android:padding="5dp"این خط، حاشیه داخلی را به عنصر داخلی
ConstraintLayoutاختصاص میدهد. -
app:layout_boxedEdges="all"این خط تضمین میکند که عنصر
ConstraintLayoutو فرزندان آن در داخل ناحیه تعریفشده توسط حاشیههای پنجره در صفحهنمایشهای گرد قرار میگیرند.
استفاده از چیدمان منحنی
کلاس
WearableRecyclerView در «کتابخانه واسط کاربر Wear OS»
به شما امکان میدهد با چیدمان منحنی بهینهسازیشده برای صفحهنمایشهای گرد موافقت کنید.
برای فعال کردن طرحبندی منحنی برای فهرستهای پیمایشی در
برنامهتان، به
ایجاد فهرست در Wear OS مراجعه کنید.