মাইগ্রেশন স্ট্র্যাটেজি

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

Jetpack Compose-কে শুরু থেকেই ভিউ ইন্টারঅপারেবিলিটির সাথে ডিজাইন করা হয়েছে। এই কার্যকারিতার অর্থ হল, আপনি নতুন ফিচার তৈরি করার সময়ও আপনার আগে থেকে থাকা ভিউ-ভিত্তিক অ্যাপ Compose-এ মাইগ্রেট করতে পারবেন। Compose-এ মাইগ্রেট করার জন্য, আমরা ইনক্রিমেন্টাল মাইগ্রেশনের সাজেশন দিই যেখানে আপনার অ্যাপ সম্পূর্ণভাবে Compose-এ না আসা পর্যন্ত আপনার কোডবেসে Compose এবং Views একসাথে থাকে।

View-ভিত্তিক অ্যাপ Compose-এ মাইগ্রেট করার ধাপগুলি
ছবি ১. Compose-এ ভিউ-ভিত্তিক অ্যাপের মাইগ্রেশনের ধাপ

Compose-এ আপনার অ্যাপ মাইগ্রেট করতে, এই ধাপগুলি অনুসরণ করুন:

  1. Compose-এর মাধ্যমে নতুন স্ক্রিন তৈরি করা।
  2. আপনি ফিচার তৈরি করার সময়, আবার ব্যবহার করা যাবে এমন এলিমেন্ট শনাক্ত করুন এবং সাধারণ UI কম্পোনেন্টের লাইব্রেরি তৈরি করা শুরু করুন।
  3. একবারে একটি স্ক্রিনে আগে থেকে থাকা ফিচার পরিবর্তন করুন।

Compose-এর মাধ্যমে নতুন স্ক্রিন তৈরি করা

Compose ব্যবহার করে নতুন ফিচার তৈরি করা যা পুরো স্ক্রিন জুড়ে থাকে, তা হল Compose-এর ব্যবহার বাড়ানোর সেরা উপায়। এই স্ট্র্যাটেজির মাধ্যমে, আপনি ফিচার যোগ করতে এবং আপনার কোম্পানির ব্যবসায়িক প্রয়োজন পূরণ করার সাথে সাথে Compose-এর সুবিধা নিতে পারবেন।

Compose-এ লেখা নতুন স্ক্রিন
ছবি ২. Compose-এ লেখা নতুন স্ক্রিন

আপনার আগে থেকে থাকা অ্যাপে নতুন স্ক্রিন তৈরি করতে Compose ব্যবহার করার সময়, আপনি এখনও আপনার অ্যাপের আর্কিটেকচারের সীমাবদ্ধতার মধ্যে কাজ করছেন। আপনি যদি Fragments এবং Navigation কম্পোনেন্ট ব্যবহার করেন, তাহলে আপনাকে একটি নতুন Fragment তৈরি করতে হবে এবং Compose-এ এর কন্টেন্ট থাকতে হবে।

ফ্র্যাগমেন্টে Compose ব্যবহার করতে, আপনার ফ্র্যাগমেন্টের onCreateView() লাইফসাইকেল পদ্ধতিতে ComposeView রিটার্ন করুন। ComposeView-এ একটি setContent() পদ্ধতি আছে যেখানে আপনি কম্পোজেবল ফাংশন প্রদান করতে পারবেন।

class NewFeatureFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                NewFeatureScreen()
            }
        }
    }
}

আরও জানতে Fragments-এ ComposeView দেখুন।

আগে থেকে থাকা স্ক্রিনে নতুন ফিচার যোগ করা

মিক্সড ভিউ ও Compose সহ আগে থেকে থাকা স্ক্রিন
ছবি ৩। মিক্সড ভিউ ও কম্পোজ সহ আগে থেকে থাকা স্ক্রিন

আপনি যে নতুন ফিচার যোগ করছেন সেটি আগে থেকে থাকা স্ক্রিনের অংশ হলে, আগে থেকে থাকা ভিউ-ভিত্তিক স্ক্রিনেও Compose ব্যবহার করতে পারবেন। এটি করতে, অন্য যেকোনও ভিউয়ের মতো ভিউ হায়ারার্কিতে একটি ComposeView যোগ করুন।

যেমন, ধরুন আপনি LinearLayout-এ চাইল্ড ভিউ যোগ করতে চান। আপনি XML-এ নিম্নলিখিত উপায়ে এটি করতে পারবেন:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <TextView
      android:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

  <androidx.compose.ui.platform.ComposeView
      android:id="@+id/compose_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
</LinearLayout>

ভিউ ইনফ্লেট করা হয়ে গেলে, আপনি পরে হায়ারার্কিতে ComposeView রেফারেন্স করতে এবং setContent() কল করতে পারবেন।

ComposeView সম্পর্কে আরও জানতে, ইন্টারঅপারেবিলিটি API চেক করুন।

সাধারণ UI কম্পোনেন্টের লাইব্রেরি তৈরি করা

