TopAppBar: এটি কী, সেটআপ এবং Jetpack Compose-এ ব্যবহার

Jetpack Compose-এ TopAppBar কী?

TopAppBar হল Jetpack Compose-এর জন্য Material Design লাইব্রেরির একটি composable ফাংশন যা শীর্ষ অ্যাপ বার বাস্তবায়ন করে। উপাদানটি বর্তমান স্ক্রিনের শিরোনাম, বাম দিকে একটি নেভিগেশন বাটন এবং ডান দিকে অতিরিক্ত কর্ম প্রদর্শন করে।

ক্লাসিক View সিস্টেমের বিপরীতে, TopAppBar-এর Compose সংস্করণ সম্পূর্ণরূপে ঘোষণামূলক: findViewById-এর মাধ্যমে পরিচালিত হওয়ার পরিবর্তে, অবস্থা পরিবর্তিত হলে বার পুনরায় আঁকা হয়। TopAppBar slot API ধারণা ব্যবহার করে, যেখানে title, navigationIcon এবং actions composable ল্যাম্বডা হিসাবে পাস করা হয়। এটি উত্তরাধিকার ছাড়াই বারের যেকোনো উপাদান কাস্টমাইজ করার অনুমতি দেয়।

Google Material Design (2025) অনুযায়ী, Compose-এ TopAppBar তিন প্রকারে আসে: CenterAlignedTopAppBar (কেন্দ্রীভূত শিরোনাম), SmallTopAppBar (স্ট্যান্ডার্ড), এবং MediumTopAppBar (বিস্তৃত)। প্রতিটি প্রকার বারের উচ্চতা, শিরোনামের ফন্ট সাইজ এবং স্ক্রোল আচরণ নির্ধারণ করে। কেন্দ্রীভূত সংস্করণটি প্রধান স্ক্রিনে বেশি ব্যবহৃত হয়, যখন MediumTopAppBar কন্টেন্ট পৃষ্ঠাগুলির জন্য ব্যবহৃত হয় যেখানে স্ক্রোল করার সময় শিরোনাম মসৃণভাবে ছোট হয়।

TopAppBar-এর সঠিক পরিচালনার জন্য সিস্টেম মার্জিন বিবেচনা করা প্রয়োজন: WindowInsetsCompat থেকে Insets। Android Developers (2025) সুপারিশ অনুযায়ী, Modifier.statusBarsPadding() বা windowInsetsPadding(WindowInsets.systemBars) কল করা স্ট্যাটাস বারের সাথে বার ওভারল্যাপ প্রতিরোধ করে।

TopAppBar প্যারামিটার: শিরোনাম এবং মডিফায়ার কনফিগার করা

TopAppBar উপাদানটি বেশ কয়েকটি প্রয়োজনীয় এবং ঐচ্ছিক প্যারামিটার গ্রহণ করে। প্রধানটি হল title, যেখানে শিরোনাম টেক্সটসহ একটি composable ব্লক পাস করা হয়। যেহেতু title একটি @Composable ল্যাম্বডা, আপনি কেবল টেক্সট নয়, টেক্সটসহ একটি আইকন, একটি অনুসন্ধান ক্ষেত্র তৈরি করতে বা অগ্রগতি প্রদর্শন করতে পারেন।

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppTopBar() {
    TopAppBar(
        title = { Text("Main") },
        navigationIcon = {
            IconButton(onClick = { /* open drawer */ }) {
                Icon(
                    Icons.Filled.Menu,
                    contentDescription = "Menu"
                )
            }
        },
        actions = {
            IconButton(onClick = { /* search */ }) {
                Icon(Icons.Filled.Search, contentDescription = "Search")
            }
        }
    )
}

Modifier প্যারামিটার পুরো বারের জন্য প্যাডিং, সাইজ এবং সারিবদ্ধকরণ সেট করার অনুমতি দেয়। Modifier.heightIn-এর মাধ্যমে সর্বনিম্ন এবং সর্বোচ্চ উচ্চতা সীমিত করা যায়। colors প্যারামিটার পটভূমি, শিরোনাম এবং আইকনের রঙ ওভাররাইড করতে TopAppBarColors অবজেক্ট গ্রহণ করে।

ডিফল্টরূপে, TopAppBar বর্তমান MaterialTheme থেকে রঙের স্কিম ব্যবহার করে। যদি কাস্টম প্যালেটের প্রয়োজন হয়, TopAppBarDefaults.smallTopAppBarColors() ব্যবহার করুন। Material3-এ, পটভূমির রঙ হালকা এবং গাঢ় থিমে স্বয়ংক্রিয়ভাবে surfaceColor-এর সাথে খাপ খায়, যা ম্যানুয়াল কনফিগারেশনের প্রয়োজনীয়তা দূর করে।

TopAppBar-এ নেভিগেশন বাটন

NavigationIcon হল TopAppBar-এর বাম অংশে একটি composable ব্লক যার মাধ্যমে নেভিগেশন বাস্তবায়িত হয়। সাধারণ পরিস্থিতি: Drawer খোলা (মেনু আইকন), পূর্ববর্তী স্ক্রিনে ফিরে যাওয়া (ArrowBack আইকন), বা বর্তমান স্ক্রিন বন্ধ করা (Close আইকন)।

