ফোকাস রিস্টোর করা

ব্যবহারকারীরা যখন হার্ডওয়্যার কীবোর্ড বা ডি-প্যাড ব্যবহার করে জটিল ইউজার ইন্টারফেস নেভিগেট করেন, তারা প্রায়শই স্ক্রিনের বিভিন্ন বিভাগের মধ্যে ঘোরাফেরা করেন—যেমন সাইড নেভিগেশন রেল থেকে কন্টেন্ট লিস্টে জাম্প করা, কোনও আইটেমের সাথে ইন্টার‍্যাক্ট করা এবং তারপরে আবার ফিরে আসা। ফোকাস রিস্টোরেশন কন্টেনারকে আগে ফোকাস করা চাইল্ড এলিমেন্ট মনে রাখতে এবং ফোকাস আবার কন্টেনারে প্রবেশ করলে এতে ফোকাস রিস্টোর করতে দেয়।

স্ক্রল করা যায় এমন কন্টেনারে ফোকাস ফিরিয়ে আনুন

Jetpack Compose-এ, স্ক্রল করা যায় এমন কন্টেনার যেমন LazyColumn, LazyRow, এবং LazyVerticalGrid অটোমেটিক ফোকাস গ্রুপ হিসেবে কাজ করে। লেজি লিস্ট বা গ্রিডে ফোকাস রিস্টোরেশন চালু করতে, focusRestorer মডিফায়ার অ্যাটাচ করুন:

LazyColumn(
    modifier = Modifier.focusRestorer()
) {
    items(items) { item ->
        Button(onClick = { /* Handle click */ }) {
            Text(item)
        }
    }
}
FocusRestoration.kt

LazyColumn থেকে ফোকাস সরে গেলে, কোন আইটেম অ্যাক্টিভ ছিল তা কন্টেনার রেকর্ড করে। ব্যবহারকারী তালিকায় ফিরে এলে, তালিকার একদম উপরে ফিরে যাওয়ার পরিবর্তে সেই আইটেমে ফোকাস ফিরিয়ে আনা হয়।

সারি ও কলামে ফোকাস ফিরিয়ে আনুন

লেজি লেআউট কন্টেনারের মতো নয়, স্ট্যান্ডার্ড স্ক্রল করা যায় না এমন লেআউট কন্টেনার যেমন Row এবং Column ডিফল্ট হিসেবে ফোকাস বাউন্ডারি তৈরি করে না। কারণ তারা নিজেরাই ফোকাস এন্ট্রি ইভেন্ট ইন্টারসেপ্ট করে না, শুধুমাত্র focusRestorer মডিফায়ার প্রয়োগ করা যথেষ্ট নয়।

Row বা Column-এ ফোকাস রিস্টোরেশন চালু করতে, focusGroup-এর সাথে focusRestorer একত্রিত করুন:

Row(
    modifier = Modifier
        .focusGroup()
        .focusRestorer()
) {
    Button(onClick = { /* Action 1 */ }) {
        Text("First item")
    }
    Button(onClick = { /* Action 2 */ }) {
        Text("Second item")
    }
    Button(onClick = { /* Action 3 */ }) {
        Text("Third item")
    }
}
FocusRestoration.kt

একটি ফলব্যাক ফোকাস টার্গেট নির্দিষ্ট করুন

প্রথমবার কোনও কন্টেনারে ফোকাস করা হলে, আগে ফোকাস করা কোনও চাইল্ড থাকে না। কোন চাইল্ডকে ফোকাস করতে হবে তা নির্ধারণ করতে Compose ডিফল্ট ফোকাস অর্ডার অনুসরণ করে।

আপনি কাস্টমাইজ করতে পারেন যে কোন চাইল্ড প্রথম এন্ট্রিতে ফোকাস পাবে, এর জন্য focusRestorer-এ একটি ফলব্যাক FocusRequester পাস করতে হবে (অথবা আগের Compose ভার্সনে FocusRequester রিটার্ন করা ল্যাম্বডা):

val firstItemRequester = remember { FocusRequester() }

