Menampilkan gambar yang dipangkas ke bentuk

Anda dapat menyesuaikan gambar dengan bentuk yang dipangkas, dan menggambar bayangan di sekitar perimeter bentuk untuk memberikan kesan tiga dimensi. Teknik ini berguna untuk membuat desain seperti avatar dan thumbnail produk, atau menampilkan logo dengan bentuk kustom.

Untuk menampilkan gambar yang dipangkas ke bentuk, Anda harus melakukan hal berikut:

  • Buat bentuk.
  • Pangkas gambar ke bentuk.

Hasil

Anjing dalam heksagon dengan bayangan yang diterapkan di sekitar tepinya
Gambar 1. Bentuk kustom diterapkan sebagai klip.

Kompatibilitas versi

Implementasi ini mengharuskan minSDK project Anda ditetapkan ke level API 21 atau yang lebih tinggi.

Dependensi

Membuat bentuk

Kode berikut membuat bentuk kustom yang dapat menggambar dan merender poligon bulat secara dinamis:

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)
    }
}

Poin-poin penting tentang kode

  • RoundedPolygon.getBounds() menentukan fungsi ekstensi pada class RoundedPolygon untuk menghitung batasnya.
  • Class RoundedPolygonShape mengimplementasikan antarmuka Shape, yang memungkinkan Anda menentukan bentuk kustom (poligon bulat) di Jetpack Compose.
  • Bentuk menggunakan Matrix untuk mengelola operasi penskalaan dan terjemahan untuk rendering yang fleksibel.
  • Fungsi createOutline() mengambil objek RoundedPolygon, menskalakan dan menerjemahkannya agar sesuai dengan ukuran yang diberikan, serta menampilkan objek Outline yang menjelaskan bentuk akhir yang akan digambar.

Memangkas gambar ke bentuk

Kode berikut memangkas gambar ke segi enam, dan menambahkan bayangan jatuh yang halus untuk memberikan kesan kedalaman:

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)
    )
}

Poin-poin penting tentang kode

  • Objek RoundedPolygon dan RoundedPolygonShape digunakan untuk menentukan dan menerapkan bentuk segi enam ke gambar.
  • Kode ini menggunakan graphicsLayer untuk menambahkan bayangan berbasis elevasi ke gambar. Hal ini menciptakan kesan kedalaman dan pemisahan visual dari latar belakang.
  • Penggunaan blok remember mengoptimalkan performa dengan memastikan bahwa definisi bentuk dan pemangkasan hanya dihitung satu kali dan diingat untuk komposisi ulang UI berikutnya.

Koleksi yang berisi panduan ini

Panduan ini adalah bagian dari koleksi Panduan Singkat pilihan yang mencakup sasaran pengembangan Android yang lebih luas:

Temukan teknik menggunakan visual yang cerah dan menarik untuk memberikan tampilan dan nuansa yang indah pada aplikasi Android Anda.
Koleksi panduan singkat

Ada pertanyaan atau masukan

Buka halaman pertanyaan umum dan pelajari panduan singkat atau hubungi kami dan sampaikan pendapat Anda.
Buka FAQ Berikan masukan