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

अपने ऐप्लिकेशन से टाइल उपलब्ध कराने के लिए, यहां दी गई डिपेंडेंसी शामिल करें आपके ऐप्लिकेशन की 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")
}
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

टाइल बनाना

अपने ऐप्लिकेशन से टाइल उपलब्ध कराने के लिए, ऐसी क्लास बनाएं जो TileService और इन तरीकों को लागू करें, जैसा कि इस कोड सैंपल में दिखाया गया है:

Kotlin

// Uses the ProtoLayout namespace for tile timeline objects.
// If you haven't done so already, migrate to the ProtoLayout namespace.
import androidx.wear.protolayout.TimelineBuilders.Timeline
import androidx.wear.protolayout.material.Text
import androidx.wear.tiles.TileBuilders.Tile

private val RESOURCES_VERSION = "1"
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_DISPLAY1)
                        .setColor(argb(0xFF000000.toInt()))
                        .build()))
            .build())

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

Java

// Uses the ProtoLayout namespace for tile timeline objects.
// If you haven't done so already, migrate to the ProtoLayout namespace.
import androidx.wear.protolayout.TimelineBuilders.Timeline;
import androidx.wear.protolayout.material.Text;
import androidx.wear.tiles.TileBuilders.Tile;

public class MyTileService extends TileService {
    private static final String RESOURCES_VERSION = "1";

    @NonNull
    @Override
    protected ListenableFuture<Tile> onTileRequest(
        @NonNull TileRequest requestParams
    ) {
        return Futures.immediateFuture(new Tile.Builder()
            .setResourcesVersion(RESOURCES_VERSION)
            .setTileTimeline(
                Timeline.fromLayoutElement(
                    new Text.Builder(this, "Hello world!")
                        .setTypography(Typography.TYPOGRAPHY_DISPLAY1)
                        .setColor(ColorBuilders.argb(0xFF000000))
                        .build()))
            .build()
        );
   }

   @NonNull
   @Override
   protected ListenableFuture<Resources> onTileResourcesRequest(
       @NonNull ResourcesRequest requestParams
   ) {
       return Futures.immediateFuture(new Resources.Builder()
               .setVersion(RESOURCES_VERSION)
               .build()
       );
   }
}

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

<service
   android:name=".MyTileService"
   android:label="@string/tile_label"
   android:description="@string/tile_description"
   android:icon="@drawable/tile_icon_round"
   android:roundIcon="@drawable/tile_icon_round"
   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>

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

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

टाइल को कॉन्फ़िगर करते समय उसकी झलक दिखाने के लिए, झलक वाले मेटाडेटा टैग का इस्तेमाल करें अपने फ़ोन पर.

टाइल सेवा की लाइफ़साइकल के बारे में खास जानकारी

अपने ऐप्लिकेशन मेनिफ़ेस्ट में TileService बनाने और उसके बारे में एलान करने के बाद, आपको टाइल सर्विस की स्थिति में हुए बदलावों के हिसाब से काम कर सकता है.

TileService एक सीमित सेवा है. आपको TileService, नतीजे के तौर पर मिला है आपके ऐप्लिकेशन अनुरोध का या सिस्टम को आपसे संपर्क करने की ज़रूरत हो. सामान्य बाउंड-सर्विस लाइफ़साइकल में ये चार कॉलबैक तरीके शामिल हैं: onCreate(), onBind(), onUnbind(), और onDestroy(). सिस्टम हर बार सेवा में इन तरीकों को शुरू करता है एक नए लाइफ़साइकल फ़ेज़ में आता है.

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

  • onTileAddEvent(): सिस्टम इस तरीके को सिर्फ़ तब कॉल करता है, जब उपयोगकर्ता पहली बार आपकी टाइल जोड़ता है. साथ ही, अगर उपयोगकर्ता आपकी टाइल को हटाता और जोड़ता है टाइल को फिर से चलाएं. किसी भी एक बार में शुरुआत करने का यह सबसे सही समय है.

    onTileAddEvent() को सिर्फ़ तब कॉल किया जाता है, जब टाइल के सेट को फिर से कॉन्फ़िगर किया जाता है, नहीं, जब भी सिस्टम के ज़रिए कोई टाइल बनाई जाती है. उदाहरण के लिए, अगर डिवाइस को फिर से चालू किया जाता है या चालू किया जाता है, तो टाइल के लिए onTileAddEvent() को कॉल नहीं किया जाता जिसे पहले ही जोड़ा जा चुका है. getActiveTilesAsync() का इस्तेमाल किया जा सकता है इसके बजाय, इस बारे में स्नैपशॉट पाएं कि आपसे जुड़ी कौनसी टाइल चालू हैं.

  • onTileRemoveEvent(): सिस्टम इस तरीके को सिर्फ़ तब कॉल करता है, जब उपयोगकर्ता वह आपकी टाइल हटा देता है.

  • onTileEnterEvent(): सिस्टम इस तरीके को तब कॉल करता है, जब कोई टाइल इस कंपनी की ओर से दी गई जानकारी, स्क्रीन पर दिखेगी.

  • onTileLeaveEvent(): सिस्टम इस तरीके को तब कॉल करता है, जब कोई टाइल स्क्रीन पर कुछ नहीं दिखेगा.

  • onTileRequest(): सिस्टम इस तरीके को तब कॉल करता है, जब सिस्टम इस कंपनी से एक नई टाइमलाइन का अनुरोध करता है.

  • onTileResourcesRequest(): सिस्टम इस तरीके को तब कॉल करता है, जब सिस्टम, इस कंपनी से रिसॉर्स बंडल का अनुरोध करता है. यह हो सकता है पहली बार टाइल लोड होते समय या संसाधन वर्शन के बदलाव.

