ভিউ-এ কম্পোজ ব্যবহার করা

আপনি একটি বিদ্যমান অ্যাপে কম্পোজ-ভিত্তিক UI যোগ করতে পারেন যা একটি ভিউ-ভিত্তিক ডিজাইন ব্যবহার করে।

একটি নতুন, সম্পূর্ণরূপে রচনা-ভিত্তিক স্ক্রীন তৈরি করতে, আপনার ক্রিয়াকলাপটিকে setContent() পদ্ধতিতে কল করুন এবং আপনার পছন্দ মতো কম্পোজযোগ্য ফাংশনগুলি পাস করুন৷ 

class ExampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent { // In here, we can call composables!
            MaterialTheme {
                Greeting(name = "compose")
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}
InteroperabilityAPIsSnippets.kt

এই কোডটি ঠিক তেমনই দেখায় যা আপনি একটি রচনা-শুধু অ্যাপে পাবেন৷

ComposeView এর জন্য ViewCompositionStrategy

ViewCompositionStrategy সংজ্ঞায়িত করে কখন রচনাটি নিষ্পত্তি করা উচিত। ডিফল্ট, ViewCompositionStrategy.Default , যখন অন্তর্নিহিত ComposeView উইন্ডো থেকে বিচ্ছিন্ন হয় তখন কম্পোজিশনটি নিষ্পত্তি করে, যদি না এটি একটি পুলিং কন্টেইনার যেমন একটি RecyclerView এর অংশ হয়। একটি একক-অ্যাক্টিভিটি কম্পোজ-অনলি অ্যাপে, এই ডিফল্ট আচরণটি যা আপনি চান, তবে, আপনি যদি আপনার কোডবেসে ক্রমবর্ধমানভাবে রচনা যোগ করেন, এই আচরণটি কিছু পরিস্থিতিতে রাষ্ট্রীয় ক্ষতির কারণ হতে পারে।

ViewCompositionStrategy পরিবর্তন করতে, setViewCompositionStrategy() পদ্ধতিতে কল করুন এবং একটি ভিন্ন কৌশল প্রদান করুন।

নীচের সারণীটি বিভিন্ন পরিস্থিতিতে আপনি ViewCompositionStrategy ব্যবহার করতে পারেন তার সংক্ষিপ্ত বিবরণ:

ViewCompositionStrategy বর্ণনা এবং ইন্টারপ দৃশ্যকল্প
DisposeOnDetachedFromWindow অন্তর্নিহিত ComposeView উইন্ডো থেকে বিচ্ছিন্ন হলে রচনাটি নিষ্পত্তি করা হবে। এরপর থেকে DisposeOnDetachedFromWindowOrReleasedFromPool দ্বারা বাতিল করা হয়েছে।

ইন্টারপ দৃশ্যকল্প:

* ComposeView এটি ভিউ অনুক্রমের একমাত্র উপাদান কিনা, অথবা একটি মিশ্র ভিউ/কম্পোজ স্ক্রিনের প্রেক্ষাপটে (ফ্র্যাগমেন্টে নয়)।
DisposeOnDetachedFromWindowOrReleasedFromPool ( ডিফল্ট ) DisposeOnDetachedFromWindow এর অনুরূপ, যখন রচনাটি পুলিং পাত্রে থাকে না, যেমন একটি RecyclerView । যদি এটি একটি পুলিং পাত্রে থাকে, তাহলে এটি নিষ্পত্তি করা হবে যখন হয় পুলিং পাত্রটি নিজেই জানালা থেকে বিচ্ছিন্ন হয়, অথবা যখন আইটেমটি বাতিল করা হয় (অর্থাৎ যখন পুলটি পূর্ণ হয়)।

ইন্টারপ দৃশ্যকল্প:

* ComposeView এটি ভিউ অনুক্রমের একমাত্র উপাদান কিনা, অথবা একটি মিশ্র ভিউ/কম্পোজ স্ক্রিনের প্রেক্ষাপটে (ফ্র্যাগমেন্টে নয়)।
* RecyclerView এর মতো পুলিং পাত্রে একটি আইটেম হিসাবে ComposeView ।
DisposeOnLifecycleDestroyed প্রদত্ত Lifecycle ধ্বংস হয়ে গেলে রচনাটি নিষ্পত্তি করা হবে।

ইন্টারপ দৃশ্যকল্প

* একটি ফ্র্যাগমেন্টের ভিউতে ComposeView ।
DisposeOnViewTreeLifecycleDestroyed কম্পোজিশনটি নিষ্পত্তি করা হবে যখন LifecycleOwner মালিকানাধীন Lifecycle ViewTreeLifecycleOwner.get দ্বারা ফেরত দেওয়া পরবর্তী উইন্ডোটির ভিউ সংযুক্ত করা হয়েছে ধ্বংস হয়ে যাবে৷

ইন্টারপ দৃশ্যকল্প:

* একটি ফ্র্যাগমেন্টের ভিউতে ComposeView ।
* এমন একটি দৃশ্যে ComposeView যেখানে জীবনচক্র এখনও জানা যায়নি।

টুকরো টুকরো ComposeView

আপনি যদি একটি খণ্ড বা একটি বিদ্যমান ভিউ লেআউটে কম্পোজ UI বিষয়বস্তু অন্তর্ভুক্ত করতে চান, ComposeView ব্যবহার করুন এবং এর setContent() পদ্ধতিতে কল করুন। ComposeView হল একটি Android View ।

আপনি অন্য যেকোন View মত আপনার XML লেআউটে ComposeView রাখতে পারেন:

<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>
migration_strategy_existing_screens.xml

কোটলিন সোর্স কোডে, XML-এ সংজ্ঞায়িত লেআউট রিসোর্স থেকে লেআউটটি স্ফীত করুন। তারপর XML আইডি ব্যবহার করে ComposeView পান, হোস্ট View এর জন্য সবচেয়ে ভালো কাজ করে এমন একটি কম্পোজিশনের কৌশল সেট করুন এবং কম্পোজ ব্যবহার করার জন্য setContent() কল করুন। 

class ExampleFragmentXml : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        val view = inflater.inflate(R.layout.fragment_example, container, false)
        val composeView = view.findViewById<ComposeView>(R.id.compose_view)
        composeView.apply {
            // Dispose of the Composition when the view's LifecycleOwner
            // is destroyed
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                // In Compose world
                MaterialTheme {
                    Text("Hello Compose!")
                }
            }
        }
        return view
    }
}
InteroperabilityAPIsSnippets.kt

