অ্যাপ বার

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

ধরন

কেমন দেখাবে

উদ্দেশ্য

স্ক্রিনের উপরের দিকে থাকা অ্যাপ বার

স্ক্রিনের উপরের অংশ জুড়ে।

গুরুত্বপূর্ণ টাস্ক ও তথ্য অ্যাক্সেস করার সুবিধা দেয়। সাধারণত এতে একটি শীর্ষক, মূল অ্যাকশন আইটেম এবং নির্দিষ্ট নেভিগেশন আইটেম থাকে।

স্ক্রিনের নিচের দিকে থাকা অ্যাপ বার

স্ক্রিনের নিচের অংশ জুড়ে।

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

সবচেয়ে উপরে ও নিচে দেখানো অ্যাপ বারের উদাহরণ।
ছবি ১. স্ক্রিনের উপরের দিকে থাকা অ্যাপ বার (বাঁদিকে) এবং স্ক্রিনের নিচের দিকে থাকা অ্যাপ বার (ডানদিকে)।

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

স্ক্রিনের উপরের দিকে থাকা অ্যাপ বার

নিচের সারণীতে চার ধরনের টপ অ্যাপ বারের রূপরেখা দেওয়া হয়েছে:

ধরন

উদাহরণ

ছোট: যেসব স্ক্রিনে খুব বেশি নেভিগেশন বা অ্যাকশনের প্রয়োজন হয় না।

ছোট আকারের উপরের অ্যাপ বার

কেন্দ্রে সারিবদ্ধ: যেসব স্ক্রিনে একটিই প্রাথমিক অ্যাকশন থাকে।

স্ক্রিনের উপরের দিকে থাকা অ্যাপ বার মাঝখানে অ্যালাইন করা আছে

মাঝারি: যেসব স্ক্রিনে মাঝারি পরিমাণ নেভিগেশন ও অ্যাকশন প্রয়োজন হয়।

মাঝারি সাইজের উপরের অ্যাপ বার

বড়: যেসব স্ক্রিনে অনেক নেভিগেশন ও অ্যাকশন প্রয়োজন হয়।

বড় আকারের উপরের অ্যাপ বার

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

এই প্রয়োগটি নিম্নলিখিতভাবে দেখানো হয়:

ছোট টপ অ্যাপ বারের উদাহরণ।
ছবি ২. স্ক্রিনের উপরের দিকে থাকা ছোট অ্যাপ বার।

মাঝখানে অ্যালাইন করা আছে

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

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

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

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

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    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)
    }
}

এই প্রয়োগটি নিম্নলিখিতভাবে দেখানো হয়:

মাঝখানে অ্যালাইন করা উপরের অ্যাপ বারের উদাহরণ।
ছবি ৩. মাঝখানে সারিবদ্ধ করা উপরের অ্যাপ বার।

মাঝারি

মিডিয়াম টপ অ্যাপ বার যেকোনও অতিরিক্ত আইকনের নিচে শীর্ষক দেখায়। একটি তৈরি করতে, 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)
    }
}

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

ছবি ৪. একটি মাঝারি আকারের টপ অ্যাপ বার যা ব্যবহারকারী উপরের দিকে স্ক্রল করলে ছোট হয়ে যায় এবং নিচের দিকে স্ক্রল করলে বড় হয়ে যায়।

বড়

একটি বড় টপ অ্যাপ বার মাঝারিটির মতোই, যদিও শিরোনাম এবং আইকনগুলির মধ্যে প্যাডিং বেশি এবং এটি সামগ্রিকভাবে স্ক্রিনে আরও বেশি জায়গা দখল করে। একটি তৈরি করতে, 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)
    }
}

এই প্রয়োগটি নিম্নলিখিতভাবে দেখানো হয়:

অ্যাপের স্ক্রিনের নিচে একটি অ্যাপ বার আছে, যার বাঁদিকে চারটি অ্যাকশন আইকন এবং ডানদিকে একটি ফ্লোটিং অ্যাকশন বোতাম আছে।
ছবি ৫. একটি বড় টপ অ্যাপ বারের উদাহরণ বাস্তবায়ন।

স্ক্রিনের নিচের দিকে থাকা অ্যাপ বার

নিচের অ্যাপ বার তৈরি করতে, 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."
        )
    }
}

এই প্রয়োগটি নিম্নলিখিতভাবে দেখানো হয়:

অ্যাপের স্ক্রিনের নিচে একটি অ্যাপ বার আছে, যার বাঁদিকে চারটি অ্যাকশন আইকন এবং ডানদিকে একটি ফ্লোটিং অ্যাকশন বোতাম আছে।
ছবি ৬. স্ক্রিনের নিচের দিকে থাকা অ্যাপ বারের প্রয়োগের উদাহরণ।

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