Compose'da bulanıklaştırma

Bulanıklaştırma efektleri, görsel ayrıntıları yumuşatır, fotoğrafik alan derinliği oluşturur ve ön plandaki kullanıcı arayüzü öğelerine odaklanmayı sağlar. Jetpack Compose'da, resimler, şekiller, metinler ve düzen kapsayıcıları dahil olmak üzere bir composable'ın içine çizilen içeriği bulanıklaştırmak için Modifier.blur kullanın. Modifier.blur uygulandığında, composable ayrı bir grafik katmanında oluşturulur.

Sol: Orijinal resim. Ortada: Tüm yüzeye tek tip bulanıklık uygulanmış resim. Sağda: Üst kısmı net olan ve aşağıya doğru artan aşamalı bulanıklığa sahip resim.
Şekil 1. Sol: Orijinal resim. Ortada: Tüm yüzeye tek tip bulanıklık uygulanmış resim. Sağda: Üst kısmı net olan ve aşağıya doğru bulanıklığı artan resim.

Tasarım hedeflerinize bağlı olarak bulanıklığı iki şekilde değiştirebilirsiniz:

  • Tek tip bulanıklık: Birleştirilebilir öğenin tamamına her iki eksende eşit olarak veya bağımsız yatay ve dikey yarıçaplarla (radiusX, radiusY) sabit bir bulanıklık yarıçapı uygular.
  • Kademeli bulanıklaştırma: BlurRadiusSpec gradyanları veya özel bir Shader kullanarak bulanıklaştırma yarıçapını composable genelinde mekansal olarak değiştirir.

Tek tip bulanıklaştırma uygulama

başlıklı makaleyi inceleyin.

Bir composable'ın tamamına sabit bir bulanıklık uygulamak için Modifier.blur öğesine Dp yarıçapı iletin. İçeriği hem yatay (X) hem de dikey (Y) eksenlerde eşit olarak bulanıklaştırmak için tek bir radius değeri iletin:

@Composable
fun UniformBlurExample() {
    Image(
        painter = painterResource(id = R.drawable.dog),
        contentDescription = stringResource(id = R.string.dog_content_description),
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .size(150.dp)
            .blur(
                radius = 8.dp,
                edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp)),
            ),
    )
}

Hem yatay hem de dikey eksenlerde eşit şekilde bulanıklaştırılmış bir köpek.
Şekil 2. Hem yatay hem de dikey eksenlerde eşit şekilde bulanıklaştırılmış bir köpek.

Yönlü hareket bulanıklığı efekti oluşturmak için Modifier.blur öğesine ayrı radiusX ve radiusY değerleri iletin. Bulanıklaştırma efektinin uygulanması için hem radiusX hem de radiusY, 0.dp değerinden büyük olmalıdır. Aşağıdaki örnekte bu durum gösterilmektedir:

@Composable
fun DirectionalBlurExample() {
    Image(
        painter = painterResource(id = R.drawable.dog),
        contentDescription = stringResource(id = R.string.dog_content_description),
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .size(150.dp)
            .blur(
                radiusX = 10.dp,
                radiusY = 2.dp,
                edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp)),
            ),
    )
}

Yatay hareket bulanıklığı efekti uygulanmış bir köpek.
Şekil 3. Güçlü bir yatay hareket bulanıklığı efekti uygulanmış bir köpeğin kare resmi.

Kademeli bulanıklaştırma uygulama

Kademeli bulanıklaştırma, bir composable'ın bulanıklaştırma yarıçapını değiştirerek keskin ve bulanık bölgeler arasında yumuşak bir geçiş oluşturur.

Modifier.blur için BlurRadiusSpec iletin. Örneğin, aşağıdaki örnekte gösterildiği gibi, bir resmin üst kısmını keskin tutarken alt kısmına doğru kademeli olarak bulanıklaştırmak için BlurRadiusSpec.verticalGradient ile startRadius = 0.dp ve endRadius = 6.dp kullanın:

