এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

রিলে এবং জেটপ্যাক কম্পোজ দিয়ে একটি সম্পূর্ণ অ্যাপ তৈরি করুন

1. আপনি শুরু করার আগে

রিলে হল একটি টুলকিট যা দলগুলিকে ফিগমাতে UI উপাদানগুলি ডিজাইন করতে দেয় এবং সেগুলি সরাসরি জেটপ্যাক কম্পোজ প্রকল্পগুলিতে ব্যবহার করতে দেয়৷ এটি ক্লান্তিকর ডিজাইন স্পেসিফিকেশন এবং QA চক্রের প্রয়োজনীয়তা দূর করে, যা দলগুলিকে দ্রুত দুর্দান্ত Android UI সরবরাহ করতে সহায়তা করে৷

এই কোডল্যাবে, আপনি কীভাবে আপনার রচনা বিকাশ প্রক্রিয়ায় রিলে UI প্যাকেজগুলিকে একীভূত করবেন তা শিখবেন। এটি ইন্টিগ্রেশন কৌশলগুলিতে ফোকাস করে, শেষ থেকে শেষ ওয়ার্কফ্লো নয়। রিলে-এর সাধারণ কর্মপ্রবাহ সম্পর্কে জানতে, রিলে বেসিক টিউটোরিয়াল দেখুন।

পূর্বশর্ত

রচনার সাথে প্রাথমিক অভিজ্ঞতা। আপনি যদি ইতিমধ্যে এটি না করে থাকেন তবে Jetpack Compose বেসিক কোডল্যাবটি সম্পূর্ণ করুন।
কোটলিন সিনট্যাক্সের সাথে অভিজ্ঞতা।

আপনি কি শিখবেন

কিভাবে UI প্যাকেজ আমদানি করতে হয়।
নেভিগেশন এবং ডেটা আর্কিটেকচারের সাথে UI প্যাকেজগুলিকে কীভাবে একীভূত করা যায়।
কন্ট্রোলার লজিক দিয়ে কীভাবে UI প্যাকেজগুলি মোড়ানো যায়।
আপনার রচনা থিমে ফিগমা শৈলীগুলি কীভাবে ম্যাপ করবেন।
জেনারেট কোডে বিদ্যমান কম্পোজেবলের সাথে UI প্যাকেজগুলি কীভাবে প্রতিস্থাপন করবেন।

আপনি কি নির্মাণ করবেন

একজন ডিজাইনার দ্বারা প্রদত্ত রিলে প্যাকেজের উপর ভিত্তি করে একটি বাস্তবসম্মত অ্যাপ ডিজাইন। অ্যাপটিকে রিফ্লেক্ট বলা হয়, একটি দৈনিক ট্র্যাকিং অ্যাপ যা মননশীলতা এবং ভাল অভ্যাসকে প্রচার করে। এটিতে বিভিন্ন ধরণের ট্র্যাকারের একটি সংগ্রহ রয়েছে এবং সেগুলিকে যুক্ত এবং পরিচালনা করার জন্য UI রয়েছে৷ অ্যাপটি নিচের ছবির মত দেখাচ্ছে:

সমাপ্ত অ্যাপ

আপনি কি প্রয়োজন হবে

অ্যান্ড্রয়েড স্টুডিও ইলেকট্রিক ইল বা তার পরে
একটি বিনামূল্যের ফিগমা অ্যাকাউন্ট এবং ব্যক্তিগত অ্যাক্সেস টোকেন

2. সেট আপ করুন

কোড পান

এই কোডল্যাবের জন্য কোড পেতে, নিম্নলিখিতগুলির মধ্যে একটি করুন:

GitHub থেকে relay-codelabs সংগ্রহস্থল ক্লোন করুন:

$ git clone https://github.com/googlecodelabs/relay-codelabs

গিটহাবের relay-codelabs সংগ্রহস্থলে নেভিগেট করুন, পছন্দসই শাখাটি নির্বাচন করুন এবং তারপরে কোড > জিপ ডাউনলোড করুন ক্লিক করুন এবং ডাউনলোড করা জিপ ফাইলটি আনপ্যাক করুন।

উভয় ক্ষেত্রেই, main শাখায় স্টার্টার কোড থাকে এবং end শাখায় সমাধান কোড থাকে।

অ্যান্ড্রয়েড স্টুডিও প্লাগইন এর জন্য রিলে ইনস্টল করুন

আপনার যদি ইতিমধ্যেই অ্যান্ড্রয়েড স্টুডিওর জন্য রিলে প্লাগইন না থাকে তবে এই পদক্ষেপগুলি অনুসরণ করুন:

অ্যান্ড্রয়েড স্টুডিওতে, সেটিংস > প্লাগইন-এ ক্লিক করুন।
টেক্সট বক্সে, Relay for Android Studio লিখুন।
অনুসন্ধান ফলাফলে প্রদর্শিত এক্সটেনশনে, ইনস্টল করুন ক্লিক করুন।

অ্যান্ড্রয়েড স্টুডিও প্লাগইন সেটিংস

আপনি যদি একটি তৃতীয় পক্ষের প্লাগইন গোপনীয়তা নোট ডায়ালগ দেখতে পান তবে স্বীকার করুন ক্লিক করুন৷
ওকে > রিস্টার্ট ক্লিক করুন।
আপনি যদি একটি নিশ্চিত প্রস্থান ডায়ালগ দেখতে পান, তাহলে প্রস্থান করুন ক্লিক করুন।

অ্যান্ড্রয়েড স্টুডিও ফিগমার সাথে সংযুক্ত করুন

