Anda dapat menggabungkan atau menempatkan gambar sumber untuk menampilkan gambar berlapis di kanvas. Misalnya, Anda dapat mereplikasi cara Android Framework membuat ikon aplikasi dengan menggabungkan drawable latar belakang dan latar depan yang terpisah. Untuk menampilkan gambar berlapis, Anda harus melakukan hal berikut:
- Membuat lapisan gambar di kanvas.
- Tumpang-tindih sumber.
Kompatibilitas versi
Implementasi ini mengharuskan minSDK project Anda ditetapkan ke API level 21 atau yang lebih tinggi.
Dependensi
Membuat lapisan gambar di kanvas
Kode berikut menempatkan dua gambar sumber di atas satu sama lain, yang merender gambar gabungan di kanvas:
class OverlayImagePainter constructor( private val image: ImageBitmap, private val imageOverlay: ImageBitmap, private val srcOffset: IntOffset = IntOffset.Zero, private val srcSize: IntSize = IntSize(image.width, image.height), private val overlaySize: IntSize = IntSize(imageOverlay.width, imageOverlay.height) ) : Painter() { private val size: IntSize = validateSize(srcOffset, srcSize) override fun DrawScope.onDraw() { // draw the first image without any blend mode drawImage( image, srcOffset, srcSize, dstSize = IntSize( this@onDraw.size.width.roundToInt(), this@onDraw.size.height.roundToInt() ) ) // draw the second image with an Overlay blend mode to blend the two together drawImage( imageOverlay, srcOffset, overlaySize, dstSize = IntSize( this@onDraw.size.width.roundToInt(), this@onDraw.size.height.roundToInt() ), blendMode = BlendMode.Overlay ) } /** * Return the dimension of the underlying [ImageBitmap] as it's intrinsic width and height */ override val intrinsicSize: Size get() = size.toSize() private fun validateSize(srcOffset: IntOffset, srcSize: IntSize): IntSize { require( srcOffset.x >= 0 && srcOffset.y >= 0 && srcSize.width >= 0 && srcSize.height >= 0 && srcSize.width <= image.width && srcSize.height <= image.height ) return srcSize } }
Poin-poin penting tentang kode
- Menggunakan
OverlayImagePainter
, yang merupakan implementasiPainter
kustom yang dapat Anda gunakan untuk menempatkan gambar di atas gambar sumber. Mode gabungan mengontrol cara gambar digabungkan. Gambar pertama tidak menimpa apa pun, sehingga tidak diperlukan mode gabungan. Mode gabunganOverlay
dari gambar kedua menimpa area gambar pertama yang tercakup oleh gambar kedua. DrawScope.onDraw()
diganti dan kedua gambar ditempatkan dalam fungsi ini.intrinsicSize
diganti untuk melaporkan ukuran intrinsik gambar gabungan dengan benar.
Gambar sumber overlay
Dengan Painter
painter kustom ini, Anda dapat menempatkan gambar di atas
gambar sumber sebagai berikut:
val rainbowImage = ImageBitmap.imageResource(id = R.drawable.rainbow) val dogImage = ImageBitmap.imageResource(id = R.drawable.dog) val customPainter = remember { OverlayImagePainter(dogImage, rainbowImage) } Image( painter = customPainter, contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier.wrapContentSize() )
Poin-poin penting tentang kode
- Setiap gambar yang akan digabungkan dimuat sebagai instance
ImageBitmap
sebelum digabungkan menggunakanOverlayImagePainter
. - Gambar gabungan dirender oleh composable
Image
yang menggunakan painter kustom untuk menggabungkan gambar sumber saat merender.
Hasil
Koleksi yang berisi panduan ini
Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas sasaran pengembangan Android yang lebih luas: