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

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

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

ViewCompositionStrategy পরিবর্তন করতে, setViewCompositionStrategy() মেথডটি কল করুন এবং একটি ভিন্ন স্ট্র্যাটেজি প্রদান করুন।

নিচের সারণিতে সেই বিভিন্ন পরিস্থিতিগুলোর সারসংক্ষেপ দেওয়া হলো যেখানে আপনি ViewCompositionStrategy ব্যবহার করতে পারেন:

`ViewCompositionStrategy`	বর্ণনা এবং আন্তঃকার্যকরী দৃশ্যকল্প
`DisposeOnDetachedFromWindow`	যখন অন্তর্নিহিত `ComposeView` উইন্ডো থেকে বিচ্ছিন্ন হবে, তখন Composition-টি ডিসপোজ হয়ে যাবে। পরবর্তীকালে এটি `DisposeOnDetachedFromWindowOrReleasedFromPool` দ্বারা প্রতিস্থাপিত হয়েছে। ইন্টারঅপ সিনারিও: `ComposeView` তা View হায়ারার্কির একমাত্র উপাদান হোক, অথবা একটি মিশ্র View/Compose স্ক্রিনের প্রেক্ষাপটে থাকুক (Fragment-এর মধ্যে নয়)।
`DisposeOnDetachedFromWindowOrReleasedFromPool` ( Default )	`DisposeOnDetachedFromWindow` এর মতোই, যখন কম্পোজিশনটি কোনো পুলিং কন্টেইনারের (যেমন একটি `RecyclerView` ) মধ্যে থাকে না। যদি এটি কোনো পুলিং কন্টেইনারের মধ্যে থাকে, তবে এটি তখন ডিসপোজ হবে যখন পুলিং কন্টেইনারটি নিজেই উইন্ডো থেকে ডিটাচ হয়ে যায়, অথবা যখন আইটেমটি বাতিল করা হয় (অর্থাৎ যখন পুলটি পূর্ণ হয়ে যায়)। ইন্টারঅপ সিনারিও: `ComposeView` তা View হায়ারার্কির একমাত্র উপাদান হোক, অথবা একটি মিশ্র View/Compose স্ক্রিনের প্রেক্ষাপটে থাকুক (Fragment-এর মধ্যে নয়)। `RecyclerView` এর মতো একটি পুলিং কন্টেইনারে `ComposeView` একটি আইটেম হিসেবে যুক্ত করুন।
`DisposeOnLifecycleDestroyed`	প্রদত্ত `Lifecycle` ধ্বংস হয়ে গেলে কম্পোজিশনটি নিষ্পত্তি করা হবে। ইন্টারঅপ সিনারিও একটি Fragment-এর View-তে `ComposeView` ।
`DisposeOnViewTreeLifecycleDestroyed`	`ViewTreeLifecycleOwner.get` থেকে প্রাপ্ত `LifecycleOwner` এর মালিকানাধীন `Lifecycle` যখন পরবর্তী উইন্ডোর সাথে সংযুক্ত থাকে এবং সেই উইন্ডোটি ধ্বংস হয়ে যায়, তখন কম্পোজিশনটি ডিসপোজ করা হবে। ইন্টারঅপ সিনারিও: একটি Fragment-এর View-তে `ComposeView` । এমন একটি ভিউ-তে `ComposeView` , যার লাইফসাইকেল এখনও জানা নেই।

ফ্র্যাগমেন্টে `ComposeView`

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

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

<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 ID ব্যবহার করে ComposeView টি নিন, হোস্ট View জন্য সবচেয়ে উপযুক্ত একটি কম্পোজিশন স্ট্র্যাটেজি সেট করুন এবং 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 } class="devsite-github-link nocode no-select">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

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

চিত্র ১। এটি একটি ভিউ UI হায়ারার্কিতে কম্পোজ এলিমেন্ট যোগ করার কোডের আউটপুট দেখাচ্ছে। "Hello Android!" লেখাটি একটি TextView উইজেট দ্বারা প্রদর্শিত হয়। "Hello Compose!" লেখাটি একটি 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!")
                }
            }
        }
    }
}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 আইডিগুলো 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
@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

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

ComposeView জন্য ViewCompositionStrategy

ফ্র্যাগমেন্টে ComposeView

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

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

`ComposeView` জন্য `ViewCompositionStrategy`

ফ্র্যাগমেন্টে `ComposeView`

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