ডায়নামিক টপ অ্যাপ বার তৈরি করা

এই নির্দেশিকা ব্যাখ্যা করে যে কীভাবে Compose-এ একটি ডাইনামিক টপ অ্যাপ বার তৈরি করা যায় যা তালিকা থেকে আইটেম বেছে নেওয়ার সময় এর বিকল্পগুলি পরিবর্তন করে। আপনি বেছে নেওয়ার অবস্থার উপর ভিত্তি করে উপরের অ্যাপ বারের শীর্ষক ও অ্যাকশন পরিবর্তন করতে পারবেন।

ডায়নামিক টপ অ্যাপ বারের আচরণ প্রয়োগ করুন

এই কোডটি উপরের অ্যাপ বারের জন্য একটি কম্পোজেবল ফাংশন সংজ্ঞায়িত করে যা আইটেম নির্বাচনের উপর ভিত্তি করে পরিবর্তিত হয়:

@Composable
fun AppBarSelectionActions(
    selectedItems: Set<Int>,
    modifier: Modifier = Modifier,
) {
    val hasSelection = selectedItems.isNotEmpty()
    val topBarText = if (hasSelection) {
        "Selected ${selectedItems.size} items"
    } else {
        "List of items"
    }

    TopAppBar(
        title = {
            Text(topBarText)
        },
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.primaryContainer,
            titleContentColor = MaterialTheme.colorScheme.primary,
        ),
        actions = {
            if (hasSelection) {
                IconButton(onClick = {
                    /* click action */
                }) {
                    Icon(
                        imageVector = Icons.Filled.Share,
                        contentDescription = "Share items"
                    )
                }
            }
        },
        modifier = modifier
    )
}

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

  • AppBarSelectionActions বেছে নেওয়া আইটেম ইনডেক্সের Set গ্রহণ করে।
  • আপনি কোনও আইটেম বেছে নিয়েছেন কিনা তার উপর নির্ভর করে topBarText পরিবর্তন হয়।
    • আপনি আইটেম বেছে নিলে, বেছে নেওয়া আইটেমের সংখ্যা বর্ণনা করা টেক্সট TopAppBar-এ দেখা যায়।
    • আপনি কোনও আইটেম বেছে না নিলে, topBarText হল "আইটেমের তালিকা"।
  • actions ব্লকটি আপনি অ্যাপের উপরের বারে যে অ্যাকশনগুলি দেখান তা নির্ধারণ করে। hasSelection সত্য হলে, টেক্সটের পরে শেয়ার করার আইকন দেখানো হয়।
  • আপনি আইকনে ক্লিক করলে IconButton-এর onClick ল্যাম্বডা শেয়ার অ্যাকশন হ্যান্ডেল করে।

ফলাফল

একটি ডায়নামিক টপ অ্যাপ বার শেয়ার করার আইকন সহ ৩টি আইটেম বেছে নেওয়া হয়েছে টেক্সট দেখায়। আইটেম বেছে নেওয়া হলে তবেই এই টেক্সট ও আইকন দেখা যায়
ছবি ১. টেক্সট ও শেয়ার করার আইকন সহ একটি ডায়নামিক টপ অ্যাপ বার যা শুধুমাত্র আইটেম বেছে নেওয়া হলে দেখা যায়।

ডায়নামিক টপ অ্যাপ বারে বেছে নেওয়ার মতো তালিকা ইন্টিগ্রেট করুন

এই উদাহরণে দেখানো হয়েছে কীভাবে ডায়নামিক টপ অ্যাপ বারে বেছে নেওয়া যায় এমন তালিকা যোগ করতে হয়:

@Composable
private fun AppBarMultiSelectionExample(
    modifier: Modifier = Modifier,
) {
    val listItems by remember { mutableStateOf(listOf(1, 2, 3, 4, 5, 6)) }
    var selectedItems by rememberSaveable { mutableStateOf(setOf<Int>()) }

    Scaffold(
        modifier = modifier,
        topBar = { AppBarSelectionActions(selectedItems) }
    ) { innerPadding ->
        LazyColumn(contentPadding = innerPadding) {
            itemsIndexed(listItems) { _, index ->
                val isItemSelected = selectedItems.contains(index)
                ListItemSelectable(
                    selected = isItemSelected,
                    Modifier
                        .combinedClickable(
                            interactionSource = remember { MutableInteractionSource() },
                            indication = null,
                            onClick = {
                                /* click action */
                            },
                            onLongClick = {
                                if (isItemSelected) selectedItems -= index else selectedItems += index
                            }
                        )
                )
            }
        }
    }
}

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

  • আপনি কতগুলি আইটেম বেছে নিয়েছেন তার উপর ভিত্তি করে উপরের বার আপডেট হয়।
  • selectedItems-এ বেছে নেওয়া আইটেম ইনডেক্সের সেট থাকে।
  • AppBarMultiSelectionExample স্ক্রিন স্ট্রাকচার করতে Scaffold ব্যবহার করে।
    • topBar = { AppBarSelectionActions(selectedItems) }, AppBarSelectionActions কম্পোজ করার উপযুক্ত আইটেমকে টপ অ্যাপ বার হিসেবে সেট করে। AppBarSelectionActions, selectedItems স্ট্যাটাস পায়।
  • LazyColumn উল্লম্ব তালিকায় আইটেম দেখায়, শুধুমাত্র স্ক্রিনে দেখা যায় এমন আইটেম রেন্ডার করে।
  • ListItemSelectable বেছে নেওয়া যায় এমন তালিকার আইটেমকে বোঝায়।
    • combinedClickable আইটেম বেছে নেওয়ার জন্য ক্লিক ও দীর্ঘ-ক্লিক, দুটিই হ্যান্ডেল করার অনুমতি দেয়। ক্লিক করলে কোনও অ্যাকশন পারফর্ম করা হয়, তবে কোনও আইটেমে বেশিক্ষণ ক্লিক করে থাকলে সেটি বেছে নেওয়ার স্ট্যাটাস টগল করা হয়।

ফলাফল

একটি ডায়নামিক টপ অ্যাপ বার ৩টি আইটেম বেছে নেওয়া হয়েছে টেক্সট দেখায়, এর পরে একটি শেয়ার করার আইকন থাকে। নিচে, একটি তালিকায় বেশ কয়েকটি আইটেম দেখানো হয়েছে, যে তিনটি আইটেম বেছে নেওয়া হয়েছে সেগুলির পাশে টিকচিহ্ন দেওয়া আছে
ছবি ২. নির্দিষ্ট আইটেম বেছে নিয়ে ডায়নামিক টপ অ্যাপ বারে ইন্টিগ্রেট করা তালিকা।

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