বিকল্পভাবে, আপনি আপনার XML লেআউট ফাইলের জন্য জেনারেটেড বাইন্ডিং ক্লাস রেফারেন্স করে ComposeView এর রেফারেন্স পেতে ভিউ বাইন্ডিং ব্যবহার করতে পারেন: 

class ExampleFragment : Fragment() {

    private var _binding: FragmentExampleBinding? = null

    // This property is only valid between onCreateView and onDestroyView.
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        _binding = FragmentExampleBinding.inflate(inflater, container, false)
        val view = binding.root
        binding.composeView.apply {
            // Dispose of the Composition when the view's LifecycleOwner
            // is destroyed
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                // In Compose world
                MaterialTheme {
                    Text("Hello Compose!")
                }
            }
        }
        return view
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}
InteroperabilityAPIsSnippets.kt

দুটি সামান্য ভিন্ন পাঠ্য উপাদান, একটি অন্যটির উপরে

চিত্র 1. এটি কোডের আউটপুট দেখায় যা একটি ভিউ UI শ্রেণিবিন্যাসে রচনা উপাদান যুক্ত করে। "হ্যালো অ্যান্ড্রয়েড!" পাঠ্য একটি TextView উইজেট দ্বারা প্রদর্শিত হয়। "হ্যালো রচনা!" পাঠ্য একটি রচনা পাঠ উপাদান দ্বারা প্রদর্শিত হয়।