রিলে ফিগমা API এর সাথে UI প্যাকেজগুলি পুনরুদ্ধার করে। এটি ব্যবহার করার জন্য, আপনার একটি বিনামূল্যের ফিগমা অ্যাকাউন্ট এবং একটি ব্যক্তিগত অ্যাক্সেস টোকেন প্রয়োজন, তাই কেন সেগুলি আপনার কী প্রয়োজন বিভাগে তালিকাভুক্ত করা হয়েছে৷

আপনি যদি ইতিমধ্যে ফিগমার সাথে Android স্টুডিও সংযুক্ত না করে থাকেন তবে এই পদক্ষেপগুলি অনুসরণ করুন:

আপনার ফিগমা অ্যাকাউন্টে, পৃষ্ঠার শীর্ষে আপনার প্রোফাইল আইকনে ক্লিক করুন এবং সেটিংস নির্বাচন করুন।
ব্যক্তিগত অ্যাক্সেস টোকেন বিভাগে, টেক্সট বক্সে টোকেনের জন্য একটি বিবরণ লিখুন এবং তারপরে Enter টিপুন (অথবা macOS এ return )। একটি টোকেন তৈরি হয়।
এই টোকেন অনুলিপি ক্লিক করুন.

Figma এ একটি অ্যাক্সেস টোকেন তৈরি করা হয়েছে

অ্যান্ড্রয়েড স্টুডিওতে, টুলস > রিলে সেটিংস নির্বাচন করুন। একটি রিলে সেটিংস ডায়ালগ প্রদর্শিত হবে৷
ফিগমা অ্যাক্সেস টোকেন টেক্সট বক্সে, অ্যাক্সেস টোকেন পেস্ট করুন এবং তারপর ওকে ক্লিক করুন। আপনার পরিবেশ সেট আপ করা হয়েছে.

3. অ্যাপের ডিজাইন পর্যালোচনা করুন

রিফ্লেক্ট অ্যাপের জন্য, আমরা অ্যাপের রঙ, টাইপোগ্রাফি, লেআউট এবং আচরণ নির্ধারণ করতে সাহায্য করার জন্য একজন ডিজাইনারের সাথে কাজ করেছি। আমরা মেটেরিয়াল ডিজাইন 3 কনভেনশন অনুসারে এই ডিজাইনগুলি তৈরি করেছি যাতে অ্যাপটি উপাদান উপাদান এবং থিমগুলির সাথে নির্বিঘ্নে কাজ করে।

হোম স্ক্রীন পর্যালোচনা করুন

হোম স্ক্রীন ব্যবহারকারী-সংজ্ঞায়িত ট্র্যাকারগুলির একটি তালিকা প্রদর্শন করে। এটি সক্রিয় দিন পরিবর্তন করতে এবং অন্যান্য ট্র্যাকার তৈরি করার জন্য affordances প্রদান করে।

হোম স্ক্রীন

ফিগমাতে, আমাদের ডিজাইনার এই স্ক্রীনটিকে একাধিক উপাদানে ভাগ করেছেন, তাদের API গুলিকে সংজ্ঞায়িত করেছেন এবং ফিগমা প্লাগইন এর জন্য রিলে দিয়ে প্যাকেজ করেছেন৷ এই উপাদানগুলি প্যাকেজ করার পরে, আপনি সেগুলিকে আপনার অ্যান্ড্রয়েড স্টুডিও প্রকল্পে আমদানি করতে পারেন৷

হোম স্ক্রীন উপাদান

যোগ/সম্পাদনা স্ক্রীন পর্যালোচনা করুন

যোগ/সম্পাদনা স্ক্রীন ব্যবহারকারীদের ট্র্যাকার যোগ বা সম্পাদনা করতে দেয়। প্রদর্শিত ফর্ম ট্র্যাকার ধরনের উপর ভিত্তি করে সামান্য ভিন্ন.

যোগ/সম্পাদনা পর্দা

একইভাবে, এই স্ক্রিনটি একাধিক প্যাকেজ উপাদানে বিভক্ত।

পর্দা উপাদান যোগ/সম্পাদনা

থিম পর্যালোচনা করুন

এই ডিজাইনের জন্য রঙ এবং টাইপোগ্রাফি ফিগমা শৈলী হিসাবে বাস্তবায়িত হয় মেটেরিয়াল ডিজাইন 3 টোকেন নামের উপর ভিত্তি করে। এটি রচনা থিম এবং উপাদান উপাদানগুলির সাথে আরও ভাল আন্তঃঅপারেবিলিটি প্রদান করে৷

ফিগমা শৈলী

4. UI প্যাকেজ আমদানি করুন

ফিগমা উৎসের লিঙ্ক পান

আপনি আপনার প্রকল্পে UI প্যাকেজগুলি আমদানি করার আগে, আপনাকে Figma-এ ডিজাইনের উত্স আপলোড করতে হবে৷

ফিগমা উৎসের লিঙ্ক পেতে, এই পদক্ষেপগুলি অনুসরণ করুন:

ফিগমাতে, ফাইল আমদানিতে ক্লিক করুন এবং তারপর CompleteAppCodelab প্রকল্প ফোল্ডারে পাওয়া ReflectDesign.fig ফাইলটি নির্বাচন করুন।
ফাইলটিতে ডান ক্লিক করুন এবং তারপরে লিঙ্কটি অনুলিপি করুন নির্বাচন করুন। আপনি পরবর্তী বিভাগে এটি প্রয়োজন.

প্রকল্পে UI প্যাকেজ আমদানি করুন

