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) } }
Poin-poin penting tentang kode
RoundedPolygon.getBounds()
menentukan fungsi ekstensi pada classRoundedPolygon
untuk menghitung batasnya.- Class
RoundedPolygonShape
mengimplementasikan antarmukaShape
, 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 objekRoundedPolygon
, menskalakan dan menerjemahkannya agar sesuai dengan ukuran tertentu, dan menampilkan objekOutline
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) ) }
Poin-poin penting tentang kode
- Objek
RoundedPolygon
danRoundedPolygonShape
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](https://developer.android.google.cn/static/develop/ui/compose/images/graphics/shapes/clip_with_shadow.png?hl=id)
Koleksi yang berisi panduan ini
Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas sasaran pengembangan Android yang lebih luas:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=id)