নেভিগেশন ড্রয়ার

নেভিগেশন ড্রয়ার উপাদান হল একটি স্লাইড-ইন মেনু যা ব্যবহারকারীদের আপনার অ্যাপের বিভিন্ন বিভাগে নেভিগেট করতে দেয়। ব্যবহারকারীরা পাশ থেকে সোয়াইপ করে বা একটি মেনু আইকনে ট্যাপ করে এটি সক্রিয় করতে পারেন।

একটি নেভিগেশন ড্রয়ার বাস্তবায়নের জন্য এই তিনটি ব্যবহারের ক্ষেত্রে বিবেচনা করুন:

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

মেটেরিয়াল ডিজাইনে, দুটি ধরণের নেভিগেশন ড্রয়ার রয়েছে:

  • স্ট্যান্ডার্ড: অন্যান্য সামগ্রীর সাথে একটি স্ক্রিনের মধ্যে স্থান ভাগ করুন।
  • মডেল: একটি স্ক্রিনের মধ্যে অন্যান্য সামগ্রীর শীর্ষে প্রদর্শিত হয়।
চিত্র 1. একটি নেভিগেশন ড্রয়ারের একটি উদাহরণ।

উদাহরণ

আপনি একটি নেভিগেশন ড্রয়ার বাস্তবায়ন করতে ModalNavigationDrawer কম্পোজযোগ্য ব্যবহার করতে পারেন।

একটি ModalDrawerSheet প্রদান করতে এবং ড্রয়ারের বিষয়বস্তু প্রদান করতে drawerContent স্লট ব্যবহার করুন, নিম্নলিখিত উদাহরণের মতো: 

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            HorizontalDivider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    // Screen content
}
MaterialLayoutSnippets.kt

ModalNavigationDrawer একাধিক অতিরিক্ত ড্রয়ার প্যারামিটার গ্রহণ করে। উদাহরণস্বরূপ, নিচের উদাহরণের মতো gesturesEnabled প্যারামিটার দিয়ে ড্রয়ারটি ড্র্যাগের প্রতিক্রিয়া জানাবে কি না তা আপনি টগল করতে পারেন: 

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            // Drawer contents
        }
    },
    gesturesEnabled = false
) {
    // Screen content
}
MaterialLayoutSnippets.kt

আচরণ নিয়ন্ত্রণ করুন

ড্রয়ারটি কীভাবে খোলে এবং বন্ধ হয় তা নিয়ন্ত্রণ করতে, DrawerState ব্যবহার করুন। drawerState প্যারামিটার ব্যবহার করে আপনাকে ModalNavigationDrawer এ একটি DrawerState পাস করা উচিত।

DrawerState open এবং close ফাংশন, সেইসাথে বর্তমান ড্রয়ারের অবস্থার সাথে সম্পর্কিত বৈশিষ্ট্যগুলিতে অ্যাক্সেস সরবরাহ করে। এই সাসপেন্ডিং ফাংশনগুলির জন্য একটি CoroutineScope প্রয়োজন, যেটি আপনি rememberCoroutineScope ব্যবহার করে ইনস্ট্যান্টিয়েট করতে পারেন। আপনি UI ইভেন্টগুলির প্রতিক্রিয়া হিসাবে সাসপেন্ডিং ফাংশনগুলিকে কল করতে পারেন৷ 

val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet { /* Drawer content */ }
    },
) {
    Scaffold(
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("Show drawer") },
                icon = { Icon(Icons.Filled.Add, contentDescription = "") },
                onClick = {
                    scope.launch {
                        drawerState.apply {
                            if (isClosed) open() else close()
                        }
                    }
                }
            )
        }
    ) { contentPadding ->
        // Screen content
    }
}
MaterialLayoutSnippets.kt

একটি নেভিগেশন ড্রয়ারের মধ্যে গ্রুপ তৈরি করুন

