טיפול בצורות שונות של השעון

הערה: המדריך הזה קשור לשימוש בתצוגות ב-Android. כדאי להשתמש כתיבה ל-Wear OS, גישה הצהרתית מודרנית ועד לפיתוח ממשקי משתמש על גאדג'טים לבישים שתואמים להנחיות החומר החדשות. הפעלת 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. תוספות לחלונות במסך עגול.

המחלקה BoxInsetLayout בספריית ממשק המשתמש של Wear OS מאפשרת מגדירים פריסה שמתאימה למסכים עגולים. הכיתה הזו מאפשרת לך ליישר בקלות את התצוגות במרכז או סמוך לקצוות של המסך.

הריבוע האפור בתמונה 2 מראה את האזור שבו BoxInsetLayout יכול למקם באופן אוטומטי את תצוגות הצאצא שלו במסכים עגולים לאחר ההחלה את רכיבי inset הנדרשים של החלון. כדי שיוצג בתוך האזור הזה, צריך להגדיר את תצוגות מפורטות מציינות את המאפיין layout_boxedEdges עם הערכים הבאים:

• שילוב של top, bottom, left ו-right. לדוגמה, הערך של "left|top" ממקם את הילד או הילדה שמאלה ולמעלה הקצוות בתוך הריבוע האפור בפורמט 2.
• הערך "all" ממקם את כל התוכן של הילד או הילדה בתוך הריבוע האפור בתמונה 2. זאת הגישה הנפוצה ביותר ConstraintLayout מבפנים.

הפריסה שמוצגת באיור 2 משתמשת ברכיב <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.