Halaman ini diterjemahkan oleh Cloud Translation API.

Menampilkan gambar yang dipangkas ke bentuk

Anda dapat menyesuaikan gambar dengan bentuk yang dipangkas, dan menggambar bayangan di sekeliling perimeter bentuk untuk memberikan nuansa 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.
Potong gambar ke bentuk.

Kompatibilitas versi

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

Dependensi

Membuat bentuk

Kode berikut membuat bentuk kustom yang dapat menggambar dan merender poligon membulat 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)
    }
}ShapesSnippets.kt

Poin-poin penting tentang kode

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

Memotong gambar ke bentuk

Kode berikut memangkas gambar menjadi segi enam, dan menambahkan bayangan drop 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)
    )
}ShapesSnippets.kt

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 rekomposisi UI di lain waktu.

Hasil

Anjing dalam bentuk segi enam dengan bayangan yang diterapkan di sekitar tepi — **Gambar 1.** Bentuk kustom diterapkan sebagai klip.

Koleksi yang berisi panduan ini

Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas sasaran pengembangan Android yang lebih luas: