इस पेज का अनुवाद Cloud Translation API से किया गया है.

टाइल का इस्तेमाल शुरू करना

अपने ऐप्लिकेशन से टाइल उपलब्ध कराने के लिए, अपने ऐप्लिकेशन की build.gradle फ़ाइल में ये डिपेंडेंसी शामिल करें.

Groovy

dependencies {
    // Use to implement support for wear tiles
    implementation "androidx.wear.tiles:tiles:1.5.0-alpha04"

    // Use to utilize standard components and layouts in your tiles
    implementation "androidx.wear.protolayout:protolayout:1.3.0-alpha04"

    // Use to utilize components and layouts with Material Design in your tiles
    implementation "androidx.wear.protolayout:protolayout-material:1.3.0-alpha04"

    // Use to include dynamic expressions in your tiles
    implementation "androidx.wear.protolayout:protolayout-expression:1.3.0-alpha04"

    // Use to preview wear tiles in your own app
    debugImplementation "androidx.wear.tiles:tiles-renderer:1.5.0-alpha04"

    // Use to fetch tiles from a tile provider in your tests
    testImplementation "androidx.wear.tiles:tiles-testing:1.5.0-alpha04"
}

Kotlin

dependencies {
    // Use to implement support for wear tiles
    implementation("androidx.wear.tiles:tiles:1.5.0-alpha04")

    // Use to utilize standard components and layouts in your tiles
    implementation("androidx.wear.protolayout:protolayout:1.3.0-alpha04")

    // Use to utilize components and layouts with Material Design in your tiles
    implementation("androidx.wear.protolayout:protolayout-material:1.3.0-alpha04")

    // Use to include dynamic expressions in your tiles
    implementation("androidx.wear.protolayout:protolayout-expression:1.3.0-alpha04")

    // Use to preview wear tiles in your own app
    debugImplementation("androidx.wear.tiles:tiles-renderer:1.5.0-alpha04")

    // Use to fetch tiles from a tile provider in your tests
    testImplementation("androidx.wear.tiles:tiles-testing:1.5.0-alpha04")
}

खास कॉन्सेप्ट

टाइल, Android ऐप्लिकेशन की तरह नहीं बनाई जाती हैं. साथ ही, इनमें अलग-अलग कॉन्सेप्ट का इस्तेमाल किया जाता है:

लेआउट टेंप्लेट: डिसप्ले पर विज़ुअल एलिमेंट के पूरे क्रम को तय करें. टाइल, EdgeContentLayout लेआउट टेंप्लेट का इस्तेमाल करती है. इसमें डिसप्ले के किनारे पर प्रोग्रेस इंडिकेटर होता है. इसके अलावा, टाइल में PrimaryLayout का इस्तेमाल भी किया जा सकता है. इसमें प्रोग्रेस इंडिकेटर नहीं दिखता.
लेआउट एलिमेंट: इनका इस्तेमाल करके, किसी एक ग्राफ़िक एलिमेंट को दिखाया जाता है. जैसे, Button या Chip. इसके अलावा, Column, MultiButtonLayout, MultiSlotLayout वगैरह का इस्तेमाल करके, एक साथ कई एलिमेंट को ग्रुप में भी दिखाया जा सकता है. इन्हें लेआउट टेंप्लेट में एम्बेड किया जाता है.
संसाधन: ResourceBuilders.Resources ऑब्जेक्ट में, लेआउट को रेंडर करने के लिए ज़रूरी Android संसाधनों (इमेज) के की-वैल्यू पेयर का मैप और वर्शन होता है.
टाइमलाइन: TimelineBuilders.Timeline ऑब्जेक्ट, लेआउट ऑब्जेक्ट के एक या उससे ज़्यादा इंस्टेंस की सूची होती है. रेंडरर को किसी एक लेआउट ऑब्जेक्ट से दूसरे पर कब स्विच करना चाहिए, यह बताने के लिए कई तरह के तरीके और एक्सप्रेशन दिए जा सकते हैं. जैसे, किसी खास समय पर लेआउट दिखाना बंद करना.
स्टेटस: StateBuilders.State टाइप का डेटा स्ट्रक्चर, जिसे टाइल और ऐप्लिकेशन के बीच पास किया जाता है, ताकि दोनों कॉम्पोनेंट एक-दूसरे से कम्यूनिकेट कर सकें. उदाहरण के लिए, अगर टाइल पर किसी बटन पर टैप किया जाता है, तो स्टेटस में बटन का आईडी सेव होता है. मैप का इस्तेमाल करके भी डेटा टाइप एक्सचेंज किए जा सकते हैं.
टाइल: टाइल को दिखाने वाला TileBuilders.Tile ऑब्जेक्ट, जिसमें टाइमलाइन, रिसॉर्स वर्शन आईडी, अप-टू-डेट होने के अंतराल, और स्थिति शामिल होती है.
Protolayout: यह शब्द, टाइल से जुड़ी अलग-अलग क्लास के नाम में दिखता है. यह Wear OS Protolayout लाइब्रेरी का रेफ़रंस देता है. यह एक ग्राफ़िक लाइब्रेरी है, जिसका इस्तेमाल Wear OS के अलग-अलग प्लैटफ़ॉर्म पर किया जाता है.

