একটি সমর্থনকারী ফলক লেআউট তৈরি করুন

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

আরও বিশদ বিবরণের জন্য, উপাদান 3 সমর্থনকারী ফলক নির্দেশিকা দেখুন।

NavigableSupportingPaneScaffold এর সাথে একটি সমর্থনকারী ফলক প্রয়োগ করুন

NavigableSupportingPaneScaffold হল একটি কম্পোজেবল যা জেটপ্যাক কম্পোজে একটি সাপোর্টিং প্যান লেআউট বাস্তবায়নকে সহজ করে। এটি SupportingPaneScaffold মোড়ানো এবং অন্তর্নির্মিত নেভিগেশন এবং ভবিষ্যদ্বাণীমূলক ব্যাক হ্যান্ডলিং যোগ করে।

একটি সমর্থনকারী ফলক স্ক্যাফোল্ড তিনটি ফলক পর্যন্ত সমর্থন করে:

  • প্রধান ফলক : প্রাথমিক বিষয়বস্তু প্রদর্শন করে।
  • সাপোর্টিং প্যান : মূল ফলকের সাথে সম্পর্কিত অতিরিক্ত প্রসঙ্গ বা সরঞ্জাম সরবরাহ করে।
  • অতিরিক্ত ফলক (ঐচ্ছিক) : প্রয়োজনে সম্পূরক সামগ্রীর জন্য ব্যবহৃত হয়।

স্ক্যাফোল্ড উইন্ডোর আকারের উপর ভিত্তি করে মানিয়ে নেয়:

  • বড় উইন্ডোতে , প্রধান এবং সমর্থনকারী প্যানগুলি পাশাপাশি প্রদর্শিত হয়।

  • ছোট উইন্ডোতে , ব্যবহারকারীরা নেভিগেট করার সাথে সাথে স্যুইচ করে, একটি সময়ে শুধুমাত্র একটি ফলক দৃশ্যমান হয়।

    মুখ্য বিষয়বস্তু প্রদর্শনের বেশিরভাগ অংশ দখল করে থাকে এবং পাশাপাশি সাপোর্টিং কন্টেন্ট।
    চিত্র 1. সাপোর্টিং প্যান লেআউট।

নির্ভরতা যোগ করুন

NavigableSupportingPaneScaffold হল Material 3 অ্যাডাপটিভ লেআউট লাইব্রেরির অংশ।

আপনার অ্যাপ বা মডিউলের build.gradle ফাইলে নিম্নলিখিত তিনটি, সম্পর্কিত নির্ভরতা যোগ করুন:

কোটলিন 

implementation("androidx.compose.material3.adaptive:adaptive")
implementation("androidx.compose.material3.adaptive:adaptive-layout")
implementation("androidx.compose.material3.adaptive:adaptive-navigation")

গ্রোভি 

implementation 'androidx.compose.material3.adaptive:adaptive'
implementation 'androidx.compose.material3.adaptive:adaptive-layout'
implementation 'androidx.compose.material3.adaptive:adaptive-navigation'
  • অভিযোজিত : নিম্ন-স্তরের বিল্ডিং ব্লক যেমন HingeInfo এবং Posture
  • অভিযোজিত-লেআউট : অভিযোজিত বিন্যাস যেমন ListDetailPaneScaffold এবং SupportingPaneScaffold
  • অভিযোজিত-নেভিগেশন : প্যানের মধ্যে এবং এর মধ্যে নেভিগেট করার জন্য কম্পোজেবল, সেইসাথে অভিযোজিত লেআউট যা ডিফল্টরূপে নেভিগেশন সমর্থন করে যেমন NavigableListDetailPaneScaffold এবং NavigableSupportingPaneScaffold

আপনার প্রজেক্টে compose-material3-অভিযোজিত সংস্করণ 1.1.0-beta1 বা উচ্চতর অন্তর্ভুক্ত রয়েছে তা নিশ্চিত করুন।

ভবিষ্যদ্বাণীমূলক ব্যাক জেসচারে অপ্ট-ইন করুন

