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, klavyedekitab
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.
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") } } }
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:
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") } } }
Bu düzen, öğeleri ekranın başlangıcından sonuna doğru yukarıdan aşağıya dikey olarak katlar:
Ö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.
Sizin için önerilenler
- Not: Bağlantı metni JavaScript kapalıyken görüntülenir
- Odaklanma davranışını değiştirme
- Compose'da ConstraintLayout
- Oluşturma bölümünde akış düzenleri