Grup odak hedefleri

focusGroup değiştiricisini kullanarak birden fazla odak hedefini birlikte gruplandırabilirsiniz. Gruplandırma, odak hiyerarşilerini yönetmenize, mantıksal kullanıcı arayüzü bölgelerini (ör. araç çubukları, iletişim kutusu işlemleri veya kart listeleri) yalıtmanıza ve odak bir bölgeye girdiğinde veya bölgeden çıktığında müdahale etmenize olanak tanır.

Odak grubu kavramları: giriş, çıkış ve varsayılan geçiş

Odaklanma grubu, alt odaklanma hedefleri etrafında tutarlı bir gezinme sınırı oluşturur. Odağın bu sınırda nasıl hareket ettiğini anlamak için iki temel kavramı bilmeniz gerekir:

  • Enter: Odak, odak grubu dışındaki herhangi bir öğeden grup içindeki bir öğeye geçtiğinde gerçekleşen etkinlik.
  • Çıkış: Odağın grubun son dahili öğesinden ayrılıp harici bir odak hedefine geçiş yaptığında gerçekleşen etkinlik.
Bir odak grubu sınırı boyunca giriş ve çıkış geçişlerini gösteren diyagram.
Şekil 1. Giriş ve çıkış etkinliklerinin yer aldığı odak grubu.

Varsayılan odak geçişi davranışı

Varsayılan olarak, bir odak grubu dışarıdan odak aldığında:

  1. Gruba girme: Otomatik Oluşturma, kuruluş içi bir alt odak hedefi otomatik olarak seçer. Tek boyutlu (Tab) gezinmede, görsel görünüm sırasındaki ilk alt öğeyi seçer. İki boyutlu (ok tuşu veya D-pad) gezinmede, gelen yöne geometrik olarak en yakın olan çocuğu seçer.
  2. Grup içinde gezinme: Gezinme tuşuna tekrar tekrar basıldığında odak, grup tarafından kapsanan kardeş odak hedefleri arasında hareket eder.
  3. Gruptan çıkma: Kullanıcı, grup içindeki son odak hedefini geçtikten sonra bir sonraki tuşa bastığında gruptan çıkar ve odağı grup dışındaki komşu odak hedefine taşır.

Odak girişi yönlendirmesini özelleştirme

Birçok kullanıcı arayüzü tasarımında varsayılan giriş hedefi (ör. görünüm sırasındaki ilk alt öğe), kullanıcı için en mantıklı veya uygun seçenek değildir.

Amaç ve kullanım alanları

Sol tarafta "İptal" düğmesi, sağ tarafta ise birincil "Onayla" düğmesi bulunan bir onay iletişim kutusu düşünün. Kullanıcı, bir form alanından aşağı doğru düğme çubuğuna gittiğinde:

  • Varsayılan davranış: Odak, görsel görünüm sırasındaki ilk düğme olduğu için "İptal" düğmesine gider.
  • Amaçlanan davranış: "Onayla" birincil olarak önerilen işlem olduğundan, odak sırasının başından düğme grubuna girerken odağın doğrudan "Onayla"ya gelmesini isteyebilirsiniz. Bu sırada, kullanıcının gerekirse "İptal"i seçmek için sol tuşuna basmasına izin vermeye devam edebilirsiniz.
Varsayılan odak girişi bir düğme grubuna yönlendirilir.
Şekil 2. Varsayılan odak girişi hedefiyle İptal ve Onayla düğmeleri.

Diğer yaygın kullanım alanları şunlardır:

  • TabRow girildiğinde odağı doğrudan seçili sekmeye taşıma.
  • Medya oynatma çubuğuna girildiğinde odağı doğrudan "Oynat / Duraklat" kontrolüne taşıma.

onEnter ve FocusRequester ile uygulama

Bir odak grubuna girerken odağı yönlendirmek için:

  1. İlgili odak hedeflerini içeren üst kapsayıcıya focusGroup değiştiricisini uygulayın.
  2. Kapsayıcıya focusProperties değiştiricisini uygulayın ve onEnter geri çağırmasını yapılandırın.
  3. onEnter geri çağırmasında (FocusEnterExitScope kapsamlı), focusRequester kullanarak tercih edilen varsayılan alt öğeyle ilişkili bir FocusRequester üzerinde requestFocus()'ı çağırın.

val defaultChildRequester = remember { FocusRequester() }

Row(
    modifier = Modifier
        .focusGroup()
        .focusProperties {
            // Intercept entry into this group and redirect focus to the primary action
            onEnter = {
                defaultChildRequester.requestFocus()
            }
        }
) {
    Button(onClick = { /* Cancel action */ }) {
        Text("Cancel")
    }
    Button(
        onClick = { /* Confirm action */ },
        modifier = Modifier.focusRequester(defaultChildRequester)
    ) {
        Text("Confirm (Default)")
    }
}

onEnter ve onExit içinde, sınır boyunca odak geçişlerini tamamen engellemek için cancelFocusChange()'ı da çağırabilir veya kullanıcının Tab, Aşağı veya Sol tuşlarını kullanarak gezinip gezinmediğine göre yönlendirmeyi özelleştirmek için requestedFocusDirection'ü inceleyebilirsiniz.

Kaydırılabilir kapsayıcılar varsayılan olarak odak gruplarıdır.

Jetpack Compose'da LazyRow, LazyColumn ve LazyVerticalGrid gibi kaydırılabilir kapsayıcılar otomatik olarak odaklanma grubu görevi görür. onEnter veya onExit geri çağırmalarını ayarlamak için focusGroup değiştiricisini açıkça uygulamanız gerekmez.