অ্যান্ড্রয়েড স্টুডিওতে, ./CompleteAppCodelab প্রকল্পটি খুলুন।
ফাইল > নতুন > UI প্যাকেজ আমদানি করুন ক্লিক করুন। একটি আমদানি UI প্যাকেজ ডায়ালগ প্রদর্শিত হবে৷
ফিগমা সোর্স ইউআরএল টেক্সট বক্সে, আগের বিভাগে যে ইউআরএল কপি করেছেন সেটি পেস্ট করুন।

অ্যাপ থিম টেক্সট বক্সে, com.google.relay.example.reflect.ui.theme.ReflectTheme লিখুন । এটি নিশ্চিত করে যে তৈরি করা পূর্বরূপগুলি কাস্টম থিম ব্যবহার করে।
পরবর্তী ক্লিক করুন. আপনি ফাইলের UI প্যাকেজগুলির একটি পূর্বরূপ দেখতে পাচ্ছেন।
তৈরি করুন ক্লিক করুন। প্যাকেজ আপনার প্রকল্পে আমদানি করা হয়.
প্রকল্প ট্যাবে নেভিগেট করুন এবং তারপরে ক্লিক করুন ui-packages ফোল্ডারের পাশে expander তীর।

UI-প্যাকেজ ফোল্ডার

ক্লিক করুন প্যাকেজ ফোল্ডারগুলির একটির পাশে প্রসারিত তীরটি চিহ্নিত করুন এবং তারপরে লক্ষ্য করুন যে এটিতে একটি JSON উত্স ফাইল এবং সম্পদ নির্ভরতা রয়েছে।
JSON সোর্স ফাইলটি খুলুন। রিলে মডিউল প্যাকেজ এবং এর API এর পূর্বরূপ প্রদর্শন করে।

কোড তৈরি করুন এবং জেনারেট করুন

অ্যান্ড্রয়েড স্টুডিওর শীর্ষে, ক্লিক করুন প্রকল্প তৈরি করুন । প্রতিটি প্যাকেজের জন্য জেনারেট করা কোড java/com.google.relay.example.reflect ফোল্ডারে যোগ করা হয়। তৈরি করা কম্পোজেবল ফিগমা ডিজাইন থেকে সমস্ত লেআউট এবং স্টাইলিং তথ্য ধারণ করে।
com/google/relay/example/reflect/range/Range.kt ফাইলটি খুলুন।
লক্ষ্য করুন যে প্রতিটি উপাদানের পরিবর্তনের জন্য কম্পোজ প্রিভিউ তৈরি করা হয়েছে। প্রয়োজনে, বিভক্ত ক্লিক করুন যাতে আপনি একে অপরের পাশে কোড এবং পূর্বরূপ প্যানগুলি দেখতে পান।

5. উপাদান একত্রিত করুন

এই বিভাগে, আপনি স্যুইচ ট্র্যাকারের জন্য জেনারেট করা কোডটি ঘনিষ্ঠভাবে দেখুন।

সুইচ ট্র্যাকার জন্য নকশা

অ্যান্ড্রয়েড স্টুডিওতে, com/google/relay/example/reflect/switch/Switch.kt ফাইলটি খুলুন।

Switch.kt (উত্পন্ন)

/**
 * This composable was generated from the UI Package 'switch'.
 * Generated code; don't edit directly.
 */
@Composable
fun Switch(
    modifier: Modifier = Modifier,
    isChecked: Boolean = false,
    emoji: String = "",
    title: String = ""
) {
    TopLevel(modifier = modifier) {
        if (isChecked) {
            ActiveOverlay(modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f)) {}
        }
        TopLevelSynth(modifier = Modifier.rowWeight(1.0f)) {
            Label(modifier = Modifier.rowWeight(1.0f)) {
                Emoji(emoji = emoji)
                Title(
                    title = title,
                    modifier = Modifier.rowWeight(1.0f)
                )
            }
            Checkmark {
                if (isChecked) {
                    Icon()
                }
            }
        }
    }
}

নিম্নলিখিত লক্ষ্য করুন:

ফিগমা ডিজাইন থেকে সমস্ত লেআউট এবং স্টাইলিং তৈরি করা হয়েছে।
উপ-উপাদানগুলি পৃথক কম্পোজেবলগুলিতে বিভক্ত।
কম্পোজেবল প্রিভিউ সব ডিজাইনের বৈচিত্রের জন্য তৈরি করা হয়।
রঙ এবং টাইপোগ্রাফি শৈলী হার্ডকোড করা হয়. আপনি পরে এটা ঠিক করুন.

ট্র্যাকার ঢোকান

অ্যান্ড্রয়েড স্টুডিওতে, java/com/google/relay/example/reflect/ui/components/TrackerControl.kt ফাইলটি খুলুন। এই ফাইলটি অভ্যাস ট্র্যাকারদের ডেটা এবং মিথস্ক্রিয়া যুক্তি প্রদান করে।
এমুলেটরে অ্যাপটি তৈরি করুন এবং চালান। বর্তমানে, এই উপাদানটি ট্র্যাকার মডেল থেকে কাঁচা ডেটা আউটপুট করে।

ফাইলে com.google.relay.example.reflect.switch.Switch প্যাকেজটি আমদানি করুন।
Text(text = trackerData.tracker.toString()) একটি when ব্লক দিয়ে প্রতিস্থাপন করুন যা trackerData.tracker.type ফিল্ডে পিভট করে।
when ব্লকের বডিতে, টাইপ TrackerType.BOOLEAN হলে Switch() Composable ফাংশনটিকে কল করুন।

