টাইলস দিয়ে শুরু করুন

আপনার অ্যাপ থেকে টাইলস প্রদান শুরু করতে, আপনার অ্যাপের build.gradle ফাইলে নিম্নলিখিত নির্ভরতা অন্তর্ভুক্ত করুন।

গ্রোভি 

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"
}

কোটলিন

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")
}

মূল ধারণা

টাইলগুলি অ্যান্ড্রয়েড অ্যাপগুলির মতো তৈরি করা হয় না এবং বিভিন্ন ধারণা ব্যবহার করে:

  • লেআউট টেমপ্লেট: ডিসপ্লেতে ভিজ্যুয়াল উপাদানগুলির সামগ্রিক বিন্যাস সংজ্ঞায়িত করুন। একটি টাইল হয় একটি EdgeContentLayout লেআউট টেমপ্লেট ব্যবহার করে, যার মধ্যে ডিসপ্লের প্রান্তের চারপাশে একটি অগ্রগতি নির্দেশক , অথবা একটি PrimaryLayout , যা এই সূচকটি দেখায় না।
  • লেআউট উপাদান: একটি পৃথক গ্রাফিকাল উপাদান, যেমন একটি Button বা Chip , অথবা একটি Column , MultiButtonLayout , MultiSlotLayout বা অনুরূপ ব্যবহার করে একত্রে গোষ্ঠীভুক্ত বেশ কয়েকটি উপাদানের প্রতিনিধিত্ব করুন৷ এগুলি একটি লেআউট টেমপ্লেটের মধ্যে এমবেড করা হয়।
  • সম্পদ: ResourceBuilders.Resources অবজেক্টে Android রিসোর্স (ছবি) এর মূল-মান জোড়ার একটি মানচিত্র থাকে যা একটি লেআউট এবং একটি সংস্করণ রেন্ডার করার জন্য প্রয়োজন।
  • টাইমলাইন: একটি TimelineBuilders.Timeline অবজেক্ট হল একটি লেআউট অবজেক্টের এক বা একাধিক উদাহরণের তালিকা। রেন্ডারার কখন একটি লেআউট অবজেক্ট থেকে অন্য লেআউটে স্যুইচ করবে, যেমন একটি নির্দিষ্ট সময়ে একটি লেআউট দেখানো বন্ধ করার জন্য আপনি বিভিন্ন প্রক্রিয়া এবং এক্সপ্রেশন প্রদান করতে পারেন।
  • রাজ্য: StateBuilders.State ধরনের একটি ডেটা স্ট্রাকচার যা টাইল এবং অ্যাপের মধ্যে পাস করা হয়, যাতে দুটি উপাদান একে অপরের সাথে যোগাযোগ করতে সক্ষম হয়। উদাহরণস্বরূপ, যদি একটি বোতাম টাইলটিতে ট্যাপ করা হয়, তবে রাজ্য বোতামটির আইডি ধারণ করে। আপনি একটি মানচিত্র ব্যবহার করে ডেটা প্রকার বিনিময় করতে পারেন।
  • টাইল: একটি TileBuilders.Tile অবজেক্ট একটি টাইল প্রতিনিধিত্ব করে, একটি টাইমলাইন , একটি সংস্থান সংস্করণ আইডি , সতেজতা ব্যবধান এবং অবস্থা নিয়ে গঠিত।
  • প্রোটোলেআউট: এই শব্দটি বিভিন্ন টাইলস-সম্পর্কিত ক্লাসের নামে প্রদর্শিত হয় এবং Wear OS প্রোটোলেআউট লাইব্রেরি বোঝায়, একটি গ্রাফিক্স লাইব্রেরি যা বিভিন্ন 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

অনুমতি এবং অভিপ্রায় ফিল্টার এই পরিষেবাটিকে একটি টাইল প্রদানকারী হিসাবে নিবন্ধন করে।

ব্যবহারকারী যখন তাদের ফোনে বা ঘড়িতে টাইলস কনফিগার করে তখন আইকন, লেবেল, বিবরণ এবং পূর্বরূপের রিসোর্স তাদের দেখানো হয়।

