مدیریت شکل‌های مختلف ساعت

امتحان کردن روش Compose
Jetpack Compose در Wear OS جعبه‌ابزار واسط کاربر توصیه‌شده برای Wear OS است.

برنامه‌ها در 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 مراجعه کنید.