יצירת רשימות ב-Wear OS

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

‫Jetpack Compose ב-Wear OS הוא ערכת הכלים המומלצת ליצירת ממשקי משתמש ל-Wear OS.

יצירת רשימות באמצעות כתיבה ב-Wear OS →

רשימות מאפשרות למשתמשים לבחור בקלות פריט מתוך קבוצת אפשרויות במכשירי WearOS.

ספריית ממשקי המשתמש של Wearable כוללת את המחלקה WearableRecyclerView, שהיא הטמעה של RecyclerView ליצירת רשימות שעברו אופטימיזציה למכשירים לבישים. אפשר להשתמש בממשק הזה באפליקציה למכשיר הלביש על ידי יצירת קונטיינר WearableRecyclerView חדש.

משתמשים ב-WearableRecyclerView לרשימה ארוכה של פריטים פשוטים, כמו מרכז האפליקציות או רשימת אנשי קשר. כל פריט יכול לכלול מחרוזת קצרה וסמל משויך. לחלופין, כל פריט יכול להכיל רק מחרוזת או סמל.

הערה: מומלץ להימנע מפריסות מורכבות. המשתמשים צריכים להבין מהו הפריט במבט חטוף, במיוחד כשמדובר במכשירים לבישים עם גודל מסך מוגבל.

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

איור 1. תצוגת רשימה שמוגדרת כברירת מחדל ב-Wear OS.

במדריך הזה מוסבר איך להשתמש במחלקה WearableRecyclerView כדי ליצור רשימות באפליקציות ל-Wear OS, איך להפעיל פריסה מעוקלת לפריטים שניתנים לגלילה ואיך להתאים אישית את המראה של פריטי הצאצא בזמן הגלילה.

הוספת WearableRecyclerView לפעילות באמצעות XML

הפריסה הבאה מוסיפה WearableRecyclerView לפעילות:

<androidx.wear.widget.WearableRecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/recycler_launcher_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical" />

בדוגמה הבאה מוצג WearableRecyclerView שמוחל על פעילות:

Kotlin

class MainActivity : Activity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
    ...
}

Java

public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    ...
}

יצירת פריסה מעוקלת

כדי ליצור פריסה מעוקלת לפריטים שאפשר לגלול באפליקציה למכשיר לביש:

• משתמשים ב- WearableRecyclerView כמאגר הראשי בפריסת ה-XML הרלוונטית.
• מגדירים את השיטה setEdgeItemsCenteringEnabled(boolean) לערך true. הפקודה הזו ממקמת את הפריט הראשון והאחרון ברשימה במרכז המסך, באופן אנכי.
• משתמשים בשיטה WearableRecyclerView.setLayoutManager() כדי להגדיר את הפריסה של הפריטים במסך.

Kotlin

wearableRecyclerView.apply {
    // To align the edge children (first and last) with the center of the screen.
    isEdgeItemsCenteringEnabled = true
    ...
    layoutManager = WearableLinearLayoutManager(this@MainActivity)
}

Java

// To align the edge children (first and last) with the center of the screen.
wearableRecyclerView.setEdgeItemsCenteringEnabled(true);
...
wearableRecyclerView.setLayoutManager(
                new WearableLinearLayoutManager(this));

אם לאפליקציה שלכם יש דרישות ספציפיות להתאמה אישית של המראה של הילדים בזמן הגלילה – לדוגמה, שינוי קנה המידה של הסמלים והטקסט בזמן שהפריטים מתרחקים מהמרכז – צריך להרחיב את המחלקה WearableLinearLayoutManager.LayoutCallback ולשנות את השיטה onLayoutFinished.

בקטעי הקוד הבאים מוצגת דוגמה להתאמה אישית של גלילת הפריטים כדי להרחיק אותם מהמרכז על ידי הרחבת המחלקה WearableLinearLayoutManager.LayoutCallback:

Kotlin

/** How much icons should scale, at most.  */
private const val MAX_ICON_PROGRESS = 0.65f

class CustomScrollingLayoutCallback : WearableLinearLayoutManager.LayoutCallback() {

    private var progressToCenter: Float = 0f

    override fun onLayoutFinished(child: View, parent: RecyclerView) {
        child.apply {
            // Figure out % progress from top to bottom.
            val centerOffset = height.toFloat() / 2.0f / parent.height.toFloat()
            val yRelativeToCenterOffset = y / parent.height + centerOffset

            // Normalize for center.
            progressToCenter = Math.abs(0.5f - yRelativeToCenterOffset)
            // Adjust to the maximum scale.
            progressToCenter = Math.min(progressToCenter, MAX_ICON_PROGRESS)

            scaleX = 1 - progressToCenter
            scaleY = 1 - progressToCenter
        }
    }
}

Java

public class CustomScrollingLayoutCallback extends WearableLinearLayoutManager.LayoutCallback {
    /** How much icons should scale, at most. */
    private static final float MAX_ICON_PROGRESS = 0.65f;

    private float progressToCenter;

    @Override
    public void onLayoutFinished(View child, RecyclerView parent) {

        // Figure out % progress from top to bottom.
        float centerOffset = ((float) child.getHeight() / 2.0f) / (float) parent.getHeight();
        float yRelativeToCenterOffset = (child.getY() / parent.getHeight()) + centerOffset;

        // Normalize for center.
        progressToCenter = Math.abs(0.5f - yRelativeToCenterOffset);
        // Adjust to the maximum scale.
        progressToCenter = Math.min(progressToCenter, MAX_ICON_PROGRESS);

        child.setScaleX(1 - progressToCenter);
        child.setScaleY(1 - progressToCenter);
    }
}

Kotlin

wearableRecyclerView.layoutManager =
        WearableLinearLayoutManager(this, CustomScrollingLayoutCallback())

Java

CustomScrollingLayoutCallback customScrollingLayoutCallback =
                new CustomScrollingLayoutCallback();
wearableRecyclerView.setLayoutManager(
                new WearableLinearLayoutManager(this, customScrollingLayoutCallback));