আইকনের পছন্দ নেভিগেশন স্ট্যাকে স্ক্রিনের অবস্থানের উপর নির্ভর করে। যদি স্ক্রিন রুট হয়, Drawer খোলার জন্য মেনু আইকন প্রদর্শিত হয়। যদি স্ক্রিন নেস্টেড হয়, ফিরে যাওয়ার জন্য ArrowBack আইকন প্রদর্শিত হয়। Compose-এ, এই যুক্তি NavController-এর মাধ্যমে বাস্তবায়িত হয়: বর্তমান ব্যাক স্ট্যাক এন্ট্রি নির্ধারণ করে কোন আইকন দেখাতে হবে।

Material Design (2025) সুপারিশ অনুযায়ী, নেভিগেশন এলাকার প্রস্থ 48 dp — স্পর্শ মিথস্ক্রিয়ার জন্য মানক লক্ষ্য। আইকনটি ভিজুয়াল ফিডব্যাক (ripple) সহ ক্লিকযোগ্য হওয়া উচিত। Compose-এ, এটি নেভিগেশন ট্রিগার করা onClick কলব্যাকসহ IconButton-এ মোড়ানোর মাধ্যমে নিশ্চিত করা হয়।

Scaffold ব্যবহার করার সময়, নেভিগেশন বাটন DrawerState নকল করতে পারে, যা সরাসরি TopAppBar-এর পরিবর্তে Scaffold-এ পাস করা হয়। এই ক্ষেত্রে, navigationIcon rememberDrawerState-এর মাধ্যমে Drawer অবস্থা উল্লেখ করে।

অ্যাকশন এবং ড্রপডাউন মেনু যোগ করা

TopAppBar-এ actions প্যারামিটার RowScope প্রসঙ্গসহ একটি composable ব্লক গ্রহণ করে, যা শিরোনামের ডান দিকে একাধিক আইকন বা বাটন রাখার অনুমতি দেয়। প্রতিটি অ্যাকশন একটি ক্লিকযোগ্য আইকনোগ্রাফিক উপাদান হওয়া উচিত: অনুসন্ধান, বিজ্ঞপ্তি, সেটিংস, পছন্দ।

অতিরিক্ত অ্যাকশনের জন্য DropdownMenu-এর মাধ্যমে একটি ড্রপডাউন মেনু ব্যবহার করা হয়। যদি অ্যাকশনের সংখ্যা তিনের বেশি হয়, অতিরিক্ত অ্যাকশনগুলি MoreVert আইকনসহ OverflowMenu-এ রাখা হয়। ক্লিক করলে, লুকানো অ্যাকশনের একটি তালিকা খোলে। DropdownMenu আইকনের সাপেক্ষে স্বয়ংক্রিয়ভাবে অবস্থান করে।

@Composable
fun TopBarWithOverflow() {
    var menuExpanded by remember { mutableStateOf(false) }
    TopAppBar(
        title = { Text("Profile") },
        actions = {
            IconButton(onClick = { /* share */ }) {
                Icon(Icons.Filled.Share, contentDescription = "Share")
            }
            Box {
                IconButton(onClick = { menuExpanded = true }) {
                    Icon(Icons.Filled.MoreVert, contentDescription = "More")
                }
                DropdownMenu(
                    expanded = menuExpanded,
                    onDismissRequest = { menuExpanded = false }
                ) {
                    DropdownMenuItem(text = { Text("Settings") }, onClick = { /* navigate */ })
                    DropdownMenuItem(text = { Text("About") }, onClick = { /* navigate */ })
                }
            }
        }
    )
}

প্রতিটি আইকনের জন্য contentDescription সেট করা গুরুত্বপূর্ণ — এটি অ্যাক্সেসিবিলিটি প্রয়োজনীয়তা। বিবরণ ছাড়া, TalkBack বাটন ঘোষণা করবে না। শুধুমাত্র আলংকারিক উপাদানের জন্য contentDescription = null ব্যবহার করুন।

Material3-এ TopAppBar: ডায়নামিক কালার এবং অভিযোজন

Material3 (M3) হল Material Design-এর বর্তমান সংস্করণ, যা Google নতুন প্রকল্পের জন্য সুপারিশ করে। M3-এ TopAppBar TopAppBar, CenterAlignedTopAppBar এবং MediumTopAppBar-এর মাধ্যমে বাস্তবায়িত হয়। Material2 থেকে মূল পার্থক্য হল ডায়নামিক কালার, অভিযোজিত উচ্চতা এবং স্ক্রোল আচরণের জন্য অন্তর্নির্মিত সমর্থন।

ডায়নামিক কালার ডিভাইস ওয়ালপেপার (Android 12+) এর উপর ভিত্তি করে বারের রঙ স্বয়ংক্রিয়ভাবে নির্বাচন করে। M3-এ TopAppBar পটভূমির জন্য surfaceColor এবং শিরোনামের জন্য primary ব্যবহার করে। যদি ডায়নামিক কালার উপলব্ধ না হয়, MaterialTheme থেকে একটি ফallback প্যালেট প্রয়োগ করা হয়। Google Material Design (2025) অনুযায়ী, 63% Android 12+ ব্যবহারকারী অ্যাপ্লিকেশনে ডায়নামিক কালার ব্যবহার করেন।

