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

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

গ্রোভি

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

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

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

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

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

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

কোটলিন

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

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

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

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

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

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

একটি টাইল তৈরি করুন

আপনার অ্যাপ্লিকেশন থেকে একটি টাইল প্রদান করতে, একটি ক্লাস তৈরি করুন যা TileService প্রসারিত করে এবং পদ্ধতিগুলি প্রয়োগ করুন, যেমনটি নিম্নলিখিত কোড নমুনায় দেখানো হয়েছে:

কোটলিন

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

জাভা

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

এরপর, আপনার AndroidManifest.xml ফাইলের <application> ট্যাগের ভিতরে একটি পরিষেবা যোগ করুন।

<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() ব্যবহার করুন।

টাইলসের জন্য 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(VALIGN_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 %}