Bir şekle kırpılmış resim gösterme

Resmi kırpılmış bir şekle sığdırabilir ve şeklin çevresine üç boyutlu bir görünüm kazandırmak için gölgeler çizebilirsiniz. Bu teknik, avatarlar ve ürün küçük resimleri gibi tasarımlar oluşturmak veya özel şekillere sahip logoları göstermek için kullanışlıdır.

Bir şekle kırpılmış resmi görüntülemek için aşağıdakileri yapmanız gerekir:

  • Şekli oluşturun.
  • Resmi şekle kırpın.

Sonuçlar

Kenarlarına gölge uygulanmış altıgen içindeki köpek
Şekil 1. Özel şekil, klip olarak uygulandı.

Sürüm uyumluluğu

Bu uygulama, projenizin minSDK'sının API düzeyi 21 veya sonraki sürümlere ayarlanmasını gerektirir.

Bağımlılıklar

Şekil oluşturma

Aşağıdaki kod, yuvarlatılmış bir poligonu dinamik olarak çizebilen ve oluşturabilen özel bir şekil oluşturur:

fun RoundedPolygon.getBounds() = calculateBounds().let { Rect(it[0], it[1], it[2], it[3]) }
class RoundedPolygonShape(
    private val polygon: RoundedPolygon,
    private var matrix: Matrix = Matrix()
) : Shape {
    private var path = Path()
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        path.rewind()
        path = polygon.toPath().asComposePath()
        matrix.reset()
        val bounds = polygon.getBounds()
        val maxDimension = max(bounds.width, bounds.height)
        matrix.scale(size.width / maxDimension, size.height / maxDimension)
        matrix.translate(-bounds.left, -bounds.top)

        path.transform(matrix)
        return Outline.Generic(path)
    }
}

Kodla ilgili önemli noktalar

  • RoundedPolygon.getBounds(), sınırlarını hesaplamak için RoundedPolygon sınıfında bir uzantı işlevi tanımlar.
  • RoundedPolygonShape sınıfı, Shape arayüzünü uygular ve Jetpack Compose'da özel bir şekil (yuvarlak çokgen) tanımlamanıza olanak tanır.
  • Şekil, esnek oluşturma için ölçeklendirme ve çeviri işlemlerini yönetmek üzere Matrix kullanır.
  • createOutline() işlevi, bir RoundedPolygon nesnesi alır, belirli bir boyuta sığacak şekilde ölçeklendirip çevirir ve çizilecek son şekli açıklayan bir Outline nesnesi döndürür.

Resmi bir şekle kırpma

Aşağıdaki kod, resmi altıgen şeklinde kırpar ve derinlik hissi vermek için ince bir gölge ekler:

val hexagon = remember {
    RoundedPolygon(
        6,
        rounding = CornerRounding(0.2f)
    )
}
val clip = remember(hexagon) {
    RoundedPolygonShape(polygon = hexagon)
}
Box(
    modifier = Modifier
        .clip(clip)
        .background(MaterialTheme.colorScheme.secondary)
        .size(200.dp)
) {
    Text(
        "Hello Compose",
        color = MaterialTheme.colorScheme.onSecondary,
        modifier = Modifier.align(Alignment.Center)
    )
}

Kodla ilgili önemli noktalar

  • RoundedPolygon ve RoundedPolygonShape nesneleri, resme altıgen şekli tanımlamak ve uygulamak için kullanılır.
  • Kod, resme yüksekliğe dayalı bir gölge eklemek için graphicsLayer kullanır. Bu, derinlik hissi ve arka plandan görsel ayrım oluşturur.
  • remember bloklarının kullanılması, şekil ve kırpma tanımlarının yalnızca bir kez hesaplanmasını ve daha sonra kullanıcı arayüzünün yeniden oluşturulması için hatırlanmasını sağlayarak performansı optimize eder.

Bu rehberi içeren koleksiyonlar

Bu kılavuz, daha kapsamlı Android geliştirme hedeflerini ele alan aşağıdaki seçilmiş Hızlı Kılavuz koleksiyonlarının bir parçasıdır:

Android uygulamanıza güzel bir görünüm ve tarz kazandırmak için parlak ve ilgi çekici görseller kullanma tekniklerini keşfedin.
Hızlı kılavuz koleksiyonu

Sorularınız veya geri bildiriminiz mi var?

Sık sorulan sorular sayfamıza giderek hızlı kılavuzlar hakkında bilgi edinebilir veya düşüncelerinizi bize iletebilirsiniz.
SSS'ye git Geri bildirim gönder