অ্যাপ বার

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

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

চিত্র 1. একটি শীর্ষ অ্যাপ বার (বাম) এবং একটি নীচের অ্যাপ বার (ডান)।

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

গুরুত্বপূর্ণ: অ্যাপ বারগুলি সাধারণত Scaffold কম্পোজেবলে পাস করা হয়, যেগুলি পাওয়ার জন্য নির্দিষ্ট পরামিতি রয়েছে৷ কিভাবে Scaffold আপনার অ্যাপ গঠনের একটি সুবিধাজনক উপায় প্রদান করে সে সম্পর্কে আরও তথ্যের জন্য, Scaffold পৃষ্ঠাটি দেখুন।

শীর্ষ অ্যাপ বার

নিম্নলিখিত সারণী চার ধরনের শীর্ষ অ্যাপ বার রূপরেখা দেয়:

টাইপ	উদাহরণ
ছোট : যে স্ক্রিনের জন্য অনেক নেভিগেশন বা অ্যাকশনের প্রয়োজন হয় না।
কেন্দ্রে সারিবদ্ধ : একটি একক, প্রাথমিক অ্যাকশন আছে এমন স্ক্রিনের জন্য।
মাঝারি : যে স্ক্রিনের জন্য মাঝারি পরিমাণ নেভিগেশন এবং অ্যাকশন প্রয়োজন।
বড় : যে স্ক্রিনের জন্য অনেক নেভিগেশন এবং অ্যাকশন প্রয়োজন।

API পৃষ্ঠ

বিভিন্ন কম্পোজেবল যা আপনাকে চারটি ভিন্ন টপ অ্যাপ বার বাস্তবায়ন করতে দেয় তা অনেকটা একই রকম। তারা বেশ কয়েকটি মূল পরামিতি ভাগ করে:

• title : অ্যাপ বার জুড়ে প্রদর্শিত পাঠ্য।
• navigationIcon : নেভিগেশনের জন্য প্রাথমিক আইকন। অ্যাপ বারের বাম দিকে প্রদর্শিত হবে।
• actions : আইকন যা ব্যবহারকারীকে মূল ক্রিয়াকলাপের অ্যাক্সেস প্রদান করে। এগুলি অ্যাপ বারের ডানদিকে প্রদর্শিত হবে।
• scrollBehavior : স্ক্যাফোল্ডের অভ্যন্তরীণ বিষয়বস্তু স্ক্রল করার ক্ষেত্রে শীর্ষ অ্যাপ বারটি কীভাবে সাড়া দেয় তা নির্ধারণ করে।
• colors : অ্যাপ বার কিভাবে প্রদর্শিত হবে তা নির্ধারণ করে।

স্ক্রোল আচরণ

ব্যবহারকারী প্রদত্ত স্ক্যাফোল্ডের অভ্যন্তরীণ বিষয়বস্তু স্ক্রোল করলে অ্যাপ বার কীভাবে প্রতিক্রিয়া জানায় তা আপনি নিয়ন্ত্রণ করতে পারেন। এটি করতে, TopAppBarScrollBehavior এর একটি উদাহরণ তৈরি করুন এবং scrollBehavior প্যারামিটারের জন্য এটি আপনার শীর্ষ অ্যাপ বারে পাস করুন।

TopAppBarScrollBehavior তিন ধরনের আছে। তারা নিম্নরূপ:

• enterAlwaysScrollBehavior : যখন ব্যবহারকারী স্ক্যাফোল্ডের ভেতরের বিষয়বস্তু তুলে ধরেন, তখন উপরের অ্যাপ বারটি ভেঙে পড়ে। অ্যাপ বার প্রসারিত হয় যখন ব্যবহারকারী তারপর ভিতরের বিষয়বস্তু নিচে টান.
• exitUntilCollapsedScrollBehavior : enterAlwaysScrollBehavior এর মতো, যদিও ব্যবহারকারী যখন স্ক্যাফোল্ডের অভ্যন্তরীণ বিষয়বস্তুর শেষে পৌঁছায় তখন অ্যাপ বারটি অতিরিক্তভাবে প্রসারিত হয়।
• pinnedScrollBehavior : অ্যাপ বারটি যথাস্থানে থাকে এবং স্ক্রল করার ক্ষেত্রে প্রতিক্রিয়া দেখায় না।

নিম্নলিখিত উদাহরণগুলি এই বিকল্পগুলির কয়েকটি বাস্তবায়ন করে।

উদাহরণ

নিম্নলিখিত বিভাগগুলি আপনি কীভাবে স্ক্রোল আচরণ নিয়ন্ত্রণ করতে পারেন তার বিভিন্ন উদাহরণ সহ চারটি ভিন্ন ধরণের শীর্ষ অ্যাপ বারের জন্য বাস্তবায়ন প্রদান করে।

ছোট

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

নিম্নলিখিত উদাহরণটি TopAppBar scrollBehavior জন্য একটি মান পাস করে না এবং তাই এটি অভ্যন্তরীণ বিষয়বস্তু স্ক্রল করার প্রতিক্রিয়া জানায় না।

@Composable
fun SmallTopAppBarExample() {
    Scaffold(
        topBar = {
            TopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Small Top App Bar")
                }
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:

চিত্র 2. একটি ছোট শীর্ষ অ্যাপ বার।

কেন্দ্র সারিবদ্ধ

কেন্দ্রে সারিবদ্ধ শীর্ষ অ্যাপ বারটি মূলত ছোট অ্যাপ বারের মতোই, যদিও শিরোনামটি উপাদানটির মধ্যে কেন্দ্রীভূত হয়। এটি বাস্তবায়ন করতে, ডেডিকেটেড CenterAlignedTopAppBar কম্পোজেবল ব্যবহার করুন।

এই উদাহরণটি enterAlwaysScrollBehavior() ব্যবহার করে scrollBehavior জন্য যে মানটি পাস করে তা পেতে। যেমন, ব্যবহারকারী স্ক্যাফোল্ডের ভিতরের বিষয়বস্তু স্ক্রোল করলে বারটি ভেঙে পড়ে।

@Composable
fun CenterAlignedTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Centered Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior,
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:

চিত্র 3. একটি কেন্দ্র-সারিবদ্ধ শীর্ষ অ্যাপ বার।

মাঝারি

মিডিয়াম টপ অ্যাপ বার যেকোন অতিরিক্ত আইকনের নিচে শিরোনাম রাখে। একটি তৈরি করতে, MediumTopAppBar কম্পোজেবল ব্যবহার করুন।

আগের স্নিপেটের মতো, এই উদাহরণটি enterAlwaysScrollBehavior() ব্যবহার করে যে মানটি scrollBehavior এর জন্য পাস করে তা পেতে।

@Composable
fun MediumTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            MediumTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Medium Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

enterAlwaysScrollBehavior() থেকে স্ক্রোল আচরণ কীভাবে প্রদর্শিত হয় তার একটি প্রদর্শন সহ এই বাস্তবায়নটি নিম্নরূপ প্রদর্শিত হয়:

চিত্র 4. একটি কেন্দ্র-সারিবদ্ধ শীর্ষ অ্যাপ বার।

বড়

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

পূর্ববর্তী স্নিপেটগুলির বিপরীতে, এই উদাহরণটি exitUntilCollapsedScrollBehavior() ব্যবহার করে scrollBehavior এর জন্য যে মানটি পাস করে তা পেতে। যেমন, ব্যবহারকারী যখন স্ক্যাফোল্ডের ভিতরের বিষয়বস্তু স্ক্রোল করে তখন বারটি ভেঙে পড়ে, কিন্তু তারপর যখন ব্যবহারকারী ভিতরের বিষয়বস্তুর শেষ পর্যন্ত স্ক্রোল করে তখন প্রসারিত হয়।

@Composable
fun LargeTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            LargeTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Large Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:

চিত্র 5. একটি বড় টপ অ্যাপ বারের উদাহরণ বাস্তবায়ন।

নিচের অ্যাপ বার

নিচের অ্যাপ বার তৈরি করতে, BottomAppBar কম্পোজেবল ব্যবহার করুন। এই কম্পোজেবল ব্যবহার করা এই পৃষ্ঠার পূর্ববর্তী বিভাগগুলিতে বর্ণিত শীর্ষ অ্যাপ বার কম্পোজেবলের মতোই। আপনি নিম্নলিখিত কী প্যারামিটারের জন্য কম্পোজেবল পাস করেন:

• actions : আইকনগুলির একটি সিরিজ যা বারের বাম দিকে প্রদর্শিত হয়। এগুলি সাধারণত প্রদত্ত স্ক্রিনের জন্য বা নেভিগেশন আইটেমগুলির জন্য মূল ক্রিয়া।
• floatingActionButton : ভাসমান অ্যাকশন বোতামটি বারের ডানদিকে প্রদর্শিত হয়।

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(Icons.Filled.Check, contentDescription = "Localized description")
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Edit,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Mic,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Image,
                            contentDescription = "Localized description",
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* do something */ },
                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                    ) {
                        Icon(Icons.Filled.Add, "Localized description")
                    }
                }
            )
        },
    ) { innerPadding ->
        Text(
            modifier = Modifier.padding(innerPadding),
            text = "Example of a scaffold with a bottom app bar."
        )
    }
}
AppBar.kt

এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:

চিত্র 6. একটি নীচের অ্যাপ বারের একটি উদাহরণ বাস্তবায়ন।

দ্রষ্টব্য: আপনি actions এবং floatingActionButton এর জন্য একটি মান পাস না করেও BottomAppBar ব্যবহার করতে পারেন। সেক্ষেত্রে, আপনি অন্যান্য কন্টেইনারগুলির মতো বিষয়বস্তু দিয়ে BottomAppBar পূরণ করে একটি কাস্টম নীচের অ্যাপ বার তৈরি করতে পারেন।

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

• Material3 ডক্স - শীর্ষ অ্যাপ বার
• Material3 ডক্স - নিচের অ্যাপ বার
• ভারা