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

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

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

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

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

  • স্ট্যান্ডার্ড: স্ক্রিনের মধ্যে অন্যান্য কন্টেন্টের সাথে জায়গা শেয়ার করুন।
  • মোডাল: স্ক্রিনের অন্যান্য কন্টেন্টের উপরে প্রদর্শিত হয়।
লাইট এবং ডার্ক মোডে ম্যাটেরিয়াল ডিজাইন ৩ নেভিগেশন ড্রয়ারের একটি উদাহরণ।
চিত্র ১. একটি নেভিগেশন ড্রয়ারের উদাহরণ।

উদাহরণ

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

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

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 প্যারামিটার ব্যবহার করে 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
    }
}

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

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

@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 সহ স্ক্রিনের মূল কাঠামো প্রদান করে।
  • TopAppBarnavigationIcon ড্রয়ারের খোলা ও বন্ধ অবস্থা নিয়ন্ত্রণ করে।

ফলাফল

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

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

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