E-posta Yaz'da Odak

Uygulamanızla etkileşimde bulunan kullanıcılar, genellikle bu işlemi uygulamadaki öğelere sahip olabilir. Ancak, tek etkileşim biçimi bu değildir. Diğer kurumsal etkileşim aşağıdakileri içerebilir:

  • ChromeOS kullanıcısı şu işlemleri yapmak için fiziksel klavyesindeki ok tuşlarını kullanabilir: ekranda gezinin.
  • Oyun oynayan bir kullanıcı, takılı oyun kumandasını kullanarak gezinebilir uygulamanın menüsünü kullanabilirsiniz.
  • Bir mobil uygulama kullanıcısı, dokunmatik klavyeyi kullanarak öğeler arasında geçiş yapabilir.

Bu gibi durumlarda, belirli bir noktada hangi bileşenin etkin olduğunu Buna odak diyoruz. Ekrandaki öğeler şu şekilde olmalıdır: bir sıraya sokmaktır. Jetpack Compose'da odağı yönetmenin varsayılan yöntemi var ve çoğu durumda doğrudur. Ancak bazı durumlarda, bu varsayılan davranışı seçin.

Aşağıdaki sayfalarda, odaklamanın uygulamanızda nasıl kullanılacağı açıklanmaktadır:

  • Odak geçiş sırasını değiştirme: Varsayılan odaklama sırasının nasıl değiştirileceğini, odak gruplarının nasıl 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: Odak isteme, yakalama ve bırakmanın yanı sıra odağın ekrana girdikten sonra nasıl yeniden yönlendirileceğini açıklar.
  • Odaklanmaya tepki verme: Odak değişikliklerine nasıl tepki verileceğini, öğelere görsel ipuçları eklemeyi ve bir öğenin odak durumunu anlamayı açıklar.

Varsayılan odaklamanın geçiş sırası

Odaklı aramanın varsayılan davranışına geçmeden önce, Hiyerarşideki seviye kavramını kavrayabiliriz: Genel anlamda, iki Composables kardeş olduğunda aynı düzeyde olduğunu söyleyerek sahip olması gerekir. Örneğin, Column içindeki öğeler emin olmanız gerekir. Bir seviye yükselmek, çocuktan Composable seviyesine geçmek anlamına gelir veya aynı örneği ele alarak bir öğeden sonraki Column emin olmanız gerekir. Bir seviye aşağı inmek, Column üzerinden aşağıya doğru inmektir. üst öğesi olan etiketler ekler. Bu kavram her Composable için uygulanabilir diğer Composables içerebilir.

Kullanıcı arayüzünde gezinme, çeşitli şekillerde gerçekleşebilir. Kullanıcıların çoğu bilin:

  • SEKMELER: ileri veya geri giden tek boyutlu gezinme. SEKME gezinme, odağı hiyerarşide sonraki veya önceki öğeye yönlendirir. Ölçüt Compose, Composables bildirimine uyar. Tek Yönlü klavyede tab tuşu veya Rotary tuşuyla gezinme işlemi yapılabilir Kol saatinin çerçevesini ve bu tür odaklı arama özelliğini ziyaret ederek tıklayın.
  • Ok tuşları: sola, sağa, yukarı veya aşağı giden iki boyutlu gezinme. İki boyutlu gezinme, TV'deki veya oktaki d-pad'den yapılabilir. tuşlarıyla ve geçiş sırası yalnızca belirli bir seviyesinde olmalıdır. D-pad'in ortadaki ve Geri düğmesini kullanarak aşağı gidip istediğiniz zaman kullanabilirsiniz.

Örnek olarak, aşağıda bir tane olmak üzere dört düğmenin bulunduğu ekran görüntüsünü alın ve bunların hepsini görünüm sırasına göre incelemek istiyorsunuz. Jetpack Compose, bu özelliği kullanıma hazır sunuyor: Araç seti sayesinde composable'ı kullanarak yukarıdan aşağıya doğru dikey sırayla tab tuşuna basın veya yukarı ya da aşağı oka basarak odağı taşıyın.

Diğerinin altına dikey olarak küçük form faktöründe yerleştirilmiş düğmeler listesinin ekran görüntüsü.
Şekil 1. Küçük form faktöründe görüntülenen düğmelerin listesi
'nı inceleyin.

Farklı türde bir düzene geçtiğinizde işler biraz değişir. Eğer düzende, aşağıdaki düzende olduğu gibi birden fazla sütun bulunur; Jetpack Compose, bunlar arasında gezinebilirsiniz. tab tuşuna basarsanız tuşuna bastığınızda Jetpack Compose, öğeleri beyan sırasına göre otomatik olarak vurgular. seçimden dördü. Klavyenizde ok tuşlarını kullanarak seçim yapabilirsiniz istenilen yönü izleyin.

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

Composables, iki Rows içinde tanımlanır ve odak öğeleri şunlardır: doğru sırayla açıklandığından emin olun. tab tuşuna bastığınızda, aşağıdaki odaklanma sırasını oluşturur:

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

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

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

Bu düzen, öğeleri başından itibaren dikey olarak yukarıdan aşağıya doğru çeker dokunun:

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

Önceki iki örnek, tek yönlü gezinme açısından farklılık gösterse de, iki boyutlu gezinme konusunda da aynı deneyimi yaşayacaktır. Bu genelde çünkü ekrandaki öğeler her ikisinde de aynı coğrafi yerleşime sahip. örnekler. İlk Column adımdan sağa doğru giderseniz odağı ikinci sırada yer alır. İlk Row öğeden aşağı doğru ilerlerken odağı ilk dokunun.

ziyaret edin.