Grup odak hedefleri

focusGroup değiştiricisini kullanarak birden fazla odak hedefini 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) izole etmenize 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ş

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

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

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

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

  1. Gruba girme: Compose, otomatik olarak dahili bir alt odak hedefi seçer. Tek boyutlu (Sekme) gezinme için görsel görünüm sırasındaki ilk alt öğeyi seçer. İki boyutlu (ok tuşu veya d-pad) gezinme için gelen yöne geometrik olarak en yakın alt öğeyi seçer.
  2. Grup içinde gezinme: Gezinme tuşlarına tekrar tekrar basıldığında odak, grup tarafından kapsanan kardeş odak hedefleri arasında taşınır.
  3. Gruptan çıkma: Kullanıcı, gruptaki son odak hedefinden sonra gezindiğinde bir sonraki tuşa basıldığında gruptan çıkılır ve odak, grubun dışındaki komşu odak hedefine taşını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 en uygun seçenek değildir.

Amaç ve kullanım alanları

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

  • Varsayılan davranış: Görsel görünüm sırasındaki ilk düğme olduğu için odak "İptal" düğmesine gelir.
  • Amaçlanan davranış: "Onayla" birincil önerilen işlem olduğundan, odak sırasının önceki bir noktasından düğme grubuna girerken odağın doğrudan "Onayla"ya gelmesini isteyebilirsiniz. Bununla birlikte, kullanıcının gerekirse "İptal"i seçmek için Sol tuşuna basmasına da izin verebilirsiniz.
Bir düğme grubuna varsayılan odak girişi.
Şekil 2. İptal ve Onayla düğmeleri, varsayılan odak giriş hedefiyle gösterilir.

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

  • TabRow girerken 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. focusProperties değiştiricisini kapsayıcıya uygulayın ve onEnter geri çağırma işlevini 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() yöntemini ç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() yöntemini de çağırabilir veya kullanıcının Sekme, Aşağı ya da Sol tuşunu kullanarak gezinip gezinmediğine göre yönlendirmeyi özelleştirmek için requestedFocusDirection yöntemini 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 odak 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.