E-posta Yaz'da Odak

Bir kullanıcı uygulamanızla etkileşim kurduğunda, bunu genellikle ekranındaki öğelere dokunarak gerçekleştirir. Ancak bu, tek etkileşim biçimi değildir. Diğer etkileşim biçimleri aşağıdakileri içerebilir:

  • ChromeOS kullanıcısı, ekranda gezinmek için fiziksel klavyedeki ok tuşlarını kullanabilir.
  • Oyun oynayan biri, ekli oyun kumandasını kullanarak oyunun menüsünde gezinebilir.
  • Mobil uygulama kullanıcısı, dokunmatik klavyeyi kullanarak öğeler arasında geçiş yapabilir.

Bu gibi durumlarda, herhangi bir zamanda hangi bileşenin etkin olduğunu izlemek önemlidir. Buna odak diyoruz. Ekrandaki öğeler, mantıksal bir sıraya göre odaklanmalıdır. Jetpack Compose'da odağı işleme yöntemi çoğu durumda doğru olan varsayılan bir yöntem kullanır. Ancak, bazı durumlarda bu varsayılan davranışı değiştirmeniz gerekebilir.

Aşağıdaki sayfalarda odak özelliğinin uygulamanızda nasıl kullanılacağı açıklanmaktadır:

  • Odak geçiş sırasını değiştirme: Varsayılan odak sırasının nasıl değiştirileceğini, odak grupları ekleneceğini ve bir composable'ın odağının nasıl devre dışı bırakılacağını açıklar.
  • Odak davranışını değiştirme: Odaklanma isteğinde bulunma, yakalama ve bırakma işlemlerinin nasıl yapılacağını, ayrıca bir ekrana girildiğinde odağın nasıl yönlendirileceğini açıklar.
  • Odaklanma tepkisi: Odak değişikliklerine nasıl tepki verileceğini, öğelere nasıl görsel işaretler ekleneceğini ve bir öğenin odak durumunun nasıl anlaşılacağını açıklar.

Varsayılan odak geçişi sırası

Odak aramasının varsayılan davranışını ayrıntılı bir şekilde ele almadan önce, hiyerarşideki level kavramını anlamak önemlidir. Genel olarak, iki Composables öğesinin kardeşken aynı seviyede olduğunu, yani üst öğeleri aynı olduğunu söyleyebiliriz. Örneğin, bir Column içindeki öğeler aynı seviyededir. Seviye atlamak, bir çocuktan Composable ebeveynine geçmek veya aynı örneği korumak, bir öğeden onu içeren bir Column öğesine geri dönmek anlamına gelir. Bir seviye aşağı inmek, Column üst öğesinden içerilen öğelere kadar tam tersi şekilde gerçekleşir. Bu kavram, diğer Composables içerebilen her Composable öğesine uygulanabilir.

Kullanıcı arayüzünde gezinme çeşitli şekillerde gerçekleşebilir. Çoğu kullanıcı bunlardan bazılarını zaten bilir:

  • SEKMELER: ileri veya geri giden tek boyutlu gezinme. Sekme tuşuyla gezinme, odağı hiyerarşide bir sonraki veya önceki öğeye ilerletir. Varsayılan olarak Compose Composables bildirimini izler. Tek yönlü gezinme, klavyedeki tab tuşu veya kol saatindeki Döner Çerçeve kullanılarak gerçekleştirilebilir ve bu tür odak araması, ekrandaki her bir öğeyi ziyaret eder.
  • Ok tuşları: sola, sağa, yukarı veya aşağı giderek iki boyutlu gezinme. İki boyutlu gezinme, TV'deki D-Pad veya klavyedeki ok tuşları kullanılarak elde edilebilir ve geçiş sırası yalnızca belirli bir düzeydeki öğeleri ziyaret eder. Aşağı gidip farklı bir seviyeye geri dönmek için d-pad'in merkezini ve Geri düğmesini kullanabilirsiniz.

Aşağıdaki ekran görüntüsünü ele alalım. Bu düğmenin biri diğerinin altında olan dört düğmeniz var ve bu düğmeleri görünüm sırasına göre görmek istiyorsunuz. Jetpack Compose bu özelliği kullanıma hazır bir şekilde sunar. Araç seti, tab tuşunu kullanarak composable'ı dikey olarak yukarıdan aşağıya doğru sırayla dönüştürmenizi veya yukarı ya da aşağı oka basarak odağı taşımanızı sağlar.

Küçük bir form faktöründe dikey olarak alt alta yerleştirilmiş düğmeler listesinin ekran görüntüsü.
Şekil 1. Küçük bir form faktöründe görüntülenen düğmelerin listesi

Farklı türde bir düzene geçtiğinizde işler biraz değişir. Aşağıdaki düzende olduğu gibi düzeninizde birden fazla sütun varsa Jetpack Compose herhangi bir kod eklemeden bu sütunlar arasında gezinmenize olanak tanır. tab tuşuna basarsanız Jetpack Compose öğeleri bildirim sırasına göre Birinci'den Dördüncüye doğru otomatik olarak vurgular. Klavyenizdeki ok tuşlarını kullanarak seçimin 2D alanda istediğiniz yönü takip etmesini sağlarsınız.

Column {
    Row {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Row {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

Composables iki Rows içinde ve odak öğeleri birinciden dördüncüye doğru sırayla beyan edilir. tab tuşuna bastığınızda aşağıdaki odak sırası elde edilir:

Daha büyük bir form faktöründe, yan yana iki sütuna yerleştirilmiş düğmeler listesinin ekran görüntüsü.
Şekil 2. Daha büyük bir form faktöründe, yan yana iki sütuna yerleştirilmiş düğmelerin listesi

Aşağıdaki snippet'te öğeleri Rows yerine Columns içinde bildiriyorsunuz:

Row {
    Column {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Column {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

Bu düzen, öğeleri ekranın başlangıcından sonuna doğru yukarıdan aşağıya dikey olarak katlar:

Daha büyük bir form faktöründe, yan yana iki sütuna yerleştirilmiş düğmeler listesinin ekran görüntüsü.
Şekil 3. Daha büyük bir form faktöründe, yan yana iki sütuna yerleştirilmiş düğmelerin listesi

Önceki iki örnek, tek yönlü gezinme açısından farklılık gösterse de, iki boyutlu gezinme söz konusu olduğunda aynı deneyimi sağlar. Bunun nedeni genellikle ekrandaki öğelerin her iki örnekte de aynı coğrafi yerleşime sahip olmasıdır. İlk Column konumundan sağa kaydırıldığında odak ikinciye, ilk Row konumundan aşağı gidildiğinde odak diğerinin altındaki alana taşınır.

Sonraki
Odak geçiş sırasını değiştirme