অ্যাপ বার

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

প্রকার

চেহারা

উদ্দেশ্য

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

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

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

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

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

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

উপরে ও নিচে অ্যাপ বারের একটি উদাহরণ।
চিত্র ১. একটি উপরের অ্যাপ বার (বামে) এবং একটি নিচের অ্যাপ বার (ডানে)।

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

শীর্ষ অ্যাপ বারগুলি

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

প্রকার

উদাহরণ

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

ছোট শীর্ষ অ্যাপ বার

কেন্দ্র-সারিবদ্ধ : যেসব স্ক্রিনে একটিমাত্র প্রধান কাজ থাকে, সেগুলোর জন্য।

মাঝখানে সারিবদ্ধ শীর্ষ অ্যাপ বার

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

মাঝারি শীর্ষ অ্যাপ বার

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

বড় টপ অ্যাপ বার

এপিআই পৃষ্ঠ

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

  • 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 কম্পোজেবলটি ব্যবহার করুন।

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

@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 কম্পোজেবলটি ব্যবহার করুন।

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

@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 কম্পোজেবলটি ব্যবহার করুন।

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

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

এই বাস্তবায়নটি নিম্নরূপ:

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

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