@Composable
fun ProgressiveBlurExample() {
    Image(
        painter = painterResource(id = R.drawable.dog),
        contentDescription = stringResource(id = R.string.dog_content_description),
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .size(150.dp)
            .blur(
                // Sharp at the top (0.dp), progressively blurred toward the bottom (6.dp)
                blurRadiusSpec = BlurRadiusSpec.verticalGradient(
                    startRadius = 0.dp,
                    endRadius = 6.dp,
                ),
                edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp)),
            ),
    )
}

Üst kısmı net, alt kısmı ise kademeli olarak bulanıklaşan bir köpek.
Şekil 4. Üst kısmı net, alt kısmı ise kademeli olarak bulanıklaşan bir köpek resmi.

BlurRadiusSpec ile bulanıklaştırma gradyanlarını belirtme

BlurRadiusSpec uygulamasında ölçümler Dp olarak ayarlanır ve çizildiğinde katmanın boyutuna ve görüntü yoğunluğuna otomatik olarak uyarlanır. Mekansal olarak değişen bulanıklıklar, dönüştürüldükten sonra 150 pikselle sınırlanır. BlurRadiusSpec.uniform ise sınırlanmaz.

Aşağıdaki tabloda, BlurRadiusSpec üzerinde kullanılabilen fabrika işlevleri listelenmiştir:

BlurRadiusSpec fabrika Açıklama
BlurRadiusSpec.verticalGradient Katman genelinde bulanıklık yarıçapını yukarıdan (0f) aşağıya (1f) doğru dikey olarak sorunsuz bir şekilde değiştirir.
BlurRadiusSpec.horizontalGradient Bulanıklık yarıçapını sol kenardan (0f) sağ kenara (1f) doğru yatay olarak sorunsuz bir şekilde değiştirir.
BlurRadiusSpec.linearGradient Belirli DpOffset koordinatlarını birleştiren düz bir çizgi boyunca yönlü bulanıklaştırma geçişi uygular.
BlurRadiusSpec.radialGradient Bulanıklığı bir odak noktasından fallOffRadius sınırına doğru yayar.
BlurRadiusSpec.uniform Katmanın tamamına eşit bir bulanıklık yarıçapı uygular.
BlurRadiusSpec.shader Her pikselde maxRadius değerini kontrol etmek ve ölçeklendirmek için özel bir Shader alfa kanalı kullanır.

BlurStop ile bulanıklık dağılımını özelleştirme

Standart gradyan bulanıklıklar, 0f ile 1f arasında doğrusal olarak interpolasyon yapar. Bulanıklığın bir yüzeydeki dağılımını özelleştirmek için (ör. birden fazla kenarı bulanıklaştırma veya orta bölümü tamamen keskin tutma) verticalGradient, horizontalGradient, linearGradient veya radialGradient öğesine 2 ila 16 BlurStop girişi içeren bir List<BlurStop> iletin. Her BlurStop girişi için aşağıdakileri tanımlayın:

  • fraction: 0.0f ile 1.0f arasındaki gradyan boyunca göreli konum. Duraklar otomatik olarak kesre göre sıralanır.
  • radius: Dp cinsinden, ilgili kesir konumunda uygulanan bulanıklık yarıçapı.

Örneğin, dört nokta, aşağıdaki örnekte gösterildiği gibi, ortayı tamamen keskin tutarken bir görüntünün üst ve alt kenarlarını bulanıklaştırır:

@Composable
fun MultiStopBlurExample() {
    Image(
        painter = painterResource(id = R.drawable.dog),
        contentDescription = stringResource(id = R.string.dog_content_description),
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .size(150.dp)
            .blur(
                // Blurred at the top and bottom edges, sharp in the middle (0.3f..0.7f)
                blurRadiusSpec = BlurRadiusSpec.verticalGradient(
                    stops = listOf(
                        BlurStop(fraction = 0.0f, radius = 20.dp),
                        BlurStop(fraction = 0.3f, radius = 0.dp),
                        BlurStop(fraction = 0.7f, radius = 0.dp),
                        BlurStop(fraction = 1.0f, radius = 20.dp),
                    ),
                ),
                edgeTreatment = BlurredEdgeTreatment.Unbounded,
            ),
    )
}