অ্যান্ড্রয়েড 15 বা তার নিচের ভবিষ্যদ্বাণীমূলক ব্যাক অ্যানিমেশনগুলি সক্ষম করতে, আপনাকে অবশ্যই পূর্বাভাসমূলক ব্যাক জেসচার সমর্থন করতে অপ্ট-ইন করতে হবে৷ অপ্ট-ইন করতে, আপনার AndroidManifest.xml ফাইলের মধ্যে <application> ট্যাগ বা স্বতন্ত্র <activity> ট্যাগে <application> [tag or android:enableOnBackInvokedCallback="true" android:enableOnBackInvokedCallback="true" এ android:enableOnBackInvokedCallback="true" যোগ করুন।

একবার আপনার অ্যাপটি Android 16 (API লেভেল 36) বা উচ্চতরকে লক্ষ্য করলে, পূর্বাভাসমূলক ব্যাক ডিফল্টরূপে সক্ষম হয়।

একটি নেভিগেটর তৈরি করুন

ছোট উইন্ডোতে, একটি সময়ে শুধুমাত্র একটি ফলক প্রদর্শিত হয়, তাই একটি ThreePaneScaffoldNavigator ব্যবহার করুন প্যানে এবং প্যানে যাওয়ার জন্য। rememberSupportingPaneScaffoldNavigator দিয়ে ন্যাভিগেটরের একটি উদাহরণ তৈরি করুন। 

val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator()
val scope = rememberCoroutineScope()

SampleSupportingPaneScaffold.kt

স্ক্যাফোল্ডে নেভিগেটর পাস করুন

স্ক্যাফোল্ডের জন্য একটি ThreePaneScaffoldNavigator প্রয়োজন যা একটি ইন্টারফেস যা স্ক্যাফোল্ডের অবস্থা, ThreePaneScaffoldValue এবং একটি PaneScaffoldDirective প্রতিনিধিত্ব করে। 

NavigableSupportingPaneScaffold(
    navigator = scaffoldNavigator,
    mainPane = { /*...*/ },
    supportingPane = { /*...*/ },
)
SampleSupportingPaneScaffold.kt

প্রধান ফলক এবং সমর্থনকারী ফলক হল আপনার বিষয়বস্তু ধারণকারী কম্পোজেবল। নেভিগেশনের সময় ডিফল্ট প্যান অ্যানিমেশন প্রয়োগ করতে AnimatedPane ব্যবহার করুন। সমর্থনকারী ফলকটি লুকানো আছে কিনা তা পরীক্ষা করতে স্ক্যাফোল্ড মান ব্যবহার করুন; যদি তাই হয়, একটি বোতাম প্রদর্শন করুন যা navigateTo(SupportingPaneScaffoldRole.Supporting) কল করে সমর্থনকারী ফলকটি প্রদর্শন করতে।

এখানে ভারাটির একটি সম্পূর্ণ বাস্তবায়ন রয়েছে: 

val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator()
val scope = rememberCoroutineScope()

NavigableSupportingPaneScaffold(
    navigator = scaffoldNavigator,
    mainPane = {
        AnimatedPane(
            modifier = Modifier
                .safeContentPadding()
                .background(Color.Red)
        ) {
            if (scaffoldNavigator.scaffoldValue[SupportingPaneScaffoldRole.Supporting] == PaneAdaptedValue.Hidden) {
                Button(
                    modifier = Modifier
                        .wrapContentSize(),
                    onClick = {
                        scope.launch {
                            scaffoldNavigator.navigateTo(SupportingPaneScaffoldRole.Supporting)
                        }
                    }
                ) {
                    Text("Show supporting pane")
                }
            } else {
                Text("Supporting pane is shown")
            }
        }
    },
    supportingPane = {
        AnimatedPane(modifier = Modifier.safeContentPadding()) {
            Text("Supporting pane")
        }
    }
)
SampleSupportingPaneScaffold.kt

প্যান composables নিষ্কাশন

একটি SupportingPaneScaffold এর পৃথক প্যানগুলিকে তাদের নিজস্ব কম্পোজেবলে বের করে পুনরায় ব্যবহারযোগ্য এবং পরীক্ষাযোগ্য করে তোলে। আপনি যদি ডিফল্ট অ্যানিমেশন চান তবে AnimatedPane অ্যাক্সেস করতে ThreePaneScaffoldScope ব্যবহার করুন: 

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun ThreePaneScaffoldPaneScope.MainPane(
    shouldShowSupportingPaneButton: Boolean,
    onNavigateToSupportingPane: () -> Unit,
    modifier: Modifier = Modifier,
) {
    AnimatedPane(
        modifier = modifier.safeContentPadding()
    ) {
        // Main pane content
        if (shouldShowSupportingPaneButton) {
            Button(onClick = onNavigateToSupportingPane) {
                Text("Show supporting pane")
            }
        } else {
            Text("Supporting pane is shown")
        }
    }
}

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun ThreePaneScaffoldPaneScope.SupportingPane(
    modifier: Modifier = Modifier,
) {
    AnimatedPane(modifier = modifier.safeContentPadding()) {
        // Supporting pane content
        Text("This is the supporting pane")
    }
}
SampleSupportingPaneScaffold.kt

কম্পোজেবলগুলিতে প্যানগুলি নিষ্কাশন করা SupportingPaneScaffold এর ব্যবহারকে সহজ করে (পূর্ববর্তী বিভাগে স্ক্যাফোল্ডের সম্পূর্ণ বাস্তবায়নের সাথে নিম্নলিখিতটির তুলনা করুন): 

val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator()
val scope = rememberCoroutineScope()

NavigableSupportingPaneScaffold(
    navigator = scaffoldNavigator,
    mainPane = {
        MainPane(
            shouldShowSupportingPaneButton = scaffoldNavigator.scaffoldValue.secondary == PaneAdaptedValue.Hidden,
            onNavigateToSupportingPane = {
                scope.launch {
                    scaffoldNavigator.navigateTo(ThreePaneScaffoldRole.Secondary)
                }
            }
        )
    },
    supportingPane = { SupportingPane() },
)
SampleSupportingPaneScaffold.kt

স্ক্যাফোল্ডের নির্দিষ্ট দিকগুলির উপর আপনার আরও নিয়ন্ত্রণের প্রয়োজন হলে, NavigableSupportingPaneScaffold এর পরিবর্তে SupportingPaneScaffold ব্যবহার করার কথা বিবেচনা করুন। এটি একটি PaneScaffoldDirective এবং ThreePaneScaffoldValue বা ThreePaneScaffoldState আলাদাভাবে গ্রহণ করে। এই নমনীয়তা আপনাকে ফলক ব্যবধানের জন্য কাস্টম যুক্তি প্রয়োগ করতে এবং কতগুলি প্যানে একসাথে প্রদর্শিত হবে তা নির্ধারণ করতে দেয়। আপনি ThreePaneScaffoldPredictiveBackHandler যোগ করে ভবিষ্যদ্বাণীমূলক ব্যাক সমর্থন সক্ষম করতে পারেন।

ThreePaneScaffoldPredictiveBackHandler যোগ করুন

ভবিষ্যদ্বাণীমূলক ব্যাক হ্যান্ডলার সংযুক্ত করুন যা একটি স্ক্যাফোল্ড নেভিগেটর উদাহরণ নেয় এবং backBehavior নির্দিষ্ট করুন। এটি ব্যাক নেভিগেশনের সময় ব্যাকস্ট্যাক থেকে গন্তব্যগুলি কীভাবে পপ করা হয় তা নির্ধারণ করে। তারপর SupportingPaneScaffold এ scaffoldDirective এবং scaffoldState পাস করুন। ওভারলোড ব্যবহার করুন যা একটি ThreePaneScaffoldState গ্রহণ করে, scaffoldNavigator.scaffoldState এ পাস করে।

SupportingPaneScaffold মধ্যে প্রধান এবং সমর্থনকারী প্যানগুলি সংজ্ঞায়িত করুন। ডিফল্ট প্যান অ্যানিমেশনের জন্য AnimatedPane ব্যবহার করুন।

আপনি এই পদক্ষেপগুলি বাস্তবায়ন করার পরে, আপনার কোডটি নিম্নলিখিতগুলির মতো দেখতে হবে: 

val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator()
val scope = rememberCoroutineScope()

ThreePaneScaffoldPredictiveBackHandler(
    navigator = scaffoldNavigator,
    backBehavior = BackNavigationBehavior.PopUntilScaffoldValueChange
)

SupportingPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    mainPane = {
        MainPane(
            shouldShowSupportingPaneButton = scaffoldNavigator.scaffoldValue.secondary == PaneAdaptedValue.Hidden,
            onNavigateToSupportingPane = {
                scope.launch {
                    scaffoldNavigator.navigateTo(ThreePaneScaffoldRole.Secondary)
                }
            }
        )
    },
    supportingPane = { SupportingPane() },
)
SampleSupportingPaneScaffold.kt

পূর্ববর্তী
একটি তালিকা-বিশদ বিন্যাস তৈরি করুন
পরবর্তী
অভিযোজিত করবেন এবং করবেন না