আপনার কোড এই মত হওয়া উচিত:

TrackerControl.kt

// TODO: replace with Relay tracker components
when (trackerData.tracker.type) {
    TrackerType.BOOLEAN ->
        Switch(
          title = trackerData.tracker.name,
          emoji = trackerData.tracker.emoji
        )
    else ->
        Text(trackerData.tracker.toString())
}

প্রকল্পটি পুনর্নির্মাণ করুন। এখন হোমপেজ সঠিকভাবে স্যুইচ ট্র্যাকারকে লাইভ ডেটা দিয়ে ডিজাইন করা হয়েছে।

6. রাষ্ট্র এবং মিথস্ক্রিয়া যোগ করুন

UI প্যাকেজগুলি রাষ্ট্রহীন। যা রেন্ডার করা হয়েছে তা পাস করা পরামিতিগুলির একটি সাধারণ ফলাফল৷ কিন্তু বাস্তব অ্যাপগুলির মিথস্ক্রিয়া এবং রাষ্ট্রের প্রয়োজন৷ ইন্টারঅ্যাকশন হ্যান্ডলারগুলি অন্য যে কোনও প্যারামিটারের মতো জেনারেটেড কম্পোজেবলগুলিতে পাস করা যেতে পারে, তবে সেই হ্যান্ডলাররা ম্যানিপুলেট করে এমন অবস্থা আপনি কোথায় রাখবেন? আপনি কিভাবে প্রতিটি দৃষ্টান্তে একই হ্যান্ডলার পাস এড়াবেন? আপনি কিভাবে পুনরায় ব্যবহারযোগ্য কম্পোজেবলে প্যাকেজগুলির বিমূর্ত রচনাগুলি করতে পারেন? এই ক্ষেত্রে, আমরা সুপারিশ করি যে আপনি আপনার তৈরি করা প্যাকেজগুলিকে একটি কাস্টম Composable ফাংশনে মোড়ানো।

একটি কন্ট্রোলার `Composable` ফাংশনে UI প্যাকেজগুলি মোড়ানো

একটি কন্ট্রোলার Composable ফাংশনে UI প্যাকেজগুলি মোড়ানো আপনাকে উপস্থাপনা বা ব্যবসায়িক যুক্তি কাস্টমাইজ করতে দেয় এবং প্রয়োজনে স্থানীয় অবস্থা পরিচালনা করতে দেয়। ডিজাইনাররা আপনাকে র্যাপার কোড আপডেট করার প্রয়োজন ছাড়াই ফিগমাতে আসল UI প্যাকেজ আপডেট করতে এখনও বিনামূল্যে।

সুইচ ট্র্যাকারের জন্য একটি নিয়ামক তৈরি করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

অ্যান্ড্রয়েড স্টুডিওতে, java/com/google/relay/example/reflect/ui/components/SwitchControl.kt ফাইলটি খুলুন।
SwitchControl() Composable ফাংশনে, নিম্নলিখিত পরামিতিগুলি পাস করুন:

trackerData : একটি TrackerData অবজেক্ট
modifier : একটি ডেকোরেটর বস্তু
onLongClick : সম্পাদনা এবং মুছে ফেলার জন্য ট্র্যাকারগুলিতে দীর্ঘ প্রেস সক্রিয় করতে একটি ইন্টারঅ্যাকশন কলব্যাক

একটি Switch() ফাংশন সন্নিবেশ করুন এবং ক্লিক এবং দীর্ঘ প্রেস পরিচালনা করতে একটি combinedClickable পরিবর্তনকারীতে পাস করুন।
TrackerData অবজেক্ট থেকে Switch() ফাংশনে মান পাস করুন, isToggled() পদ্ধতি সহ।

সম্পূর্ণ SwitchControl() ফাংশনটি এই কোড স্নিপেটের মতো দেখাচ্ছে:

SwitchControl.kt

package com.google.relay.example.reflect.ui.components

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.google.relay.example.reflect.model.Tracker
import com.google.relay.example.reflect.model.TrackerData
import com.google.relay.example.reflect.model.TrackerType
import com.google.relay.example.reflect.switch.Switch

/*
 * A component for controlling switch-type trackers.
 *
 * SwitchControl is responsible for providing interaction and state management to the stateless
 * composable [Switch] generated by Relay. [onLongClick] provides a way for callers to supplement
 * the control's intrinsic interactions with, for example, a context menu.
 */
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SwitchControl(
    trackerData: TrackerData,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
) {
    Switch(
        modifier
            .clip(shape = RoundedCornerShape(size = 32.dp))
            .combinedClickable(onLongClick = onLongClick) {
                trackerData.toggle()
            },
        emoji = trackerData.tracker.emoji,
        title = trackerData.tracker.name,
        isChecked = trackerData.isToggled(),
    )
}

@Preview
@Composable
fun SwitchControllerPreview() {
    val data = TrackerData(
        Tracker(
            emoji = "🍕",
            name = "Ate Pizza",
            type = TrackerType.BOOLEAN
        )
    )
    SwitchControl(data)
}

TrackerControl.kt ফাইলে, Switch ইম্পোর্টটি সরান এবং তারপর SwitchControl() Switch() ফাংশনটি প্রতিস্থাপন করুন।
TrackerType.RANGE এবং TrackerType.COUNT গণনাকারী ধ্রুবকের জন্য কেস যোগ করুন।

সম্পূর্ণ when ব্লক এই কোড স্নিপেটের মত দেখায়:

TrackerControl.kt

