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

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

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

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

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

  • স্ট্যান্ডার্ড: স্ক্রিনের মধ্যে অন্যান্য কন্টেন্টের সাথে স্পেস শেয়ার করুন।
  • মডেল: স্ক্রিনের মধ্যে অন্যান্য কন্টেন্টের উপরে দেখা যায়।
লাইট ও ডার্ক মোডে 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 ড্রয়ার খোলা ও বন্ধ করার অবস্থা নিয়ন্ত্রণ করে।

ফলাফল

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

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

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