MediumTopAppBar একটি বড় শিরোনাম (32 sp) সহ একটি বিস্তৃত সংস্করণ, যা স্ক্রোল করার সময় মসৃণভাবে 20 sp-এ ছোট হয়ে যায়, SmallTopAppBar-এ রূপান্তরিত হয়। এই প্রভাব TopAppBarDefaults.mediumTopAppBarColors() এবং scrollBehavior প্যারামিটারের মাধ্যমে বাস্তবায়িত হয়। ট্রানজিশন অ্যানিমেশন TopAppBarState-এর মাধ্যমে নিয়ন্ত্রিত হয়, যা শিরোনামের সংকোচন ট্র্যাক করে।

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MediumTopBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
    Scaffold(
        topBar = {
            MediumTopAppBar(
                title = { Text("Library") },
                navigationIcon = {
                    IconButton(onClick = { }) {
                        Icon(Icons.Filled.Menu, contentDescription = "Menu")
                    }
                },
                scrollBehavior = scrollBehavior
            )
        }
    ) { padding ->
        LazyColumn(contentPadding = padding) { /* content */ }
    }
}

Material3 TopAppBar-এর জন্য, আপনাকে @OptIn(ExperimentalMaterial3Api::class) ব্যবহার করতে হবে — অ্যানোটেশন নির্দেশ করে যে API ভবিষ্যত সংস্করণে পরিবর্তিত হতে পারে। 2025 পর্যন্ত, M3-এ TopAppBar পরীক্ষামূলক রয়ে গেছে, কিন্তু Google উপযুক্ত পরীক্ষার সঙ্গে উৎপাদনের জন্য এটি সুপারিশ করে।

ScrollBehavior: স্ক্রোল করার সময় বার লুকানো

ScrollBehavior হল একটি প্রক্রিয়া যা উল্লম্ব কন্টেন্ট স্ক্রোল করার সময় TopAppBar-এর দৃশ্যমানতা নিয়ন্ত্রণ করে। Jetpack Compose-এ, scrollBehavior স্থান খালি করতে বার লুকানো বা সংকুচিত করার অনুমতি দেয়, যা বিশেষ করে বড় কন্টেন্ট তালিকা সহ স্ক্রিনে উপযোগী।

Material3 তিনটি কৌশল প্রদান করে: enterAlways (উপরে স্ক্রোল করলে বার দেখা যায় এবং নিচে স্ক্রোল করলে লুকিয়ে যায়), exitUntilCollapsed (শিরোনাম সম্পূর্ণ সংকুচিত হওয়ার পরেই বার লুকায়), এবং TopAppBarScrollBehavior ইন্টারফেস বাস্তবায়নের মাধ্যমে কাস্টম। প্রথম বিকল্পটি কন্টেন্ট ফিডের জন্য উপযুক্ত, দ্বিতীয়টি MediumTopAppBar সহ স্ক্রিনের জন্য।

ScrollBehavior-এর rememberLazyListState()-এর মাধ্যমে LazyColumn বা LazyRow-এর সাথে সমন্বয় প্রয়োজন। স্ক্রোল অবস্থা scrollBehavior প্যারামিটারের মাধ্যমে TopAppBar-এ পাস করা হয়। উপাদানটি স্বয়ংক্রিয়ভাবে স্ক্রোল ইভেন্টে সাবস্ক্রাইব করে এবং বারের দৃশ্যমানতা অ্যানিমেট করে। Android Developers (2025) অনুযায়ী, enterAlwaysScrollBehavior সবচেয়ে জনপ্রিয় কৌশল, যা স্ক্রোলযোগ্য TopAppBar সহ 75% অ্যাপ্লিকেশনে ব্যবহৃত হয়।

কাস্টম ScrollBehavior কনফিগার করা

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

ডিফল্টরূপে, scrollBehavior কন্টেন্টে প্যাডিং যোগ করে না — paddingTop Scaffold-এ contentPadding-এর মাধ্যমে বা LazyColumn-এ Modifier.padding-এর মাধ্যমে ম্যানুয়ালি সেট করতে হবে। MediumTopAppBar-এ, মার্জিন স্বয়ংক্রিয়ভাবে TopAppBarState.collapsedFraction-এর মাধ্যমে গণনা করা হয়।

val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
Scaffold(
    topBar = {
        MediumTopAppBar(
            title = { Text("Content") },
            scrollBehavior = scrollBehavior
        )
    }
) { padding ->
    LazyColumn(contentPadding = padding) { /* items */ }
}

ScrollBehavior শুধুমাত্র Material3-এ উপলব্ধ। Material2 TopAppBar-এ স্ক্রোল করার সময় লুকানোর অন্তর্নির্মিত সমর্থন নেই — একই ধরনের আচরণের জন্য NestedScrollConnection-এর মাধ্যমে ম্যানুয়াল বাস্তবায়ন প্রয়োজন।