when (trackerData.tracker.type) {
    TrackerType.BOOLEAN ->
        SwitchControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
    TrackerType.RANGE ->
        RangeControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
    TrackerType.COUNT ->
        ValueControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
}

প্রকল্পটি পুনর্নির্মাণ করুন। এখন আপনি ট্র্যাকারগুলির সাথে প্রদর্শন এবং ইন্টারঅ্যাক্ট করতে পারেন৷ হোম স্ক্রিন সম্পূর্ণ।

7. বিদ্যমান উপাদান মানচিত্র

রিলে ডেভেলপারদের বিদ্যমান কম্পোজেবলের সাথে UI প্যাকেজ প্রতিস্থাপন করে জেনারেট করা কোড কাস্টমাইজ করতে দেয়। এটি আপনার কোডে আউট-অফ-দ্য-বক্স উপাদান বা এমনকি কাস্টম ডিজাইন সিস্টেম আউটপুট করার একটি দুর্দান্ত উপায়।

একটি পাঠ্য ক্ষেত্র ম্যাপ করুন

নিম্নলিখিত চিত্রটি অ্যাড/এডিট ট্র্যাকার ডায়ালগে Tracker Settings উপাদানটির জন্য ডিজাইন:

সুইচ সেটিংস উপাদানের জন্য ডিজাইন

আমাদের ডিজাইনার ডিজাইনে একটি ReflectTextField ব্যবহার করেছেন, যার জন্য আমরা ইতিমধ্যেই মেটেরিয়াল ডিজাইন 3 টেক্সট ফিল্ডের উপরে তৈরি কোডে একটি বাস্তবায়ন করেছি। Figma নেটিভভাবে পাঠ্য ক্ষেত্র সমর্থন করে না, তাই রিলে দ্বারা উত্পন্ন ডিফল্ট কোড শুধুমাত্র নকশা মত দেখায়; এটি একটি কার্যকরী নিয়ন্ত্রণ নয়।

TrackerSettings জন্য বর্তমান বাস্তবায়ন পরীক্ষা করতে:

অ্যান্ড্রয়েড স্টুডিওতে, এমুলেটরে অ্যাপটি তৈরি করুন এবং চালান।
একটি ট্র্যাকার সারিতে দীর্ঘক্ষণ টিপুন এবং সম্পাদনা নির্বাচন করুন।
Title পাঠ্য ক্ষেত্রে আলতো চাপুন এবং নোট করুন যে এটি মিথস্ক্রিয়ায় সাড়া দেয় না।

এই উপাদানটির জন্য বাস্তব বাস্তবায়ন প্রতিস্থাপন করতে, আপনার দুটি জিনিসের প্রয়োজন: একটি পাঠ্য ক্ষেত্র UI প্যাকেজ এবং একটি ম্যাপিং ফাইল । সৌভাগ্যবশত আমাদের ডিজাইনার ইতিমধ্যেই ফিগমাতে আমাদের ডিজাইন সিস্টেমের উপাদানগুলি প্যাকেজ করেছেন এবং Tracker Settings জন্য তাদের ডিজাইনে একটি পাঠ্য ক্ষেত্রের উপাদান ব্যবহার করেছেন৷ ডিফল্টরূপে, এই নেস্টেড প্যাকেজটি নির্ভরতা হিসাবে তৈরি করা হয়, তবে আপনি এটি অদলবদল করতে উপাদান ম্যাপিং ব্যবহার করেন।

রিলে প্লাগইন ওভারলেড সহ পাঠ্য ক্ষেত্রের জন্য ফিগমা উপাদান

একটি ম্যাপিং ফাইল তৈরি করুন

রিলে ফর অ্যান্ড্রয়েড স্টুডিও প্লাগইন উপাদান ম্যাপিং ফাইল তৈরি করার জন্য একটি শর্টকাট প্রদান করে।

একটি ম্যাপিং ফাইল তৈরি করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

অ্যান্ড্রয়েড স্টুডিওতে, text_field UI প্যাকেজে ডান-ক্লিক করুন এবং তারপরে ম্যাপিং ফাইল তৈরি করুন নির্বাচন করুন।

ম্যাপিং ফাইলের প্রসঙ্গ মেনু আইটেম তৈরি করুন

একটি ম্যাপিং ফাইল ডায়ালগ দেখাবে। নিম্নলিখিত বিকল্পগুলি লিখুন:

টার্গেট কম্পোজেবল -এ, বিদ্যমান কম্পোজেবল ব্যবহার করুন নির্বাচন করুন এবং com.google.relay.example.reflect.ui.components.ReflectTextField লিখুন
জেনারেটেড ফাইলে , জেনারেট ইমপ্লিমেন্টেশন চেক করুন এবং জেনারেট কম্পোজ প্রিভিউ আনচেক করুন

ম্যাপিং ফাইল তৈরি করুন ক্লিক করুন। এটি নিম্নলিখিত ম্যাপিং ফাইল তৈরি করবে:

text_field.json

{
  "target": "ReflectTextField",
  "package": "com.google.relay.example.reflect.ui.components",
  "generateImplementation": true,
  "generatePreviews": false,
}

কম্পোনেন্ট-ম্যাপিং ফাইলগুলি একটি রচনা ক্লাস লক্ষ্য এবং প্যাকেজ এবং fieldMapping বস্তুর একটি ঐচ্ছিক সংগ্রহ সনাক্ত করে। এই ফিল্ড ম্যাপিংগুলি আপনাকে প্যাকেজ প্যারামিটারগুলিকে প্রত্যাশিত কম্পোজ প্যারামিটারে রূপান্তর করতে দেয়। এই ক্ষেত্রে, APIগুলি অভিন্ন, তাই আপনাকে শুধুমাত্র লক্ষ্য শ্রেণী নির্দিষ্ট করতে হবে।