टाइल बनाना

अपने ऐप्लिकेशन से टाइल उपलब्ध कराने के लिए, TileService टाइप की सेवा लागू करें और उसे अपने मेनिफ़ेस्ट में रजिस्टर करें. इससे सिस्टम, onTileRequest() को कॉल करने के दौरान ज़रूरी टाइल और onTileResourcesRequest() को कॉल करने के दौरान रिसॉर्स का अनुरोध करता है.

class MyTileService : TileService() {

    override fun onTileRequest(requestParams: RequestBuilders.TileRequest) =
        Futures.immediateFuture(
            Tile.Builder()
                .setResourcesVersion(RESOURCES_VERSION)
                .setTileTimeline(
                    Timeline.fromLayoutElement(
                        Text.Builder(this, "Hello World!")
                            .setTypography(Typography.TYPOGRAPHY_BODY1)
                            .setColor(argb(0xFFFFFFFF.toInt()))
                            .build()
                    )
                )
                .build()
        )

    override fun onTileResourcesRequest(requestParams: ResourcesRequest) =
        Futures.immediateFuture(
            Resources.Builder()
                .setVersion(RESOURCES_VERSION)
                .build()
        )
}Tile.kt

इसके बाद, अपनी AndroidManifest.xml फ़ाइल के <application> टैग में कोई सेवा जोड़ें.

<service
    android:name=".snippets.tile.MyTileService"
    android:label="@string/tile_label"
    android:description="@string/tile_description"
    android:icon="@mipmap/ic_launcher"
    android:exported="true"
    android:permission="com.google.android.wearable.permission.BIND_TILE_PROVIDER">
    <intent-filter>
        <action android:name="androidx.wear.tiles.action.BIND_TILE_PROVIDER" />
    </intent-filter>

    <meta-data android:name="androidx.wear.tiles.PREVIEW"
        android:resource="@drawable/tile_preview" />
</service>AndroidManifest.xml

अनुमति और इंटेंट फ़िल्टर, इस सेवा को टाइल उपलब्ध कराने वाली कंपनी के तौर पर रजिस्टर करते हैं.

जब उपयोगकर्ता अपने फ़ोन या स्मार्टवॉच पर टाइल कॉन्फ़िगर करते हैं, तब उन्हें आइकॉन, लेबल, ब्यौरा, और टाइल की झलक दिखाने वाला संसाधन दिखता है.

अपना ऐप्लिकेशन डिप्लॉय करें और टाइल कैरसेल में टाइल जोड़ें. टाइल की झलक देखने का एक और तरीका है, जो डेवलपर के लिए ज़्यादा आसान है. हालांकि, फ़िलहाल इसे मैन्युअल तरीके से ही करें.

पहली इमेज. "नमस्ते दुनिया" टाइल.

पूरा उदाहरण देखने के लिए, GitHub पर कोड का सैंपल या कोडलैब देखें.

टाइल के लिए यूज़र इंटरफ़ेस (यूआई) बनाना

टाइल का लेआउट, बिल्डर पैटर्न का इस्तेमाल करके लिखा जाता है. टाइल का लेआउट, ट्री की तरह बनाया जाता है. इसमें लेआउट कंटेनर और लेआउट के बुनियादी एलिमेंट होते हैं. हर लेआउट एलिमेंट में प्रॉपर्टी होती हैं, जिन्हें सेट करने के लिए अलग-अलग तरीकों का इस्तेमाल किया जा सकता है.

लेआउट के बुनियादी एलिमेंट

मटीरियल कॉम्पोनेंट के साथ-साथ, protolayout लाइब्रेरी के इन विज़ुअल एलिमेंट का इस्तेमाल किया जा सकता है:

