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

روش نوشتن را امتحان کنید

Jetpack Compose روی Wear OS، ابزار رابط کاربری پیشنهادی برای Wear OS است.

نوشتن را روی Wear OS امتحان کنید →

اپلیکیشن‌های Wear OS از همان تکنیک‌های چیدمان سایر دستگاه‌های اندروید استفاده می‌کنند، اما باید با محدودیت‌های خاص ساعت طراحی شوند.

توجه: عملکرد و رابط کاربری دقیق یک اپلیکیشن موبایل را به 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 می‌تواند پس از اعمال insetهای پنجره مورد نیاز، به طور خودکار نماهای فرزند خود را روی صفحه‌های گرد قرار دهد. برای نمایش در داخل این ناحیه، نماهای فرزند ویژگی layout_boxedEdges را با مقادیر زیر مشخص می‌کنند:

• ترکیبی از top ، bottom ، left و right . برای مثال، مقدار "left|top" لبه‌های چپ و بالای عنصر فرزند را درون مربع خاکستری در شکل ۲ قرار می‌دهد.
• مقدار "all" تمام محتوای فرزند را درون مربع خاکستری در شکل 2 قرار می‌دهد. این رایج‌ترین رویکرد با یک 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> مقدار padding اختصاص می‌دهد.

• android:padding="5dp"

  این خط به عنصر داخلی ConstraintLayout فاصله‌گذاری (padding) اختصاص می‌دهد.

• app:layout_boxedEdges="all"

  این خط تضمین می‌کند که عنصر ConstraintLayout و فرزندانش درون ناحیه‌ای که توسط window insets در صفحات گرد تعریف شده است، قرار گیرند.

از طرح منحنی استفاده کنید

کلاس WearableRecyclerView در کتابخانه رابط کاربری Wear OS به شما امکان می‌دهد تا طرح‌بندی منحنی بهینه شده برای صفحات گرد را انتخاب کنید. برای فعال کردن طرح‌بندی منحنی برای لیست‌های قابل پیمایش در برنامه خود، به بخش ایجاد لیست در Wear OS مراجعه کنید.