Odaklanma geçiş sırası

Kullanıcılar, Sekme tuşunu veya yön tuşlarını (ok tuşları / D-pad) kullanarak klavye odağını kullanıcı arayüzü öğeleri arasında hareket ettirebilir:

  • Sekme / Üst Karakter+Sekme: Odağı tek boyutlu görünüm sırasına göre ileri veya geri taşır.
  • Yön tuşları: Odağı iki boyutlu olarak hareket ettirin (Yukarı, Aşağı, Sol ve Sağ).

Tek boyutlu odak geçişi

Tek boyutlu odak geçişinde, Sekme tuşu, ekrandaki görsel görünüm sırasına göre odak noktasını kullanıcı arayüzünde ilerletir.

Örneğin, dört düğme satırlar halinde düzenlendiğinde:

Column {
    Row {
        Button(onClick = { /* ... */ }) { Text("1st") }
        Button(onClick = { /* ... */ }) { Text("2nd") }
    }
    Row {
        Button(onClick = { /* ... */ }) { Text("3rd") }
        Button(onClick = { /* ... */ }) { Text("4th") }
    }
}

Sekme tuşuna basıldığında odak, aşağıdaki sırayla düğmeler arasında taşınır:

  1. 1. düğme (üst-başlangıç)
  2. 2. düğme (üst uç)
  3. 3. düğme (alttan başlama)
  4. 4. düğme (en altta)

Son öğede Sekme tuşuna basıldığında odak, ilk odak hedefine geri döner. Üst Karakter+Sekme tuşlarına basıldığında odak ters sırada hareket eder.

İki boyutlu odak geçişi

Klavye ok tuşlarına basmak veya D-pad kullanmak iki boyutlu odak geçişini tetikler.

İki boyutlu geçişte sistem, istenen yöndeki en yakın hedefi belirlemek için kullanıcı arayüzü öğelerinin geometrik koordinatlarını ve uzamsal sınırlarını inceler.

İki boyutlu odak geçişi sarmalama yapmaz. Kullanıcı, en alttaki öğeye odaklanmışken Aşağı tuşuna basarsa odak, ekranın en üstüne atlamak yerine bu öğede kalır.

İşaretçi tıklamalarıyla odak geçişini sıfırlama

Masaüstü veya büyük ekranlı cihazlarda fiziksel klavye ile fare ya da dokunmatik alan arasında geçiş yaparken:

  • Dokunulduğunda veya tıklandığında odağı temizle: Fare veya dokunmatik alanla etkileşimli olmayan bir alana tıklamak ya da dokunmak, odağı etkin öğeden kaldırır.
  • Gezinmeye yeniden başlama: Odak temizlendikten sonra, bir sonraki Tab tuşuna basıldığında, daha önce etkin olan öğeden devam etmek yerine, görsel görünüm sırasındaki ilk odak hedefinde tek boyutlu gezinmeye yeniden başlanır. Bu, iki boyutlu odak geçişine benzer. Yön tuşları, klavye odağını istenen yöndeki en yakın odak hedefine taşır.

Odağı programatik olarak temizleme hakkında ayrıntılı bilgi için Odağı taşıma ve temizleme başlıklı makaleyi inceleyin.

Odak geçiş sırasını özelleştirme

focusProperties değiştiricisiyle geçiş davranışını özelleştirebilirsiniz.

Tek boyutlu geçiş sırasını özelleştirme

Tek boyutlu geçişi geçersiz kılmak için next veya previous özelliğini FocusRequester ile belirtin:

  1. FocusRequester ile remember { FocusRequester() } nesnesi oluşturun.
  2. focusRequester değiştiricisini kullanarak FocusRequester öğesini hedef composable'a ekleyin.
  3. Kaynak composable'a focusProperties değiştiricisini uygulayın ve FocusRequester öğesini next (Sekme için) veya previous (Üst Karakter+Sekme için) öğesine atayın.

val (first, second, third) = remember { FocusRequester.createRefs() }

Column {
    Button(
        onClick = { /* ... */ },
        modifier = Modifier
            .focusRequester(first)
            .focusProperties { next = third }
    ) {
        Text("First (Tab jumps to Third)")
    }
    Button(
        onClick = { /* ... */ },
        modifier = Modifier.focusRequester(second)
    ) {
        Text("Second")
    }
    Button(
        onClick = { /* ... */ },
        modifier = Modifier.focusRequester(third)
    ) {
        Text("Third")
    }
}

İki boyutlu gezinme sırasını özelleştirme

Benzer şekilde, FocusRequester örneklerini focusProperties içindeki up, down, start, end, left veya right öğelerine atayarak iki boyutlu odak geçişini geçersiz kılabilirsiniz:

val (topButton, bottomButton) = remember { FocusRequester.createRefs() }

Button(
    onClick = { /* ... */ },
    modifier = Modifier
        .focusRequester(topButton)
        .focusProperties {
            down = bottomButton
            right = bottomButton
        }
) {
    Text("Top button")
}
Button(
    onClick = { /* ... */ },
    modifier = Modifier.focusRequester(bottomButton)
) {
    Text("Bottom button")
}

Belirli bir yönde odak gezinmesini engellemek için (ör. düzen sınırlarında) bu özelliğe FocusRequester.Cancel değerini atayın (ör. down = FocusRequester.Cancel). Belirli bir yönde sistemin varsayılan geçiş algoritmasını açıkça korumak için FocusRequester.Default değerini atayın.