Text: टेक्स्ट की स्ट्रिंग को रेंडर करता है. इसमें ज़रूरत पड़ने पर, टेक्स्ट को रैप भी किया जा सकता है.
Image: इमेज को रेंडर करता है.
Spacer: यह एलिमेंट के बीच पैडिंग देता है. इसके अलावा, इसका बैकग्राउंड रंग सेट करने पर, यह डिवाइडर के तौर पर भी काम कर सकता है.

मटीरियल कॉम्पोनेंट

बुनियादी एलिमेंट के अलावा, protolayout-material लाइब्रेरी में ऐसे कॉम्पोनेंट भी होते हैं जिनसे यह पक्का होता है कि टाइल का डिज़ाइन, Material Design यूज़र इंटरफ़ेस के सुझावों के मुताबिक हो.

Button: क्लिक किया जा सकने वाला सर्कुलर कॉम्पोनेंट, जिसे आइकॉन के साथ डिज़ाइन किया गया है.
Chip: स्टेडियम के आकार का क्लिक किया जा सकने वाला कॉम्पोनेंट, जिसमें दो लाइन तक टेक्स्ट और एक आइकॉन शामिल किया जा सकता है. हालांकि, आइकॉन शामिल करना ज़रूरी नहीं है.

ध्यान दें: अगर Column एलिमेंट के अंदर Chip एलिमेंट का इस्तेमाल किया जाता है, तो दोनों एलिमेंट की चौड़ाई को expand() पर सेट करें.
CompactChip: क्लिक किए जा सकने वाला स्टेडियम के आकार का कॉम्पोनेंट, जिसे टेक्स्ट की एक लाइन के लिए डिज़ाइन किया गया है.
TitleChip: Chip की तरह ही स्टेडियम के आकार का क्लिक किया जा सकने वाला कॉम्पोनेंट, लेकिन टाइटल टेक्स्ट को शामिल करने के लिए ज़्यादा ऊंचाई वाला.
CircularProgressIndicator: गतिविधि की स्थिति सर्कुलर फ़ॉर्मैट में दिखाने वाला इंडिकेटर. इसे EdgeContentLayout के अंदर रखा जा सकता है, ताकि स्क्रीन के किनारों पर गतिविधि की स्थिति दिखे.

लेआउट कंटेनर

Material लेआउट के साथ-साथ, ये कंटेनर भी काम करते हैं:

Row: चाइल्ड एलिमेंट को एक के बाद एक हॉरिज़ॉन्टल तौर पर दिखाता है.
Column: चाइल्ड एलिमेंट को एक के बाद एक वर्टिकल तौर पर दिखाता है.
Box: एक-दूसरे के ऊपर चाइल्ड एलिमेंट ओवरले करता है.
Arc: चाइल्ड एलिमेंट को सर्कल में दिखाता है.
Spannable: टेक्स्ट और इमेज को इंटरवेल करने के साथ-साथ, टेक्स्ट के सेक्शन पर खास FontStyles लागू करता है. ज़्यादा जानकारी के लिए, Spannable देखें.

हर कंटेनर में एक या उससे ज़्यादा चाइल्ड कंटेनर हो सकते हैं. ये चाइल्ड कंटेनर भी कंटेनर हो सकते हैं. उदाहरण के लिए, किसी Column में कई Row एलिमेंट, चाइल्ड एलिमेंट के तौर पर हो सकते हैं. इससे ग्रिड जैसा लेआउट बनता है.

उदाहरण के लिए, कंटेनर लेआउट और दो चाइल्ड लेआउट एलिमेंट वाली टाइल कुछ इस तरह दिख सकती है:

Kotlin

private fun myLayout(): LayoutElement =
    Row.Builder()
        .setWidth(wrap())
        .setHeight(expand())
        .setVerticalAlignment(VERTICAL_ALIGN_BOTTOM)
        .addContent(Text.Builder()
            .setText("Hello world")
            .build()
        )
        .addContent(Image.Builder()
            .setResourceId("image_id")
            .setWidth(dp(24f))
            .setHeight(dp(24f))
            .build()
        ).build()

Java

private LayoutElement myLayout() {
    return new Row.Builder()
        .setWidth(wrap())
        .setHeight(expand())
        .setVerticalAlignment(VALIGN_BOTTOM)
        .addContent(new Text.Builder()
            .setText("Hello world")
            .build()
        )
        .addContent(new Image.Builder()
            .setResourceId("image_id")
            .setWidth(dp(24f))
            .setHeight(dp(24f))
            .build()
        ).build();
}

मटीरियल लेआउट

बुनियादी लेआउट के अलावा, protolayout-material लाइब्रेरी में कुछ ऐसे लेआउट भी होते हैं जिनमें एलिमेंट को खास "स्लॉट" में रखा जाता है.

PrimaryLayout: एक मुख्य कार्रवाई CompactChip को सबसे नीचे और उसके ऊपर कॉन्टेंट को बीच में रखता है.

ध्यान दें: इस लेआउट का इस्तेमाल करने पर, कॉन्टेंट की ऊंचाई सेट करने के लिए, expand() को कॉल नहीं किया जा सकता. ऐसा न करने पर, आपको खाली टाइल दिख सकती है.

हालांकि, पैरंट एलिमेंट के मार्जिन के बीच मौजूद सभी स्पेस का इस्तेमाल करने के लिए, कॉन्टेंट की चौड़ाई पर expand() को कॉल किया जा सकता है.
MultiSlotLayout: प्राइमरी और सेकंडरी लेबल को एक साथ दिखाता है. इनके बीच में वैकल्पिक कॉन्टेंट और सबसे नीचे वैकल्पिक CompactChip होता है.
MultiButtonLayout: Material के दिशा-निर्देशों के मुताबिक व्यवस्थित किए गए बटनों के सेट को पोज़िशन करता है.
EdgeContentLayout: कॉन्टेंट को स्क्रीन के किनारे पर दिखाता है, जैसे कि CircularProgressIndicator. इस लेआउट का इस्तेमाल करने पर, उसमें मौजूद कॉन्टेंट के लिए मार्जिन और पैडिंग अपने-आप लागू हो जाती है.

आर्क

Arc कंटेनर के ये चाइल्ड कंटेनर इस्तेमाल किए जा सकते हैं:

ArcLine: आर्क के चारों ओर एक घुमावदार लाइन रेंडर करता है.
ArcText: आर्क में टेक्स्ट को घुमाकर दिखाता है.
ArcAdapter: ऐर्क में एक बुनियादी लेआउट एलिमेंट रेंडर करता है, जो ऐर्क के टेंगेंट पर खींचा जाता है.

ज़्यादा जानकारी के लिए, हर तरह के एलिमेंट के लिए रेफ़रंस दस्तावेज़ देखें.

मॉडिफ़ायर

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

लेआउट के विज़ुअल लुक को बदलें. उदाहरण के लिए, अपने लेआउट एलिमेंट में बैकग्राउंड, बॉर्डर या पैडिंग जोड़ें.
लेआउट के बारे में मेटाडेटा जोड़ें. उदाहरण के लिए, स्क्रीन रीडर के साथ इस्तेमाल करने के लिए, अपने लेआउट एलिमेंट में सेमेटिक्स मॉडिफ़ायर जोड़ें.
फ़ंक्शन जोड़ें. उदाहरण के लिए, अपनी टाइल को इंटरैक्टिव बनाने के लिए, अपने लेआउट एलिमेंट में क्लिक किए जा सकने वाले मॉडिफ़ायर जोड़ें. ज़्यादा जानकारी के लिए, टाइल के साथ इंटरैक्ट करना लेख पढ़ें.

उदाहरण के लिए, हम Image के डिफ़ॉल्ट लुक और मेटाडेटा को पसंद के मुताबिक बना सकते हैं, जैसा कि नीचे दिए गए कोड सैंपल में दिखाया गया है:

Kotlin

private fun myImage(): LayoutElement =
    Image.Builder()
        .setWidth(dp(24f))
        .setHeight(dp(24f))
        .setResourceId("image_id")
        .setModifiers(Modifiers.Builder()
            .setBackground(Background.Builder().setColor(argb(0xFFFF0000)).build())
            .setPadding(Padding.Builder().setStart(dp(12f)).build())
            .setSemantics(Semantics.builder()
                .setContentDescription("Image description")
                .build()
            ).build()
        ).build()

Java

private LayoutElement myImage() {
   return new Image.Builder()
           .setWidth(dp(24f))
           .setHeight(dp(24f))
           .setResourceId("image_id")
           .setModifiers(new Modifiers.Builder()
                   .setBackground(new Background.Builder().setColor(argb(0xFFFF0000)).build())
                   .setPadding(new Padding.Builder().setStart(dp(12f)).build())
                   .setSemantics(new Semantics.Builder()
                           .setContentDescription("Image description")
                           .build()
                   ).build()
           ).build();
}

स्पैन किए जा सकने वाले एलिमेंट

Spannable एक खास तरह का कंटेनर है, जो एलिमेंट को टेक्स्ट की तरह ही दिखाता है. यह तब काम आता है, जब आपको टेक्स्ट के बड़े ब्लॉक में सिर्फ़ एक सबस्ट्रिंग पर अलग स्टाइल लागू करना हो. ऐसा Text एलिमेंट की मदद से नहीं किया जा सकता.

