Wear OS पर सूचियाँ बनाना

Compose को आज़माएं
Wear OS पर Jetpack Compose, Wear OS के लिए सुझाया गया यूज़र इंटरफ़ेस टूलकिट है.

Wear OS डिवाइसों पर, सूचियों की मदद से उपयोगकर्ता आसानी से विकल्पों के सेट में से कोई आइटम चुन सकते हैं.

Wearable UI Library में WearableRecyclerView क्लास शामिल है. यह RecyclerView लागू करने का तरीका है. इसका इस्तेमाल, पहनने योग्य डिवाइसों के लिए ऑप्टिमाइज़ की गई सूचियां बनाने के लिए किया जाता है. इस इंटरफ़ेस का इस्तेमाल, अपने Wearable ऐप्लिकेशन में किया जा सकता है. इसके लिए, आपको एक नया WearableRecyclerView कंटेनर बनाना होगा.

WearableRecyclerView का इस्तेमाल, सामान्य आइटम की लंबी सूची के लिए करें. जैसे, ऐप्लिकेशन लॉन्चर या संपर्कों की सूची. हर आइटम में एक छोटी स्ट्रिंग और उससे जुड़ा आइकॉन हो सकता है. इसके अलावा, हर आइटम में सिर्फ़ एक स्ट्रिंग या आइकॉन हो सकता है.

ध्यान दें: मुश्किल लेआउट का इस्तेमाल न करें. उपयोगकर्ताओं को किसी आइटम को सिर्फ़ एक नज़र में देखकर यह पता चल जाना चाहिए कि वह क्या है. खास तौर पर, पहनने लायक डिवाइसों की स्क्रीन का साइज़ सीमित होता है.

मौजूदा RecyclerView क्लास को बढ़ाने पर, WearableRecyclerView एपीआई डिफ़ॉल्ट रूप से, आइटम की सूची को वर्टिकल तौर पर स्क्रोल करने की सुविधा के साथ दिखाते हैं. अपने Wearable ऐप्लिकेशन में घुमावदार लेआउट और सर्कुलर स्क्रोलिंग जेस्चर के लिए ऑप्ट-इन करने के लिए, WearableRecyclerView एपीआई का इस्तेमाल किया जा सकता है.

पहली इमेज. Wear OS पर, डिफ़ॉल्ट रूप से दिखने वाली सूची.

इस गाइड में, Wear OS ऐप्लिकेशन में सूचियां बनाने के लिए WearableRecyclerView क्लास का इस्तेमाल करने का तरीका बताया गया है. इसमें स्क्रोल किए जा सकने वाले आइटम के लिए, घुमावदार लेआउट में ऑप्ट-इन करने का तरीका भी बताया गया है. साथ ही, स्क्रोल करते समय बच्चों के दिखने के तरीके को पसंद के मुताबिक बनाने का तरीका भी बताया गया है.

एक्सएमएल का इस्तेमाल करके, किसी गतिविधि में WearableRecyclerView जोड़ना

इस लेआउट में, किसी गतिविधि में 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 को, काम के एक्सएमएल लेआउट में मुख्य कंटेनर के तौर पर इस्तेमाल करें.
  • 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));