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

אפשר לנסות את הדרך של כתיבת הודעה

‫Jetpack Compose ב-Wear OS הוא ערכת הכלים המומלצת ליצירת ממשקי משתמש ל-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 UI Library שתומכות במכשירים עגולים.

• אפשר להשתמש ב-BoxInsetLayout כדי למנוע חיתוך של תצוגות ליד הקצוות של מסכים עגולים.
• אפשר להשתמש ב-WearableRecyclerView כדי ליצור פריסה מעוקלת כשרוצים להציג ולשנות רשימה אנכית של פריטים שמיועדת למסכים עגולים.

מידע נוסף על עיצוב אפליקציות זמין בהנחיות לעיצוב אפליקציות ל-Wear OS.

שימוש ב-BoxInsetLayout

איור 2. שוליים פנימיים של חלון במסך עגול.

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

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