নিচের স্নিপেটটি দেখায় কিভাবে বিভাগ এবং ডিভাইডার সহ একটি বিস্তারিত নেভিগেশন ড্রয়ার তৈরি করতে হয়: 

@Composable
fun DetailedDrawerExample(
    content: @Composable (PaddingValues) -> Unit
) {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    ModalNavigationDrawer(
        drawerContent = {
            ModalDrawerSheet {
                Column(
                    modifier = Modifier.padding(horizontal = 16.dp)
                        .verticalScroll(rememberScrollState())
                ) {
                    Spacer(Modifier.height(12.dp))
                    Text("Drawer Title", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleLarge)
                    HorizontalDivider()

                    Text("Section 1", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium)
                    NavigationDrawerItem(
                        label = { Text("Item 1") },
                        selected = false,
                        onClick = { /* Handle click */ }
                    )
                    NavigationDrawerItem(
                        label = { Text("Item 2") },
                        selected = false,
                        onClick = { /* Handle click */ }
                    )

                    HorizontalDivider(modifier = Modifier.padding(vertical = 8.dp))

                    Text("Section 2", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium)
                    NavigationDrawerItem(
                        label = { Text("Settings") },
                        selected = false,
                        icon = { Icon(Icons.Outlined.Settings, contentDescription = null) },
                        badge = { Text("20") }, // Placeholder
                        onClick = { /* Handle click */ }
                    )
                    NavigationDrawerItem(
                        label = { Text("Help and feedback") },
                        selected = false,
                        icon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) },
                        onClick = { /* Handle click */ },
                    )
                    Spacer(Modifier.height(12.dp))
                }
            }
        },
        drawerState = drawerState
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("Navigation Drawer Example") },
                    navigationIcon = {
                        IconButton(onClick = {
                            scope.launch {
                                if (drawerState.isClosed) {
                                    drawerState.open()
                                } else {
                                    drawerState.close()
                                }
                            }
                        }) {
                            Icon(Icons.Default.Menu, contentDescription = "Menu")
                        }
                    }
                )
            }
        ) { innerPadding ->
            content(innerPadding)
        }
    }
}
NavigationDrawer.kt

কোড সম্পর্কে মূল পয়েন্ট

  • বিভাগ, বিভাজক এবং নেভিগেশন আইটেম সমন্বিত একটি Column সাথে drawerContent পপুলেট করে।
  • ModalDrawerSheet ড্রয়ারের জন্য মেটেরিয়াল ডিজাইন স্টাইলিং প্রদান করে।
  • HorizontalDivider ড্রয়ারের মধ্যে বিভাগগুলিকে আলাদা করে।
  • ModalNavigationDrawer ড্রয়ার তৈরি করে।
  • drawerContent ড্রয়ারের বিষয়বস্তু নির্ধারণ করে।
  • ModalDrawerSheet এর ভিতরে, একটি Column ড্রয়ারের উপাদানগুলিকে উল্লম্বভাবে সাজায়।
  • NavigationDrawerItem কম্পোজেবল ড্রয়ারে পৃথক আইটেম উপস্থাপন করে।
  • Scaffold TopAppBar সহ পর্দার মৌলিক কাঠামো প্রদান করে।
  • TopAppBar এ navigationIcon ড্রয়ারের খোলা এবং বন্ধ অবস্থা নিয়ন্ত্রণ করে।

ফলাফল

নীচের চিত্রটি দেখায় যে ড্রয়ারটি খোলা হলে কীভাবে প্রদর্শিত হয়, বিভাগ এবং আইটেমগুলি প্রদর্শিত হয়:

দুটি বিভাগ সহ একটি বিশদ নেভিগেশন ড্রয়ার, প্রতিটিতে একাধিক লেবেলযুক্ত আইটেম এবং আইকন রয়েছে৷
চিত্র 2. দুটি নেস্টেড গ্রুপের সাথে একটি নেভিগেশন ড্রয়ার খোলা হয়েছে।

অতিরিক্ত সম্পদ