প্রকল্পটি পুনর্নির্মাণ করুন।
trackersettings/ TrackerSettings.kt ফাইলে, জেনারেট করা TitleFieldStyleFilledStateEnabledTextConfigurationsInputText() কম্পোজযোগ্য ফাংশন খুঁজুন এবং মনে রাখবেন যে এতে একটি জেনারেট করা ReflectTextField উপাদান রয়েছে।

TrackerSettings.kt (উত্পন্ন)

@Composable
fun TitleFieldStyleFilledStateEnabledTextConfigurationsInputText(
    onTitleChanged: (String) -> Unit,
    title: String,
    modifier: Modifier = Modifier
) {
    ReflectTextField(
        onChange = onTitleChanged,
        labelText = "Title",
        leadingIcon = "search",
        trailingIcon = "cancel",
        supportingText = "Supporting text",
        inputText = title,
        state = State.Enabled,
        textConfigurations = TextConfigurations.InputText,
        modifier = modifier.fillMaxWidth(1.0f).requiredHeight(56.0.dp)
    )
}

প্রকল্পটি পুনর্নির্মাণ করুন। এখন আপনি ট্র্যাকার সেটিংস ক্ষেত্রের সাথে ইন্টারঅ্যাক্ট করতে পারেন। সম্পাদনা পর্দা সম্পূর্ণ হয়েছে.

8. থিম রচনা করতে মানচিত্র

ডিফল্টরূপে, রিলে রঙ এবং টাইপোগ্রাফির জন্য আক্ষরিক মান তৈরি করে। এটি অনুবাদের নির্ভুলতা নিশ্চিত করে, কিন্তু কম্পোজ থিমিং সিস্টেম ব্যবহার করতে উপাদানগুলিকে বাধা দেয়। আপনি যখন আপনার অ্যাপটিকে অন্ধকার মোডে দেখেন তখন এটি স্পষ্ট:

গাঢ় মোড ব্যবহার করে হোম স্ক্রিনের পূর্বরূপ এবং ভুল রং দেখানো

দিনের নেভিগেশন উপাদান প্রায় অদৃশ্য এবং রং ভুল. এটি ঠিক করার জন্য, আপনি আপনার জেনারেট করা কোডে থিম টোকেন রচনা করতে ফিগমা শৈলীগুলিকে লিঙ্ক করতে রিলে-তে স্টাইল-ম্যাপিং বৈশিষ্ট্যটি ব্যবহার করুন৷ এটি রিলে এবং মেটেরিয়াল ডিজাইন 3 উপাদানগুলির মধ্যে চাক্ষুষ সামঞ্জস্য বাড়ায় এবং অন্ধকার মোড সমর্থন সক্ষম করে।

একটি স্টাইল-ম্যাপিং ফাইল তৈরি করুন

অ্যান্ড্রয়েড স্টুডিওতে, src/main/ui-package-resources ডিরেক্টরিতে নেভিগেট করুন এবং style-mappings নামে একটি নতুন ডিরেক্টরি তৈরি করুন। সেই ডিরেক্টরিতে, একটি figma_styles.json ফাইল তৈরি করুন যাতে নিম্নলিখিত কোড থাকে:

figma_styles.json

{
  "figma": {
    "colors": {
      "Reflect Light/background": "md.sys.color.background",
      "Reflect Dark/background": "md.sys.color.background",
      "Reflect Light/on-background": "md.sys.color.on-background",
      "Reflect Dark/on-background": "md.sys.color.on-background",
      "Reflect Light/surface": "md.sys.color.surface",
      "Reflect Dark/surface": "md.sys.color.surface",
      "Reflect Light/on-surface": "md.sys.color.on-surface",
      "Reflect Dark/on-surface": "md.sys.color.on-surface",
      "Reflect Light/surface-variant": "md.sys.color.surface-variant",
      "Reflect Dark/surface-variant": "md.sys.color.surface-variant",
      "Reflect Light/on-surface-variant": "md.sys.color.on-surface-variant",
      "Reflect Dark/on-surface-variant": "md.sys.color.on-surface-variant",
      "Reflect Light/primary": "md.sys.color.primary",
      "Reflect Dark/primary": "md.sys.color.primary",
      "Reflect Light/on-primary": "md.sys.color.on-primary",
      "Reflect Dark/on-primary": "md.sys.color.on-primary",
      "Reflect Light/primary-container": "md.sys.color.primary-container",
      "Reflect Dark/primary-container": "md.sys.color.primary-container",
      "Reflect Light/on-primary-container": "md.sys.color.on-primary-container",
      "Reflect Dark/on-primary-container": "md.sys.color.on-primary-container",
      "Reflect Light/secondary-container": "md.sys.color.secondary-container",
      "Reflect Dark/secondary-container": "md.sys.color.secondary-container",
      "Reflect Light/on-secondary-container": "md.sys.color.on-secondary-container",
      "Reflect Dark/on-secondary-container": "md.sys.color.on-secondary-container",
      "Reflect Light/outline": "md.sys.color.outline",
      "Reflect Dark/outline": "md.sys.color.outline",
      "Reflect Light/error": "md.sys.color.error",
      "Reflect Dark/error": "md.sys.color.error"
    },
    "typography": {
      "symbols": {
        "Reflect/headline/large": "md.sys.typescale.headline-large",
        "Reflect/headline/medium": "md.sys.typescale.headline-medium",
        "Reflect/headline/small": "md.sys.typescale.headline-small",
        "Reflect/title/large": "md.sys.typescale.title-large",
        "Reflect/title/medium": "md.sys.typescale.title-medium",
        "Reflect/title/small": "md.sys.typescale.title-small",
        "Reflect/body/large": "md.sys.typescale.body-large",
        "Reflect/body/medium": "md.sys.typescale.body-medium",
        "Reflect/body/small": "md.sys.typescale.body-small",
        "Reflect/label/large": "md.sys.typescale.label-large",
        "Reflect/label/medium": "md.sys.typescale.label-medium",
        "Reflect/label/small": "md.sys.typescale.label-small"
      },
      "subproperties": {
        "fontFamily": "font",
        "fontWeight": "weight",
        "fontSize": "size",
        "letterSpacing": "tracking",
        "lineHeightPx": "line-height"
      }
    }
  },
  "compose": {
    "colors": {
      "md.sys.color.background": "MaterialTheme.colorScheme.background",
      "md.sys.color.error": "MaterialTheme.colorScheme.error",
      "md.sys.color.error-container": "MaterialTheme.colorScheme.errorContainer",
      "md.sys.color.inverse-on-surface": "MaterialTheme.colorScheme.inverseOnSurface",
      "md.sys.color.inverse-surface": "MaterialTheme.colorScheme.inverseSurface",
      "md.sys.color.on-background": "MaterialTheme.colorScheme.onBackground",
      "md.sys.color.on-error": "MaterialTheme.colorScheme.onError",
      "md.sys.color.on-error-container": "MaterialTheme.colorScheme.onErrorContainer",
      "md.sys.color.on-primary": "MaterialTheme.colorScheme.onPrimary",
      "md.sys.color.on-primary-container": "MaterialTheme.colorScheme.onPrimaryContainer",
      "md.sys.color.on-secondary": "MaterialTheme.colorScheme.onSecondary",
      "md.sys.color.on-secondary-container": "MaterialTheme.colorScheme.onSecondaryContainer",
      "md.sys.color.on-surface": "MaterialTheme.colorScheme.onSurface",
      "md.sys.color.on-surface-variant": "MaterialTheme.colorScheme.onSurfaceVariant",
      "md.sys.color.on-tertiary": "MaterialTheme.colorScheme.onTertiary",
      "md.sys.color.on-tertiary-container": "MaterialTheme.colorScheme.onTertiaryContainer",
      "md.sys.color.outline": "MaterialTheme.colorScheme.outline",
      "md.sys.color.primary": "MaterialTheme.colorScheme.primary",
      "md.sys.color.primary-container": "MaterialTheme.colorScheme.primaryContainer",
      "md.sys.color.secondary": "MaterialTheme.colorScheme.secondary",
      "md.sys.color.secondary-container": "MaterialTheme.colorScheme.secondaryContainer",
      "md.sys.color.surface": "MaterialTheme.colorScheme.surface",
      "md.sys.color.surface-variant": "MaterialTheme.colorScheme.surfaceVariant",
      "md.sys.color.tertiary": "MaterialTheme.colorScheme.tertiary",
      "md.sys.color.tertiary-container": "MaterialTheme.colorScheme.tertiaryContainer"
    },
    "typography": {
      "symbols": {
        "md.sys.typescale.display-large": "MaterialTheme.typography.displayLarge",
        "md.sys.typescale.display-medium": "MaterialTheme.typography.displayMedium",
        "md.sys.typescale.display-small": "MaterialTheme.typography.displaySmall",
        "md.sys.typescale.headline-large": "MaterialTheme.typography.headlineLarge",
        "md.sys.typescale.headline-medium": "MaterialTheme.typography.headlineMedium",
        "md.sys.typescale.headline-small": "MaterialTheme.typography.headlineSmall",
        "md.sys.typescale.title-large": "MaterialTheme.typography.titleLarge",
        "md.sys.typescale.title-medium": "MaterialTheme.typography.titleMedium",
        "md.sys.typescale.title-small": "MaterialTheme.typography.titleSmall",
        "md.sys.typescale.body-large": "MaterialTheme.typography.bodyLarge",
        "md.sys.typescale.body-medium": "MaterialTheme.typography.bodyMedium",
        "md.sys.typescale.body-small": "MaterialTheme.typography.bodySmall",
        "md.sys.typescale.label-large": "MaterialTheme.typography.labelLarge",
        "md.sys.typescale.label-medium": "MaterialTheme.typography.labelMedium",
        "md.sys.typescale.label-small": "MaterialTheme.typography.labelSmall"
      },
      "subproperties": {
        "font": "fontFamily",
        "weight": "fontWeight",
        "size": "fontSize",
        "tracking": "letterSpacing",
        "line-height": "lineHeight"
      }
    },
    "options": {
      "packages": {
        "MaterialTheme": "androidx.compose.material3"
      }
    }
  }
}

থিম ম্যাপিং ফাইল দুটি শীর্ষ-স্তরের বস্তুর সাথে গঠন করা হয়: figma এবং compose । এই বস্তুর অভ্যন্তরে, রঙ এবং প্রকারের সংজ্ঞা মধ্যবর্তী টোকেনের মাধ্যমে উভয় পরিবেশের মধ্যে সংযুক্ত করা হয়। এটি একাধিক ফিগমা শৈলীকে একটি একক রচনা থিম এন্ট্রিতে ম্যাপ করার অনুমতি দেয়, যা আপনি যখন হালকা এবং অন্ধকার থিম সমর্থন করেন তখন দরকারী।