আপনার অ্যাপ স্থাপন করুন, এবং টাইলস ক্যারোজেলে টাইল যুক্ত করুন ( একটি টাইলের পূর্বরূপ দেখার আরও বিকাশকারী-বান্ধব উপায় রয়েছে, তবে আপাতত এটি ম্যানুয়ালি করুন)।

চিত্র 1. "হ্যালো ওয়ার্ল্ড" টাইল।

একটি সম্পূর্ণ উদাহরণের জন্য, GitHub বা কোডল্যাবে কোড নমুনা দেখুন।

টাইলসের জন্য UI তৈরি করুন

একটি টাইলের বিন্যাস একটি বিল্ডার প্যাটার্ন ব্যবহার করে লেখা হয়। একটি টাইলের বিন্যাস একটি গাছের মতো তৈরি করা হয় যা লেআউট পাত্রে এবং মৌলিক লেআউট উপাদানগুলি নিয়ে গঠিত। প্রতিটি লেআউট উপাদানের বৈশিষ্ট্য রয়েছে, যা আপনি বিভিন্ন সেটার পদ্ধতির মাধ্যমে সেট করতে পারেন।

বেসিক লেআউট উপাদান

protolayout লাইব্রেরি থেকে নিম্নলিখিত ভিজ্যুয়াল উপাদানগুলি সমর্থিত, উপাদান উপাদানগুলির সাথে:

  • Text : পাঠ্যের একটি স্ট্রিং রেন্ডার করে, ঐচ্ছিকভাবে মোড়ানো।
  • Image : একটি ছবি রেন্ডার করে।
  • Spacer : উপাদানগুলির মধ্যে প্যাডিং প্রদান করে বা আপনি যখন এর পটভূমির রঙ সেট করেন তখন একটি বিভাজক হিসাবে কাজ করতে পারে।

উপাদান উপাদান

মৌলিক উপাদানগুলি ছাড়াও, protolayout-material লাইব্রেরি এমন উপাদানগুলি সরবরাহ করে যা মেটেরিয়াল ডিজাইন ব্যবহারকারী ইন্টারফেস সুপারিশের সাথে সঙ্গতিপূর্ণ একটি টাইল ডিজাইন নিশ্চিত করে।

  • Button : একটি আইকন ধারণ করার জন্য ডিজাইন করা ক্লিকযোগ্য বৃত্তাকার উপাদান।

  • Chip : ক্লিকযোগ্য স্টেডিয়াম-আকৃতির উপাদান যা দুই লাইন পর্যন্ত পাঠ্য এবং একটি ঐচ্ছিক আইকন ধারণ করার জন্য ডিজাইন করা হয়েছে।

  • CompactChip : ক্লিকযোগ্য স্টেডিয়াম-আকৃতির উপাদান যা পাঠ্যের একটি লাইন ধারণ করার জন্য ডিজাইন করা হয়েছে।

  • TitleChip : ক্লিকযোগ্য স্টেডিয়াম-আকৃতির উপাদান Chip মতো কিন্তু শিরোনাম পাঠ্যকে মিটমাট করার জন্য একটি বড় উচ্চতা সহ।

  • CircularProgressIndicator : বৃত্তাকার অগ্রগতি নির্দেশক যা একটি EdgeContentLayout ভিতরে স্ক্রিনের প্রান্তের চারপাশে অগ্রগতি প্রদর্শন করতে স্থাপন করা যেতে পারে।

লেআউট পাত্রে

উপাদান বিন্যাস সহ নিম্নলিখিত পাত্রে সমর্থিত:

  • Row : শিশু উপাদানগুলিকে অনুভূমিকভাবে একের পর এক করে দেয়।
  • Column : শিশু উপাদানগুলিকে উল্লম্বভাবে একের পর এক বিছিয়ে দেয়।
  • Box : শিশু উপাদানগুলিকে একটির উপরে ওভারলে করে।
  • Arc : শিশু উপাদানগুলিকে একটি বৃত্তের মধ্যে রাখে।
  • Spannable : পাঠ্য এবং চিত্রের আন্তঃলিভের সাথে পাঠ্যের বিভাগে নির্দিষ্ট FontStyles প্রয়োগ করে। আরও তথ্যের জন্য, Spannables দেখুন।

প্রতিটি পাত্রে এক বা একাধিক শিশু থাকতে পারে, যা নিজেরাও পাত্র হতে পারে। উদাহরণস্বরূপ, একটি Column শিশু হিসাবে একাধিক Row উপাদান থাকতে পারে, যার ফলে একটি গ্রিডের মতো বিন্যাস তৈরি হয়।

একটি উদাহরণ হিসাবে, একটি ধারক বিন্যাস এবং দুটি চাইল্ড লেআউট উপাদান সহ একটি টাইল এইরকম দেখতে পারে:

কোটলিন 

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

জাভা 

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 ডিফল্ট চেহারা এবং মেটাডেটা কাস্টমাইজ করতে পারি, যেমনটি নিম্নলিখিত কোড নমুনায় দেখানো হয়েছে:

কোটলিন 

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

জাভা 

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 : টেক্সট সহ একটি ইমেজ ইনলাইন রেন্ডার করে।

উদাহরণস্বরূপ, আপনি "হ্যালো ওয়ার্ল্ড" টাইলে "বিশ্ব" ইটালিক করতে পারেন এবং শব্দগুলির মধ্যে একটি চিত্র সন্নিবেশ করতে পারেন, যেমনটি নিম্নলিখিত কোড নমুনায় দেখানো হয়েছে:

কোটলিন 

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

জাভা 

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 লেআউট এলিমেন্টে একটি অ্যান্ড্রয়েড ইমেজ আইডি পাস করতে পারবেন না এবং এটি সমাধানের আশা করতে পারেন। পরিবর্তে, onTileResourcesRequest() পদ্ধতিটি ওভাররাইড করুন এবং ম্যানুয়ালি যে কোনও সংস্থান সরবরাহ করুন।

onTileResourcesRequest() পদ্ধতির মধ্যে ছবি প্রদান করার দুটি উপায় রয়েছে:

  • setAndroidResourceByResId() ব্যবহার করে একটি অঙ্কনযোগ্য সম্পদ প্রদান করুন।
  • setInlineResource() ব্যবহার করে একটি ByteArray হিসাবে একটি গতিশীল চিত্র প্রদান করুন।

কোটলিন 

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

জাভা 

@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()
);
}
{% শব্দার্থে %} {% endverbatim %} {% শব্দার্থে %} {% endverbatim %} ,

আপনার অ্যাপ থেকে টাইলস প্রদান শুরু করতে, আপনার অ্যাপের build.gradle ফাইলে নিম্নলিখিত নির্ভরতা অন্তর্ভুক্ত করুন।

গ্রোভি 

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"
}

কোটলিন

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")
}

মূল ধারণা

টাইলগুলি অ্যান্ড্রয়েড অ্যাপগুলির মতো তৈরি করা হয় না এবং বিভিন্ন ধারণা ব্যবহার করে:

  • লেআউট টেমপ্লেট: ডিসপ্লেতে ভিজ্যুয়াল উপাদানগুলির সামগ্রিক বিন্যাস সংজ্ঞায়িত করুন। একটি টাইল হয় একটি EdgeContentLayout লেআউট টেমপ্লেট ব্যবহার করে, যার মধ্যে ডিসপ্লের প্রান্তের চারপাশে একটি অগ্রগতি নির্দেশক , অথবা একটি PrimaryLayout , যা এই সূচকটি দেখায় না।
  • লেআউট উপাদান: একটি পৃথক গ্রাফিকাল উপাদান, যেমন একটি Button বা Chip , অথবা একটি Column , MultiButtonLayout , MultiSlotLayout বা অনুরূপ ব্যবহার করে একত্রে গোষ্ঠীভুক্ত বেশ কয়েকটি উপাদানের প্রতিনিধিত্ব করুন৷ এগুলি একটি লেআউট টেমপ্লেটের মধ্যে এমবেড করা হয়।
  • সম্পদ: ResourceBuilders.Resources অবজেক্টে Android রিসোর্স (ছবি) এর মূল-মান জোড়ার একটি মানচিত্র থাকে যা একটি লেআউট এবং একটি সংস্করণ রেন্ডার করার জন্য প্রয়োজন।
  • টাইমলাইন: একটি TimelineBuilders.Timeline অবজেক্ট হল একটি লেআউট অবজেক্টের এক বা একাধিক উদাহরণের তালিকা। রেন্ডারার কখন একটি লেআউট অবজেক্ট থেকে অন্য লেআউটে স্যুইচ করবে, যেমন একটি নির্দিষ্ট সময়ে একটি লেআউট দেখানো বন্ধ করার জন্য আপনি বিভিন্ন প্রক্রিয়া এবং এক্সপ্রেশন প্রদান করতে পারেন।
  • রাজ্য: StateBuilders.State ধরনের একটি ডেটা স্ট্রাকচার যা টাইল এবং অ্যাপের মধ্যে পাস করা হয়, যাতে দুটি উপাদান একে অপরের সাথে যোগাযোগ করতে সক্ষম হয়। উদাহরণস্বরূপ, যদি একটি বোতাম টাইলটিতে ট্যাপ করা হয়, তবে রাজ্য বোতামটির আইডি ধারণ করে। আপনি একটি মানচিত্র ব্যবহার করে ডেটা প্রকার বিনিময় করতে পারেন।
  • টাইল: একটি TileBuilders.Tile অবজেক্ট একটি টাইল প্রতিনিধিত্ব করে, একটি টাইমলাইন , একটি সংস্থান সংস্করণ আইডি , সতেজতা ব্যবধান এবং অবস্থা নিয়ে গঠিত।
  • প্রোটোলেআউট: এই শব্দটি বিভিন্ন টাইলস-সম্পর্কিত ক্লাসের নামে প্রদর্শিত হয় এবং Wear OS প্রোটোলেআউট লাইব্রেরি বোঝায়, একটি গ্রাফিক্স লাইব্রেরি যা বিভিন্ন 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

অনুমতি এবং অভিপ্রায় ফিল্টার এই পরিষেবাটিকে একটি টাইল প্রদানকারী হিসাবে নিবন্ধন করে।

ব্যবহারকারী যখন তাদের ফোনে বা ঘড়িতে টাইলস কনফিগার করে তখন আইকন, লেবেল, বিবরণ এবং পূর্বরূপের রিসোর্স তাদের দেখানো হয়।

আপনার অ্যাপ স্থাপন করুন, এবং টাইলস ক্যারোজেলে টাইল যুক্ত করুন ( একটি টাইলের পূর্বরূপ দেখার আরও বিকাশকারী-বান্ধব উপায় রয়েছে, তবে আপাতত এটি ম্যানুয়ালি করুন)।

চিত্র 1. "হ্যালো ওয়ার্ল্ড" টাইল।

একটি সম্পূর্ণ উদাহরণের জন্য, GitHub বা কোডল্যাবে কোড নমুনা দেখুন।

টাইলসের জন্য UI তৈরি করুন

একটি টাইলের বিন্যাস একটি বিল্ডার প্যাটার্ন ব্যবহার করে লেখা হয়। একটি টাইলের বিন্যাস একটি গাছের মতো তৈরি করা হয় যা লেআউট পাত্রে এবং মৌলিক লেআউট উপাদানগুলি নিয়ে গঠিত। প্রতিটি লেআউট উপাদানের বৈশিষ্ট্য রয়েছে, যা আপনি বিভিন্ন সেটার পদ্ধতির মাধ্যমে সেট করতে পারেন।

বেসিক লেআউট উপাদান

protolayout লাইব্রেরি থেকে নিম্নলিখিত ভিজ্যুয়াল উপাদানগুলি সমর্থিত, উপাদান উপাদানগুলির সাথে:

  • Text : পাঠ্যের একটি স্ট্রিং রেন্ডার করে, ঐচ্ছিকভাবে মোড়ানো।
  • Image : একটি ছবি রেন্ডার করে।
  • Spacer : উপাদানগুলির মধ্যে প্যাডিং প্রদান করে বা আপনি যখন এর পটভূমির রঙ সেট করেন তখন একটি বিভাজক হিসাবে কাজ করতে পারে।

উপাদান উপাদান

