Kullanıcı tarafından ölçeklendirilebilen içerikleri destekleme

Uygulamanızda ölçeklenebilir içeriği desteklemek için yakınlaştırmak için parmakla sıkıştırma hareketlerini uygulayın. Bu, erişilebilirliği iyileştirmek için platform genelinde tutarlı olan standart bir yöntemdir. Kullanıcıların metin ve kullanıcı arayüzü öğelerinin boyutunu ihtiyaçlarına göre sezgisel olarak ayarlamasına olanak tanır. Uygulamanız, ayrıntılı kontrol ve bağlamsal davranışla özel ölçeklendirme davranışı tanımlayabilir. Bu davranış, kullanıcılara ekran büyütme gibi sistem düzeyinde bir özellikten daha hızlı keşfettikleri bir deneyim sunar.

Ölçeklendirme stratejisi seçme

Bu kılavuzda ele alınan stratejiler, kullanıcı arayüzünün ekran genişliğine uyacak şekilde yeniden akmasına ve yeniden düzenlenmesine neden olur. Bu özellik, uzun metin satırlarını okumak için gerekli olan yatay kaydırma ve sinir bozucu "zig-zag" hareketini ortadan kaldırarak önemli bir erişilebilirlik avantajı sağlar.

Daha fazla bilgi: Araştırmalar, az gören kullanıcılar için içeriğin yeniden akıtılmasının, iki boyutlu kaydırma gerektiren arayüzlere kıyasla çok daha okunabilir ve gezinmesi kolay olduğunu doğrulamaktadır. Daha fazla bilgi için Mobil Cihazlarda Pan-and-Scan ve Yeniden Akıtılabilir İçerik Karşılaştırması başlıklı makaleyi inceleyin.

Tüm öğeleri veya yalnızca metin öğelerini ölçeklendirme

Aşağıdaki tabloda, her ölçeklendirme stratejisinin görsel etkisi gösterilmektedir.

Öneriler

Görsel farklılıkları gördüğünüze göre, aşağıdaki tablo avantaj ve dezavantajları değerlendirmenize ve içeriğiniz için en iyi stratejiyi seçmenize yardımcı olur.

Jetpack Compose'da ölçeklendirme hareketlerini algılama

Kullanıcı tarafından ölçeklendirilebilen içeriği desteklemek için öncelikle çoklu dokunma hareketlerini algılamanız gerekir. Jetpack Compose'da bunu Modifier.transformable kullanarak yapabilirsiniz.

transformable değiştiricisi, son hareket etkinliğinden bu yana zoomChange değişimini sağlayan üst düzey bir API'dir. Bu, durum güncelleme mantığını doğrudan birikime (ör. scale *= zoomChange) indirgeyerek bu kılavuzda ele alınan uyarlanabilir ölçeklendirme stratejileri için ideal hale getirir.

Pratiğe aktarma örnekleri

Aşağıdaki örneklerde, yoğunluk ölçeklendirme ve yazı tipi ölçeklendirme stratejilerinin nasıl uygulanacağı gösterilmektedir.

Yoğunluk ölçekleme

Bu yaklaşım, bir kullanıcı arayüzü alanının temel density değerini ölçeklendirir. Sonuç olarak, dolgu, aralık ve bileşen boyutları dahil olmak üzere tüm düzene dayalı ölçümler, ekran boyutu veya çözünürlüğü değişmiş gibi ölçeklendirilir. Metin boyutu yoğunluğa da bağlı olduğundan orantılı olarak ölçeklendirilir. Bu strateji, belirli bir alandaki tüm öğeleri eşit şekilde büyütmek, kullanıcı arayüzünüzün genel görsel ritmini ve oranlarını korumak istediğinizde etkilidir.

private class DensityScalingState(
    // Note: For accessibility, typical min/max values are ~0.75x and ~3.5x.
    private val minScale: Float = 0.75f,
    private val maxScale: Float = 3.5f,
    private val currentDensity: Density
) {
    val transformableState = TransformableState { zoomChange, _, _ ->
        scaleFactor.floatValue =
            (scaleFactor.floatValue * zoomChange).coerceIn(minScale, maxScale)
    }
    val scaleFactor = mutableFloatStateOf(1f)
    fun scaledDensity(): Density {
        return Density(
            currentDensity.density * scaleFactor.floatValue,
            currentDensity.fontScale
        )
    }
}
ScalableContentSnippets.kt