LazyColumn(
    modifier = Modifier.focusRestorer(firstItemRequester)
) {
    itemsIndexed(items) { index, item ->
        val itemModifier = if (index == 0) {
            Modifier.focusRequester(firstItemRequester)
        } else {
            Modifier
        }
        Button(
            onClick = { /* Handle click */ },
            modifier = itemModifier
        ) {
            Text(item)
        }
    }
}
FocusRestoration.kt

আগে কোনও চাইল্ড ফোকাস করা না থাকলে (অথবা ফোকাস রিস্টোর করা না গেলে), Compose সংশ্লিষ্ট ফলব্যাক টার্গেটে ফোকাস সরিয়ে নিয়ে যায়।

নেভিগেশন কম্পোনেন্টে বেছে নেওয়া আইটেমে সরাসরি ফোকাস করুন

NavigationRail, NavigationBar, NavigationDrawer বা TabRow-এর মতো নেভিগেশন কম্পোনেন্টে, কন্টেন্ট এরিয়া থেকে কম্পোনেন্টে প্রবেশ করার সময় ব্যবহারকারীরা বর্তমানে বেছে নেওয়া গন্তব্যে ফোকাস ল্যান্ড করার আশা করেন।

আপনি Modifier.focusGroup()-এর সাথে focusProperties কম্বাইন করে এবং onEnter প্রপার্টি (অথবা আগের Compose ভার্সনে enter) সেট করে অ্যাক্টিভ ডেস্টিনেশনে ফোকাস ডাইরেক্ট করতে পারবেন:

val (homeRequester, searchRequester, settingsRequester) = remember { FocusRequester.createRefs() }

val selectedRequester = when (currentDestination) {
    "home" -> homeRequester
    "search" -> searchRequester
    "settings" -> settingsRequester
    else -> homeRequester
}

NavigationRail(
    modifier = modifier
        .focusProperties {
            // Redirect focus to the selected item when focus enters the navigation rail
            onEnter = { selectedRequester.requestFocus() }
        }
        .focusGroup()
) {
    NavigationRailItem(
        selected = currentDestination == "home",
        onClick = { onNavigate("home") },
        icon = { Icon(Icons.Default.Home, contentDescription = "Home") },
        label = { Text("Home") },
        modifier = Modifier.focusRequester(homeRequester)
    )
    NavigationRailItem(
        selected = currentDestination == "search",
        onClick = { onNavigate("search") },
        icon = { Icon(Icons.Default.Search, contentDescription = "Search") },
        label = { Text("Search") },
        modifier = Modifier.focusRequester(searchRequester)
    )
    NavigationRailItem(
        selected = currentDestination == "settings",
        onClick = { onNavigate("settings") },
        icon = { Icon(Icons.Default.Settings, contentDescription = "Settings") },
        label = { Text("Settings") },
        modifier = Modifier.focusRequester(settingsRequester)
    )
}
FocusRestoration.kt

স্ক্রিন ট্রানজিশন জুড়ে ফোকাস ফিরিয়ে আনুন

কোনও ব্যবহারকারী বিস্তারিত স্ক্রিনে নেভিগেট করার জন্য কোনও আইটেমে ক্লিক করলে এবং পরে 'ফিরে যান' বোতাম বা জেসচার ব্যবহার করে ফিরে এলে, তিনি যে আইটেমে ক্লিক করেছিলেন সেটিতে আপনি ফোকাস ফিরিয়ে আনতে পারবেন।

স্ক্রিন ট্রানজিশন জুড়ে ফোকাস বজায় রাখতে ও ফিরিয়ে আনতে:

1. FocusRequester-এর সাথে কন্টেনারটি যুক্ত করুন।
2. নেভিগেশন ইভেন্ট ট্রিগার করার আগে, কন্টেনারের FocusRequester-এ saveFocusedChild() কল করুন।
3. ব্যবহারকারী স্ক্রিনে ফিরে এলে, কন্টেনারে প্রাথমিক ফোকাসের অনুরোধ করুন অথবা restoreFocusedChild() কল করুন।