Compose-এর সাহায্যে ফিচার তৈরি করার সময় আপনি দ্রুত বুঝতে পারবেন যে আপনি কম্পোনেন্টের একটি লাইব্রেরি তৈরি করে ফেলেছেন। সাধারণ UI কম্পোনেন্টের লাইব্রেরি তৈরি করলে আপনার অ্যাপে এইসব কম্পোনেন্টের জন্য single source of truth থাকে এবং পুনর্ব্যবহারযোগ্যতা বাড়ে। আপনি যে ফিচার তৈরি করবেন তা এই লাইব্রেরির উপর নির্ভর করতে পারে। আপনি Compose-এ কাস্টম ডিজাইন সিস্টেম তৈরি করলে, এই টেকনিক বিশেষভাবে উপযোগী।

আপনার অ্যাপের সাইজের উপর নির্ভর করে, এই লাইব্রেরি একটি আলাদা প্যাকেজ, মডিউল বা লাইব্রেরি মডিউল হতে পারে। আপনার অ্যাপে মডিউল সাজানোর ব্যাপারে আরও তথ্যের জন্য, Android অ্যাপ মডিউলারাইজেশন সংক্রান্ত গাইড দেখুন।

Compose-এর মাধ্যমে আগে থেকে থাকা ফিচার পরিবর্তন করা

নতুন ফিচার তৈরি করার জন্য Compose ব্যবহার করার পাশাপাশি, আপনি ধীরে ধীরে আপনার অ্যাপে আগে থেকে থাকা ফিচারগুলি মাইগ্রেট করতে চাইবেন যাতে Compose-এর সুবিধা নিতে পারেন।

আপনার অ্যাপে শুধু Compose থাকলে, আপনার ডেভেলপমেন্টের গতি বাড়াতে পারে এবং আপনার অ্যাপের APK সাইজ ও বিল্ড টাইম কমাতে পারে। আরও জানতে, Compose ও View-এর পারফর্ম্যান্সের তুলনা করুন দেখুন।

সহজ স্ক্রিন

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

নিম্নলিখিত XML ফাইলটি নিন:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <TextView
      android:id="@+id/title_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/title"
      android:textAppearance="?attr/textAppearanceHeadline2" />

  <TextView
      android:id="@+id/subtitle_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/subtitle"
      android:textAppearance="?attr/textAppearanceHeadline6" />

  <TextView
      android:id="@+id/body_text"
      android:layout_width="wrap_content"
      android:layout_height="0dp"
      android:layout_weight="1"
      android:text="@string/body"
      android:textAppearance="?attr/textAppearanceBody1" />

  <Button
      android:id="@+id/confirm_button"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="@string/confirm"/>
</LinearLayout>

XML ফাইলটি Compose-এ কয়েকটি লাইনে আবার লেখা যেতে পারে:

@Composable
fun SimpleScreen() {
    Column(Modifier.fillMaxSize()) {
        Text(
            text = stringResource(R.string.title),
            style = MaterialTheme.typography.headlineMedium
        )
        Text(
            text = stringResource(R.string.subtitle),
            style = MaterialTheme.typography.headlineSmall
        )
        Text(
            text = stringResource(R.string.body),
            style = MaterialTheme.typography.bodyMedium
        )
        Spacer(modifier = Modifier.weight(1f))
        Button(onClick = { /* Handle click */ }, Modifier.fillMaxWidth()) {
            Text(text = stringResource(R.string.confirm))
        }
    }
}

মিক্সড ভিউ এবং Compose স্ক্রিন

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

মিক্সড ভিউ এবং কম্পোজ UI-কে কম্পোজে মাইগ্রেট করার বটম-আপ অ্যাপ্রোচ
ছবি ৪. মিক্সড ভিউ এবং Compose UI-কে Compose-এ মাইগ্রেট করার বটম-আপ অ্যাপ্রোচ

ফ্র্যাগমেন্ট ও নেভিগেশন কম্পোনেন্ট সরানো হচ্ছে

আপনি সব ফ্র্যাগমেন্ট সরিয়ে সংশ্লিষ্ট স্ক্রিন-লেভেল কম্পোজেবল দিয়ে প্রতিস্থাপন করার পরে Navigation Compose-এ মাইগ্রেট করতে পারবেন। স্ক্রিন-লেভেল কম্পোজেবলে Compose ও View কন্টেন্টের মিশ্রণ থাকতে পারে, তবে Navigation Compose মাইগ্রেশন চালু করতে সব নেভিগেশন ডেস্টিনেশন কম্পোজেবল হতে হবে। ততক্ষণ পর্যন্ত, আপনার মিক্সড ভিউ এবং কম্পোজ কোডবেসে ফ্র্যাগমেন্ট-ভিত্তিক নেভিগেশন কম্পোনেন্ট ব্যবহার করা চালিয়ে যেতে হবে। আরও তথ্যের জন্য Jetpack Navigation থেকে Navigation Compose-এ মাইগ্রেট করুন দেখুন।

অতিরিক্ত রিসোর্স

আপনার আগে থেকে থাকা View-ভিত্তিক অ্যাপ Compose-এ মাইগ্রেট করার ব্যাপারে আরও জানতে, নিচে উল্লেখ করা অতিরিক্ত রিসোর্স চেক করে দেখুন:

পরবর্তী ধাপ

এখন আপনি জেনে গেছেন যে আপনার আগে থেকে থাকা ভিউ-ভিত্তিক অ্যাপ মাইগ্রেট করার জন্য কোন স্ট্র্যাটেজি নিতে পারেন, আরও জানতে ইন্টারঅপারেবিলিটি API এক্সপ্লোর করুন।