Yazı tipi ölçeklendirme

Bu strateji daha hedeflidir ve yalnızca fontScale faktörünü değiştirir. Sonuç olarak yalnızca metin öğeleri büyür veya küçülür. Kapsayıcılar, dolgu ve simgeler gibi diğer tüm düzen bileşenleri ise sabit boyutta kalır. Bu strateji, okuma yoğun uygulamalarda metin okunabilirliğini artırmak için uygundur.

class FontScaleState(
    // Note: For accessibility, typical min/max values are ~0.75x and ~3.5x.
    private val minScale: Float = 0.75f,
    private val maxScale: Float = 3.5f,
    private val currentDensity: Density
) {
    val transformableState = TransformableState { zoomChange, _, _ ->
        scaleFactor.floatValue =
            (scaleFactor.floatValue * zoomChange).coerceIn(minScale, maxScale)
    }
    val scaleFactor = mutableFloatStateOf(1f)
    fun scaledFont(): Density {
        return Density(
            currentDensity.density,
            currentDensity.fontScale * scaleFactor.floatValue
        )
    }
}
ScalableContentSnippets.kt

Paylaşılan demo kullanıcı arayüzü

Bu, farklı ölçeklendirme davranışlarını vurgulamak için önceki iki örnekte de kullanılan paylaşılan DemoCard composable'dır.

@Composable
private fun DemoCard() {
    Card(
        modifier = Modifier
            .width(360.dp)
            .padding(16.dp),
        shape = RoundedCornerShape(12.dp)
    ) {
        Column(
            modifier = Modifier.padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Text("Demo Card", style = MaterialTheme.typography.headlineMedium)
            var isChecked by remember { mutableStateOf(true) }
            Row(verticalAlignment = Alignment.CenterVertically) {
                Text("Demo Switch", Modifier.weight(1f), style = MaterialTheme.typography.bodyLarge)
                Switch(checked = isChecked, onCheckedChange = { isChecked = it })
            }
            Row(verticalAlignment = Alignment.CenterVertically) {
                Icon(Icons.Filled.Person, "Icon", Modifier.size(32.dp))
                Spacer(Modifier.width(8.dp))
                Text("Demo Icon", style = MaterialTheme.typography.bodyLarge)
            }
            Row(
                Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Box(
                    Modifier
                        .width(100.dp)
                        .weight(1f)
                        .height(80.dp)
                        .background(Color.Blue)
                )
                Box(
                    Modifier
                        .width(100.dp)
                        .weight(1f)
                        .height(80.dp)
                        .background(Color.Red)
                )
            }
            Text(
                "Demo Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit," +
                    " sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                style = MaterialTheme.typography.bodyMedium,
                textAlign = TextAlign.Justify
            )
        }
    }
}
ScalableContentSnippets.kt

İpuçları ve dikkat edilmesi gereken noktalar

Daha iyi ve erişilebilir bir deneyim oluşturmak için aşağıdaki önerileri göz önünde bulundurun:

• Hareketle ölçeklendirme kontrolleri dışında seçenekler sunun: Bazı kullanıcılar hareketlerle ilgili sorun yaşayabilir. Bu kullanıcıları desteklemek için ölçeği ayarlamak veya sıfırlamak üzere hareketlere dayanmayan alternatif bir yöntem sunmayı düşünebilirsiniz.
• Tüm ölçeklere uygun geliştirme: Kullanıcı arayüzünüzü hem uygulama içi ölçeklendirmeye hem de sistem genelindeki yazı tipi veya ekran ayarlarına göre test edin. Uygulamanızın düzenlerinin, içerikleri bozmadan, çakıştırmadan veya gizlemeden doğru şekilde uyum sağladığını kontrol edin. Uyarlanabilir düzenler oluşturma hakkında daha fazla bilgi edinin.