মৌলিক উপাদানগুলি ছাড়াও, protolayout-material লাইব্রেরি এমন উপাদানগুলি সরবরাহ করে যা মেটেরিয়াল ডিজাইন ব্যবহারকারী ইন্টারফেস সুপারিশের সাথে সঙ্গতিপূর্ণ একটি টাইল ডিজাইন নিশ্চিত করে।

  • Button : একটি আইকন ধারণ করার জন্য ডিজাইন করা ক্লিকযোগ্য বৃত্তাকার উপাদান।

  • Chip : ক্লিকযোগ্য স্টেডিয়াম-আকৃতির উপাদান যা দুই লাইন পর্যন্ত পাঠ্য এবং একটি ঐচ্ছিক আইকন ধারণ করার জন্য ডিজাইন করা হয়েছে।

  • CompactChip : ক্লিকযোগ্য স্টেডিয়াম-আকৃতির উপাদান যা পাঠ্যের একটি লাইন ধারণ করার জন্য ডিজাইন করা হয়েছে।

  • TitleChip : ক্লিকযোগ্য স্টেডিয়াম-আকৃতির উপাদান Chip মতো কিন্তু শিরোনাম পাঠ্যকে মিটমাট করার জন্য একটি বড় উচ্চতা সহ।

  • CircularProgressIndicator : বৃত্তাকার অগ্রগতি নির্দেশক যা একটি EdgeContentLayout ভিতরে স্ক্রিনের প্রান্তের চারপাশে অগ্রগতি প্রদর্শন করতে স্থাপন করা যেতে পারে।

লেআউট পাত্রে

উপাদান বিন্যাস সহ নিম্নলিখিত পাত্রে সমর্থিত:

  • Row : শিশু উপাদানগুলিকে অনুভূমিকভাবে একের পর এক করে দেয়।
  • Column : শিশু উপাদানগুলিকে উল্লম্বভাবে একের পর এক বিছিয়ে দেয়।
  • Box : শিশু উপাদানগুলিকে একটির উপরে ওভারলে করে।
  • Arc : শিশু উপাদানগুলিকে একটি বৃত্তের মধ্যে রাখে।
  • Spannable : পাঠ্য এবং চিত্রের আন্তঃলিভের সাথে পাঠ্যের বিভাগে নির্দিষ্ট FontStyles প্রয়োগ করে। আরও তথ্যের জন্য, Spannables দেখুন।

প্রতিটি পাত্রে এক বা একাধিক শিশু থাকতে পারে, যা নিজেরাও পাত্র হতে পারে। উদাহরণস্বরূপ, একটি Column শিশু হিসাবে একাধিক Row উপাদান থাকতে পারে, যার ফলে একটি গ্রিডের মতো বিন্যাস তৈরি হয়।

একটি উদাহরণ হিসাবে, একটি ধারক বিন্যাস এবং দুটি চাইল্ড লেআউট উপাদান সহ একটি টাইল এইরকম দেখতে পারে:

কোটলিন 

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

জাভা 

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 ডিফল্ট চেহারা এবং মেটাডেটা কাস্টমাইজ করতে পারি, যেমনটি নিম্নলিখিত কোড নমুনায় দেখানো হয়েছে:

কোটলিন 

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

জাভা 

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 : টেক্সট সহ একটি ইমেজ ইনলাইন রেন্ডার করে।

উদাহরণস্বরূপ, আপনি "হ্যালো ওয়ার্ল্ড" টাইলে "বিশ্ব" ইটালিক করতে পারেন এবং শব্দগুলির মধ্যে একটি চিত্র সন্নিবেশ করতে পারেন, যেমনটি নিম্নলিখিত কোড নমুনায় দেখানো হয়েছে:

কোটলিন 

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

জাভা 

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 লেআউট এলিমেন্টে একটি অ্যান্ড্রয়েড ইমেজ আইডি পাস করতে পারবেন না এবং এটি সমাধানের আশা করতে পারেন। পরিবর্তে, onTileResourcesRequest() পদ্ধতিটি ওভাররাইড করুন এবং ম্যানুয়ালি যে কোনও সংস্থান সরবরাহ করুন।

onTileResourcesRequest() পদ্ধতির মধ্যে ছবি প্রদান করার দুটি উপায় রয়েছে:

  • setAndroidResourceByResId() ব্যবহার করে একটি অঙ্কনযোগ্য সম্পদ প্রদান করুন।
  • setInlineResource() ব্যবহার করে একটি ByteArray হিসাবে একটি গতিশীল চিত্র প্রদান করুন।

কোটলিন 

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

জাভা 

@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()
);
}
{% শব্দার্থে %} {% endverbatim %} {% শব্দার্থে %} {% endverbatim %}