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

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

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

  • কন্টেন্ট অর্গানাইজ করা: ব্যবহারকারীদের খবরের অ্যাপ বা ব্লগিং অ্যাপের মতো বিভিন্ন ক্যাটাগরির মধ্যে পরিবর্তন করার সুবিধা দিন।
  • অ্যাকাউন্ট ম্যানেজমেন্ট: ব্যবহারকারীর অ্যাকাউন্ট সহ অ্যাপে অ্যাকাউন্ট সেটিংস ও প্রোফাইল বিভাগে দ্রুত লিঙ্ক প্রদান করে।
  • ফিচার ডিসকভারি: জটিল অ্যাপে ব্যবহারকারীদের ফিচার খুঁজে পেতে ও অ্যাক্সেস করতে সাহায্য করার জন্য একটি মেনুতে একাধিক ফিচার ও সেটিংস সাজান।

Material Design-এ, দু'ধরনের নেভিগেশন ড্রয়ার থাকে:

  • স্ট্যান্ডার্ড: অন্য কন্টেন্টের সাথে স্ক্রিনের মধ্যে স্পেস শেয়ার করে।
  • মডেল: স্ক্রিনের মধ্যে অন্যান্য কন্টেন্টের উপরে দেখা যায়।
লাইট ও ডার্ক মোডে Material Design 3 নেভিগেশন ড্রয়ারের একটি উদাহরণ।
ছবি ১. নেভিগেশন ড্রয়ারের উদাহরণ।

উদাহরণ

নেভিগেশন ড্রয়ার ইমপ্লিমেন্ট করতে আপনি 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
}

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

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

কন্ট্রোল বিহেভিয়ার

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

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

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

নিচের স্নিপেট থেকে কীভাবে বিভাগ ও ডিভাইডার সহ বিস্তারিত নেভিগেশন ড্রয়ার তৈরি করতে হয় তা জানতে পারবেন:

@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)
        }
    }
}

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

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

ফলাফল

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

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

অতিরিক্ত রিসোর্স