E-posta Yaz'da Odak

Kullanıcılar uygulamanızla etkileşim kurarken genellikle ekrandaki öğelere dokunur. Ancak bu, tek etkileşim biçimi değildir. Diğer etkileşim biçimleri şunları içerebilir:

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

Bu durumlarda, belirli bir anda hangi bileşenin etkin olduğunu izlemek önemlidir. Bu işleme odaklanma diyoruz. Ekrandaki öğeler mantıksal bir sırayla odaklanılmalıdır. Jetpack Compose, çoğu durumda doğru olan varsayılan bir odak işleme yöntemine sahiptir. Ancak bazı durumlarda bu varsayılan davranışı değiştirmeniz gerekebilir.

Aşağıdaki sayfalarda, uygulamanızda odak özelliğini nasıl kullanacağınız açıklanmaktadır:

  • Odaklanma geçişi sırasını değiştirme: Varsayılan odaklanma sırasının nasıl değiştirileceği, odaklanma gruplarının nasıl ekleneceği ve composable'ın odaklanmasının nasıl devre dışı bırakılacağı açıklanır.
  • Odak davranışını değiştirme: Odağın nasıl isteneceği, yakalanacağı ve serbest bırakılacağı ile bir ekrana girildiğinde odağın nasıl yönlendirileceği açıklanır.
  • Odaklanmaya tepki verme: Odaklanma değişikliklerine nasıl tepki verileceğini, öğelere görsel ipuçları eklemeyi ve bir öğenin odaklanma durumunu anlamayı açıklar.

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

Odak aramanın varsayılan davranışına geçmeden önce hiyerarşideki düzey kavramını anlamak önemlidir: Genel olarak, iki Composables kardeş olduğunda aynı düzeydedir diyebiliriz. Yani aynı ebeveynlere sahiptirler. Örneğin, Column içindeki öğeler aynı düzeydedir. Bir üst düzeye çıkmak, bir alt öğeden Composable üst öğesine geçmek veya aynı örnekte olduğu gibi bir öğeden onu içeren bir Column öğesine geri dönmek anlamına gelir. Bir alt düzeye geçiş ise bunun tam tersidir. Column Üst öğeden kapsanan öğelere doğru yapılır. Bu kavram, diğer Composables öğelerini içerebilen her Composable için geçerlidir.

Kullanıcı arayüzünde gezinme işlemi birden fazla şekilde yapılabilir. Bunlardan bazılarını çoğu kullanıcı zaten biliyordur:

  • TAB'ler: Tek boyutlu gezinme, ileri veya geri gitme. TAB tuşuyla gezinme, odağı hiyerarşideki sonraki veya önceki öğeye taşır. Compose, varsayılan olarak Composables beyanını izler. Tek yönlü gezinme, klavyedeki tab tuşu veya kol saatindeki döner çerçeve ile sağlanabilir. Bu tür bir odak arama, ekrandaki her öğeyi ziyaret eder.
  • Ok tuşları: Sola, sağa, yukarı veya aşağı gitmek için iki boyutlu gezinme. İki boyutlu gezinme, TV'deki bir D-Pad veya klavyedeki ok tuşları aracılığıyla gerçekleştirilebilir ve geçiş sırası yalnızca belirli bir düzeydeki öğeleri ziyaret eder. Farklı bir seviyeye inmek ve geri çıkmak için D-Pad'in ortasını ve geri düğmesini kullanabilirsiniz.

Aşağıdaki ekran görüntüsünü örnek olarak ele alalım. Burada, biri diğerinin altında olmak üzere dört düğme var ve bunları görünme sırasına göre kullanmak istiyorsunuz. Jetpack Compose bu davranışı kutudan çıkar çıkmaz sunar: Araç seti, tab tuşunu kullanarak her bir composable'ı yukarıdan aşağıya doğru dikey sırada geçmenize veya yukarı ya da aşağı oka basarak odağı taşımanıza olanak tanır.

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

Farklı bir düzene geçtiğinizde bazı şeyler biraz değişir. Düzeninizde birden fazla sütun varsa (ör. aşağıdaki düzen) Jetpack Compose, herhangi bir kod eklemenize gerek kalmadan bunlar arasında gezinmenize olanak tanır. tab tuşuna bastığınızda Jetpack Compose, öğeleri bildirim sırasına göre (Birinci'den Dördüncü'ye) otomatik olarak vurgular. Klavyenizdeki ok tuşlarını kullanarak seçimin 2D alanda istediğiniz yönde ilerlemesini sağlayabilirsiniz.

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

Composables, iki Rows içinde belirtilir ve odak öğeleri, birinci öğeden dördüncü öğeye kadar sırayla belirtilir. tab tuşuna bastığınızda aşağıdaki odak sırası oluşur:

Daha büyük bir form faktöründe yan yana iki sütuna yerleştirilmiş düğmelerin 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 tanımlıyorsunuz:

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

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

Daha büyük bir form faktöründe yan yana iki sütuna yerleştirilmiş düğmelerin 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

Tek yönlü gezinme açısından farklılık gösteren önceki iki örnek, iki boyutlu gezinme konusunda aynı deneyimi sunar. Bunun nedeni genellikle ekrandaki öğelerin her iki örnekte de aynı coğrafi yerleşime sahip olmasıdır. İlk Column öğesinden sağa gitmek odağı ikinciye, ilk Row öğesinden aşağı gitmek ise odağı alttaki öğeye taşır.

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