ম্যাপিং ফাইলটি পর্যালোচনা করুন, বিশেষ করে এটি কীভাবে টাইপোগ্রাফি বৈশিষ্ট্যগুলিকে ফিগমা থেকে কম্পোজের প্রত্যাশায় রিম্যাপ করে৷

UI প্যাকেজ পুনরায় আমদানি করুন

আপনি একটি ম্যাপিং ফাইল তৈরি করার পরে, আপনাকে আপনার প্রোজেক্টে সমস্ত UI প্যাকেজ পুনরায় আমদানি করতে হবে কারণ একটি ম্যাপিং ফাইল সরবরাহ করা হয়নি বলে প্রাথমিক আমদানির সময় সমস্ত Figma শৈলী মান বাতিল করা হয়েছিল৷

UI প্যাকেজ পুনরায় আমদানি করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

অ্যান্ড্রয়েড স্টুডিওতে, ফাইল > নতুন > UI প্যাকেজ আমদানি করুন-এ ক্লিক করুন। একটি আমদানি UI প্যাকেজ ডায়ালগ প্রদর্শিত হবে৷
ফিগমা সোর্স ইউআরএল টেক্সট বক্সে , ফিগমা সোর্স ফাইলের ইউআরএল লিখুন।
থিম রচনা করার জন্য অনুবাদ ফিগমা শৈলী নির্বাচন করুন চেকবক্স।
কাস্টম কনফিগারেশন আমদানি করুন নির্বাচন করুন। ফোল্ডার আইকনে ক্লিক করুন তারপর আপনার তৈরি করা ফাইলটি নির্বাচন করুন: src/main/ui-package-resources/style-mappings/figma_styles.json
পরবর্তী ক্লিক করুন. আপনি ফাইলের UI প্যাকেজগুলির একটি পূর্বরূপ দেখতে পাচ্ছেন।
তৈরি করুন ক্লিক করুন। প্যাকেজ আপনার প্রকল্পে আমদানি করা হয়.

আমদানি UI প্যাকেজ ডায়ালগ

আপনার প্রকল্প পুনর্নির্মাণ করুন এবং তারপর জেনারেট কোড দেখতে switch/Switch.kt ফাইলটি খুলুন।

Switch.kt (উত্পন্ন)

@Composable
fun ActiveOverlay(
    modifier: Modifier = Modifier,
    content: @Composable RelayContainerScope.() -> Unit
) {
    RelayContainer(
        backgroundColor = MaterialTheme.colorScheme.surfaceVariant,
        isStructured = false,
        radius = 32.0,
        content = content,
        modifier = modifier.fillMaxWidth(1.0f).fillMaxHeight(1.0f)
    )
}

কম্পোজ থিম অবজেক্টের MaterialTheme.colorScheme.surfaceVariant ফিল্ডে backgroundColor প্যারামিটার কীভাবে সেট করা হয়েছে তা লক্ষ্য করুন।
প্রজেক্টটি চালান এবং এমুলেটরে ডার্ক মোডে স্যুইচ করুন। থিমটি সঠিকভাবে প্রয়োগ করা হয়েছে এবং ভিজ্যুয়াল বাগগুলি ঠিক করা হয়েছে৷

9. অভিনন্দন

অভিনন্দন! আপনি শিখেছেন কিভাবে আপনার রচনা অ্যাপে রিলেকে সংহত করতে হয়!

রিলে এবং জেটপ্যাক কম্পোজ দিয়ে একটি সম্পূর্ণ অ্যাপ তৈরি করুন

1. আপনি শুরু করার আগে

পূর্বশর্ত

আপনি কি শিখবেন

আপনি কি নির্মাণ করবেন

আপনি কি প্রয়োজন হবে

2. সেট আপ করুন

কোড পান

অ্যান্ড্রয়েড স্টুডিও প্লাগইন এর জন্য রিলে ইনস্টল করুন

অ্যান্ড্রয়েড স্টুডিও ফিগমার সাথে সংযুক্ত করুন

3. অ্যাপের ডিজাইন পর্যালোচনা করুন

হোম স্ক্রীন পর্যালোচনা করুন

যোগ/সম্পাদনা স্ক্রীন পর্যালোচনা করুন

থিম পর্যালোচনা করুন

4. UI প্যাকেজ আমদানি করুন

ফিগমা উৎসের লিঙ্ক পান

প্রকল্পে UI প্যাকেজ আমদানি করুন

কোড তৈরি করুন এবং জেনারেট করুন

5. উপাদান একত্রিত করুন

Switch.kt (উত্পন্ন)

ট্র্যাকার ঢোকান

TrackerControl.kt

6. রাষ্ট্র এবং মিথস্ক্রিয়া যোগ করুন

একটি কন্ট্রোলার Composable ফাংশনে UI প্যাকেজগুলি মোড়ানো

SwitchControl.kt

TrackerControl.kt

7. বিদ্যমান উপাদান মানচিত্র

একটি পাঠ্য ক্ষেত্র ম্যাপ করুন

একটি ম্যাপিং ফাইল তৈরি করুন

text_field.json

TrackerSettings.kt (উত্পন্ন)

8. থিম রচনা করতে মানচিত্র

একটি স্টাইল-ম্যাপিং ফাইল তৈরি করুন

figma_styles.json

UI প্যাকেজ পুনরায় আমদানি করুন

Switch.kt (উত্পন্ন)

9. অভিনন্দন

আরও জানুন

একটি কন্ট্রোলার `Composable` ফাংশনে UI প্যাকেজগুলি মোড়ানো