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

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

একটি নতুন, সম্পূর্ণরূপে Compose-ভিত্তিক স্ক্রিন তৈরি করতে, আপনার অ্যাক্টিভিটিকে 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!")
}

এই কোডটি দেখতে ঠিক একটি কম্পোজ-অনলি অ্যাপে যা পাওয়া যায় তার মতোই।

ViewCompositionStrategy for ComposeView

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

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

নিচের টেবিলে আপনি ViewCompositionStrategy ব্যবহার করতে পারেন এমন বিভিন্ন পরিস্থিতিতে সারসংক্ষেপ করা হয়েছে:

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

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

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

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

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

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

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

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

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

খণ্ডগুলিতে ComposeView

যদি আপনি Compose 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>

কোটলিন সোর্স কোডে, XML-এ সংজ্ঞায়িত লেআউট রিসোর্স থেকে লেআউটটি ফুলে উঠুন। তারপর XML ID ব্যবহার করে ComposeView পান, হোস্ট View এর জন্য সবচেয়ে ভালো কাজ করে এমন একটি Composition কৌশল সেট করুন এবং Compose ব্যবহার করার জন্য 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
    }
}

বিকল্পভাবে, আপনি আপনার 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
    }
}

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

চিত্র ১. এটি একটি ভিউ UI অনুক্রমের মধ্যে Compose উপাদান যোগ করে এমন কোডের আউটপুট দেখায়। "Hello Android!" টেক্সটটি একটি TextView উইজেট দ্বারা প্রদর্শিত হয়। "Hello Compose!" টেক্সটটি একটি Compose টেক্সট উপাদান দ্বারা প্রদর্শিত হয়।

যদি আপনার পূর্ণ স্ক্রিনটি কম্পোজ দিয়ে তৈরি করা হয়, তাহলে আপনি সরাসরি একটি ফ্র্যাগমেন্টে একটি 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!")
                }
            }
        }
    }
}

একই লেআউটে একাধিক ComposeView ইনস্ট্যান্স

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

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

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

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

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

আপনি আপনার XML লেআউটের জন্য লেআউট এডিটরের মধ্যে কম্পোজেবলের প্রিভিউও দেখতে পারেন যেখানে একটি ComposeView আছে। এটি করার মাধ্যমে আপনি দেখতে পাবেন যে আপনার কম্পোজেবলগুলি একটি মিশ্র ভিউ এবং কম্পোজ লেআউটের মধ্যে কেমন দেখাচ্ছে।

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

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

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

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

লেআউট এডিটরের মধ্যে কম্পোজেবল প্রদর্শিত হচ্ছে

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

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

{% অক্ষরে অক্ষরে %} {% এন্ডভারব্যাটিম %} {% অক্ষরে অক্ষরে %} {% এন্ডভারব্যাটিম %}