देखें कि कौनसी टाइल चालू हैं

चालू टाइल, वे टाइल होती हैं जिन्हें स्मार्टवॉच पर दिखाने के लिए जोड़ा गया है. इस्तेमाल की जाने वाली चीज़ें कौनसी टाइल के बारे में क्वेरी करने के लिए, TileService का स्टैटिक तरीका getActiveTilesAsync() आपके ऐप्लिकेशन से जुड़े ऐप्लिकेशन चालू हैं.

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

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

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

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

  • Text: रेंडर करता है टेक्स्ट की स्ट्रिंग, वैकल्पिक रूप से रैप करें.
  • Image: इमेज रेंडर करता है.
  • Spacer: तत्वों के बीच पैडिंग (जगह) उपलब्ध कराता है या किसी डिवाइडर की तरह काम कर सकता है. बैकग्राउंड का रंग.

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

बेसिक एलिमेंट के साथ-साथ, protolayout-material लाइब्रेरी में कॉम्पोनेंट, जो मटीरियल डिज़ाइन यूज़र इंटरफ़ेस के हिसाब से टाइल का डिज़ाइन बनाते हैं देखें.

  • Button: क्लिक किया जा सकता है गोल कॉम्पोनेंट, जिसे आइकॉन को शामिल करने के लिए डिज़ाइन किया गया है.

  • Chip: क्लिक किया जा सकता है स्टेडियम के आकार का कॉम्पोनेंट, जिसे दो पंक्तियों में टेक्स्ट और एक वैकल्पिक आइकन.

  • CompactChip: स्टेडियम के आकार का ऐसा कॉम्पोनेंट जिस पर क्लिक किया जा सकता है. इसे टेक्स्ट की लाइन को शामिल करने के लिए डिज़ाइन किया गया है.

  • TitleChip: Chip की तरह ही, स्टेडियम के आकार का ऐसा कॉम्पोनेंट जिसे क्लिक किया जा सकता है. हालांकि, इसका साइज़ बड़ा है लंबाई सेट कर सकते हैं.

  • CircularProgressIndicator: गोल आकार का प्रोगेस इंंडिकेटर जिसे स्क्रीन के किनारों के आस-पास की प्रोग्रेस दिखाने के लिए EdgeContentLayout स्क्रीन.

लेआउट कंटेनर

मटीरियल के साथ ये कंटेनर काम करते हैं लेआउट:

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

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

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

Kotlin

private fun myLayout(): LayoutElement =
    Row.Builder()
        .setWidth(wrap())
        .setHeight(expand())
        .setVerticalAlignment(VALIGN_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 को सबसे नीचे, जिसके बीच का हिस्सा कॉन्टेंट नहीं है.

  • MultiSlotLayout: प्राइमरी और सेकंडरी लेबल को पोज़िशन के बीच में रखें. साथ ही, उनके बीच वैकल्पिक कॉन्टेंट को रखें सबसे नीचे, CompactChip विकल्प मौजूद है.

  • MultiButtonLayout: मटीरियल के हिसाब से व्यवस्थित किए गए बटन के सेट को पोज़िशन करता है दिशा-निर्देशों का पालन करें.

  • 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: टेक्स्ट के साथ इमेज को रेंडर करता है.

उदाहरण के लिए, आप "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().
  • इसका इस्तेमाल करके ByteArray के तौर पर डाइनैमिक इमेज दें setInlineResource().

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()
);
}