Spannable कंटेनर में Span बच्चे हैं. अन्य बच्चों या नेस्ट किए गए Spannable इंस्टेंस की अनुमति नहीं है.

Span के बच्चे दो तरह के होते हैं:

SpanText: टेक्स्ट को किसी खास स्टाइल में रेंडर करता है.
SpanImage: टेक्स्ट के साथ-साथ इमेज को रेंडर करता है.

उदाहरण के लिए, "Hello world" टाइल में "world" को इटैलिक में लिखा जा सकता है और शब्दों के बीच इमेज डाली जा सकती है, जैसा कि यहां दिए गए कोड सैंपल में दिखाया गया है:

Kotlin

private fun mySpannable(): LayoutElement =
    Spannable.Builder()
        .addSpan(SpanText.Builder()
            .setText("Hello ")
            .build()
        )
        .addSpan(SpanImage.Builder()
            .setWidth(dp(24f))
            .setHeight(dp(24f))
            .setResourceId("image_id")
            .build()
        )
        .addSpan(SpanText.Builder()
            .setText("world")
            .setFontStyle(FontStyle.Builder()
                .setItalic(true)
                .build())
            .build()
        ).build()

Java

private LayoutElement mySpannable() {
   return new Spannable.Builder()
        .addSpan(new SpanText.Builder()
            .setText("Hello ")
            .build()
        )
        .addSpan(new SpanImage.Builder()
            .setWidth(dp(24f))
            .setHeight(dp(24f))
            .setResourceId("image_id")
            .build()
        )
        .addSpan(new SpanText.Builder()
            .setText("world")
            .setFontStyle(newFontStyle.Builder()
                .setItalic(true)
                .build())
            .build()
        ).build();
}

संसाधनों के साथ काम करना

टाइल के पास आपके ऐप्लिकेशन के किसी भी संसाधन का ऐक्सेस नहीं होता. इसका मतलब है कि Image लेआउट एलिमेंट में Android इमेज आईडी को पास नहीं किया जा सकता और उम्मीद नहीं की जा सकती कि वह ठीक हो जाएगा. इसके बजाय, onTileResourcesRequest() तरीके को बदलें और मैन्युअल तरीके से संसाधन दें.

onTileResourcesRequest() तरीके में इमेज देने के दो तरीके हैं:

setAndroidResourceByResId() का इस्तेमाल करके, ड्रॉ किया जा सकने वाला रिसॉर्स दें.
setInlineResource() का इस्तेमाल करके, ByteArray के तौर पर डाइनैमिक इमेज दें.

Kotlin

override fun onTileResourcesRequest(
    requestParams: ResourcesRequest
) = Futures.immediateFuture(
Resources.Builder()
    .setVersion("1")
    .addIdToImageMapping("image_from_resource", ImageResource.Builder()
        .setAndroidResourceByResId(AndroidImageResourceByResId.Builder()
            .setResourceId(R.drawable.image_id)
            .build()
        ).build()
    )
    .addIdToImageMapping("image_inline", ImageResource.Builder()
        .setInlineResource(InlineImageResource.Builder()
            .setData(imageAsByteArray)
            .setWidthPx(48)
            .setHeightPx(48)
            .setFormat(ResourceBuilders.IMAGE_FORMAT_RGB_565)
            .build()
        ).build()
    ).build()
)

Java

@Override
protected ListenableFuture<Resources> onTileResourcesRequest(
       @NonNull ResourcesRequest requestParams
) {
return Futures.immediateFuture(
    new Resources.Builder()
        .setVersion("1")
        .addIdToImageMapping("image_from_resource", new ImageResource.Builder()
            .setAndroidResourceByResId(new AndroidImageResourceByResId.Builder()
                .setResourceId(R.drawable.image_id)
                .build()
            ).build()
        )
        .addIdToImageMapping("image_inline", new ImageResource.Builder()
            .setInlineResource(new InlineImageResource.Builder()
                .setData(imageAsByteArray)
                .setWidthPx(48)
                .setHeightPx(48)
                .setFormat(ResourceBuilders.IMAGE_FORMAT_RGB_565)
                .build()
            ).build()
        ).build()
);
}

आपके लिए सुझाव

ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
ProtoLayout नेमस्पेस पर माइग्रेट करना
लिखें में ConstraintLayout
अपने ऐप्लिकेशन के लिए, क्विक सेटिंग की कस्टम टाइल बनाना