আপনার পূর্ণ স্ক্রীন রচনার সাথে নির্মিত হলে আপনি সরাসরি একটি খণ্ডে একটি ComposeView অন্তর্ভুক্ত করতে পারেন, যা আপনাকে একটি XML লেআউট ফাইল সম্পূর্ণরূপে ব্যবহার করা এড়াতে দেয়। 

class ExampleFragmentNoXml : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            // Dispose of the Composition when the view's LifecycleOwner
            // is destroyed
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                MaterialTheme {
                    // In Compose world
                    Text("Hello Compose!")
                }
            }
        }
    }
}
InteroperabilityAPIsSnippets.kt

একই লেআউটে একাধিক ComposeView দৃষ্টান্ত

একই লেআউটে একাধিক ComposeView উপাদান থাকলে, savedInstanceState কাজ করার জন্য প্রত্যেকটির একটি অনন্য আইডি থাকতে হবে। 

class ExampleFragmentMultipleComposeView : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View = LinearLayout(requireContext()).apply {
        addView(
            ComposeView(requireContext()).apply {
                setViewCompositionStrategy(
                    ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
                )
                id = R.id.compose_view_x
                // ...
            }
        )
        addView(TextView(requireContext()))
        addView(
            ComposeView(requireContext()).apply {
                setViewCompositionStrategy(
                    ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
                )
                id = R.id.compose_view_y
                // ...
            }
        )
    }
}
InteroperabilityAPIsSnippets.kt

ComposeView ID গুলো res/values/ids.xml ফাইলে সংজ্ঞায়িত করা হয়েছে:

<resources>
  <item name="compose_view_x" type="id" />
  <item name="compose_view_y" type="id" />
</resources>
ids.xml

লেআউট এডিটরে কম্পোজেবলের পূর্বরূপ দেখুন

আপনি একটি ComposeView ধারণকারী আপনার XML লেআউটের জন্য লেআউট সম্পাদকের মধ্যে কম্পোজেবলগুলির পূর্বরূপ দেখতে পারেন। এটি করার ফলে আপনি মিশ্র ভিউ এবং কম্পোজ লেআউটের মধ্যে আপনার কম্পোজেবলগুলি দেখতে পাবেন।

বলুন আপনি লেআউট এডিটরে নিম্নলিখিত কম্পোজেবল প্রদর্শন করতে চান। মনে রাখবেন যে লেআউট এডিটরে প্রিভিউ করার জন্য @Preview Preview-এর সাথে টীকা করা কম্পোজেবলগুলি ভাল প্রার্থী। 

@Preview
@Composable
fun GreetingPreview() {
    Greeting(name = "Android")
}
InteroperabilityAPIsSnippets.kt

এই কম্পোজেবল প্রদর্শন করতে, tools:composableName টুলস অ্যাট্রিবিউট ব্যবহার করুন এবং লেআউটে প্রিভিউ করার জন্য কম্পোজেবলের সম্পূর্ণ যোগ্য নামের সাথে এর মান সেট করুন।

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

  <androidx.compose.ui.platform.ComposeView
      android:id="@+id/my_compose_view"
      tools:composableName="com.example.compose.snippets.interop.InteroperabilityAPIsSnippetsKt.GreetingPreview"
      android:layout_height="match_parent"
      android:layout_width="match_parent"/>

</LinearLayout>
interop_layout_preview_composable.xml

কম্পোজযোগ্য লেআউট সম্পাদকের মধ্যে প্রদর্শিত হয়

পরবর্তী পদক্ষেপ

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

{% শব্দার্থে %} {% endverbatim %} {% শব্দার্থে %} {% endverbatim %}