Üst ve alt kenarları bulanıklaştırılmış, ortadaki yatay şeridi net bir şekilde odaklanmış bir köpek.
Şekil 5. Üst ve alt kenarları bulanıklaştırılmış, ortadaki yatay şeridi ise keskin bir şekilde odaklanmış bir köpek resmi.

BlurScope ile katman özelliklerini yapılandırma

blurRadiusSpec değerini doğrudan iletmek yerine Modifier.blur { ... } değerine bir yapılandırma bloğu iletebilirsiniz. Bu blok, BlurScope içinde çalışır. Bu sayede, düzen yoğunluğuna ve aşağıdaki özelliklere doğrudan erişebilirsiniz:

  • size: DpSize: Dp cinsinden bulanıklaştırılmış katmanın ölçülen genişliği ve yüksekliği. Bu, gradyan geometrisi için koordinat alanını tanımlar.
  • blurRadiusSpec: BlurRadiusSpec: Yüzeydeki bulanıklık yarıçapı yapılandırması. Varsayılan değer BlurRadiusSpec.uniform(0.dp) (bulanıklaştırma yok) şeklindedir.
  • edgeTreatment: BlurredEdgeTreatment: İçerik sınırlarının dışındaki pikselleri örneklemek ve kırpmak için kullanılan strateji. Varsayılan değer: BlurredEdgeTreatment.Rectangle.
  • alpha: Float: 0f..1f aralığında bulanıklaştırılmış katmanın opaklığı. Varsayılan değer: 1f.

BlurScope bloğu, ölçüm ve düzenden sonra grafik katmanı aşamasında çalıştığı için yeniden oluşturmayı tetiklemeden size üzerinden gradyan geometrisini hesaplayabilirsiniz.

BlurredEdgeTreatment ile kenar kırpmayı kontrol etme

Bulanıklaştırma, bulanıklaştırma yarıçapı içindeki komşu pikselleri örneklediğinden bulanıklaştırılmış çıkış, bulanıklaştırma yarıçapı kadar özgün içerik sınırlarının dışına taşar. BlurredEdgeTreatment, orijinal sınırların dışındaki piksellerin nasıl örnekleneceğini ve sonucun bir şekle kırpılıp kırpılmayacağını belirler.

BlurredEdgeTreatment, hem tek tip hem de aşamalı bulanıklaştırmalarla çalışır:

BlurredEdgeTreatment Davranış Çıkış
BlurredEdgeTreatment.Rectangle (varsayılan) Bulanıklaştırma sonucunu özgün içeriğin dikdörtgen sınırlarına göre kırpar ve en yakın kenar piksellerini (TileMode.Clamp) örnekler. Keskin dikdörtgen bir sınırla kırpılmış bulanık bir köpek resmi.
BlurredEdgeTreatment(shape) Bulanıklaştırma sonucunu belirtilen Shape (ör. RoundedCornerShape(8.dp)) ile kırpar ve en yakın kenar piksellerini (TileMode.Clamp) örnekler. Bulanıklaştırma sonucunu, orijinal sınırların dışına taşmadan şekil sınırında keskin tutar. Keskin kenarlı, yuvarlak köşeli bir şekle kırpılmış bulanık bir köpek resmi.
BlurredEdgeTreatment.Unbounded Bulanıklaştırma sonucunu (TileMode.Decal) kırpmaz. İçerik sınırlarının dışındaki pikseller şeffaf siyahı örnekleyerek resmin dış kenarlarının orijinal sınırların ötesinde belirsiz ve bulanık görünmesine neden olur. Kenarları orijinal sınırların ötesine yumuşak bir şekilde solan bulanık bir köpek resmi.

Bu API'lerin, kaydırılan içeriğin kenarlarını soldurma, odak noktasını vurgulama veya özel bir gölgelendiriciyle bulanıklığı maskeleme gibi eksiksiz kullanıcı arayüzü kalıplarında nasıl birleştirildiğini görmek için Yaygın bulanıklaştırma kullanım alanları başlıklı makaleyi inceleyin.

Sonraki
Yaygın kullanım alanları