Material Design 2.0 memperkenalkan beberapa konsep baru. Salah satunya adalah perhatian khusus pada bentuk geometris elemen antarmuka. Dan ada cara mudah untuk membuat bentuk kustom yang indah. Ini disebut MaterialShapeDrawable. Mari kita lihat betapa bermanfaat dan mudahnya menggunakannya.
Ada beberapa cara untuk menambahkan elemen grafis ke layar aplikasi Android. Yang paling mudah adalah mengimpor bitmap dalam format webp atau png. Pilihan lain adalah menggunakan VectorDrawable, yang memungkinkan Anda untuk meregangkan gambar ke ukuran yang Anda butuhkan. Cara lain untuk menambahkan gambar ke layar adalah dengan menggunakan ShapeDrawable. Yang terakhir adalah cara termudah untuk menambahkan latar belakang sederhana atau bahkan membuat ikon. Gambar yang dibuat dengan ShapeDrawable tidak tergantung pada kerapatan piksel pada layar. Mereka dapat dijelaskan dalam file xml, menjadi bagian dari sumber daya grafis lain (misalnya, StateListDrawable) dan hadir di Android SDK, dimulai dengan API v.1.
Untuk mengubah tampilan gambar, kita bisa mengubah beberapa properti ShapeDrawable: nama gambar, warna isi (atau gradien), dan warna batas gambar. Untuk persegi panjang, Anda juga dapat mengatur jari-jari sudut. Dengan menggunakan properti ini, Anda dapat membuat grafik yang akan digunakan sebagai gambar individual di layar, pembagi, latar belakang tombol, atau untuk tujuan lain apa pun. Jika aplikasi menggunakan API v.21 + dan ShapeDrawable sebagai latar belakang untuk elemen dengan elevasi, maka bayangan di bawah elemen ini juga akan memiliki bentuk yang benar:
ShapeDrawable adalah alat praktis yang hampir selalu melakukan tugasnya dengan baik, tetapi dengan munculnya Material Design 2.0, pengembang membutuhkan sesuatu yang lebih fleksibel. Sistem desain baru mendorong penggunaan berbagai bentuk untuk menekankan makna, kondisi, dan gaya aplikasi individu. Saya menulis di atas bahwa ada beberapa cara untuk melakukan yang diinginkan, tetapi yang paling sederhana tidak lagi relevan. Apakah ini berarti bahwa kita perlu mulai menggunakan grafik vektor dan dengan demikian kehilangan kemampuan untuk "membebaskan" membuat bayangan untuk elemen antarmuka dengan elevasi? Atau apakah layak untuk kembali menggunakan gambar raster dan membuat sumber daya grafis untuk enam kemungkinan kerapatan piksel pada layar? Untungnya, dengan munculnya Material Design 2.0, perpustakaan komponen yang benar-benar baru telah muncul.
Perpustakaan ini dibuat untuk menyatukan penampilan dan perilaku UI Desain Bahan pada semua versi Android dan platform lainnya (ada versi perpustakaan ini untuk iOS, web dan untuk Flutter). Pustaka komponen mengimplementasikan banyak fitur untuk Desain Material baru. Sebagai contoh, ini termasuk komponen BottomAppBar dengan perilaku yang diharapkan. Di antara komponen dan utilitas lain, ada kelas MaterialShapeDrawable. Menurut pendapat saya, ini adalah alat yang diperlukan untuk menyelesaikan tugas-tugas yang diajukan sistem desain baru untuk pengembang.
Meskipun MaterialShapeDrawable masih dianggap eksperimental dalam rilis pustaka 1.0.0, ini dapat digunakan untuk membuat efek keren dalam aplikasi. Di kelas MaterialShapeDrawable, Anda bisa mendeskripsikan bentuk dengan menentukan tampilan sisinya dan masing-masing sudutnya. Properti yang ditentukan ini dapat dikontrol oleh interpolator, yang memungkinkan mereka untuk hidup.
Untuk membuat MaterialShapeDrawable Anda sendiri, Anda bisa menggunakan konstruktor yang Anda harus melewati objek tipe ShapePathModel di parameter. Ini menyimpan informasi tentang masing-masing sisi dan setiap sudut gambar di kelas EdgeTreatment dan CornerTreatment, masing-masing (selalu ada empat sisi dan sudut, tetapi ini tidak mengganggu menggambarkan hampir semua angka dengan bantuan mereka). Anda dapat menentukan deskripsi secara pribadi untuk setiap sisi dan sudut, atau mengaturnya sekaligus untuk seluruh gambar dengan memanggil satu metode.
Sudah ada beberapa deskripsi siap pakai (perawatan) sisi dan sudut di perpustakaan, yang mencakup sebagian besar inovasi mengenai bentuk komponen yang diperkenalkan dalam Material Design 2.0. Sudah ada: RoundedCornerTreatment - untuk sudut bulat, CutCornerTreatment - untuk sudut potong, TriangleEdgeTreatment - untuk memotong atau menambahkan segitiga ke samping. Untuk menunjukkan karya mereka, ada contoh sederhana:
val shapePathModel = ShapePathModel().apply { setAllCorners(CutCornerTreatment(dip(5).toFloat())) setAllEdges(TriangleEdgeTreatment(dip(5).toFloat(), true)) } val backgroundDrawable = MaterialShapeDrawable(shapePathModel).apply { setTint(ContextCompat.getColor(this@MainActivity, R.color.colorPrimary)) paintStyle = Paint.Style.FILL } textView.background = backgroundDrawable
Ini akan terlihat seperti ini:
Tentu saja, Anda cukup membuat deskripsi wajah dan sudut Anda sendiri. Bentuknya selalu diatur untuk elemen kiri atas, dan Drawable akan melakukan operasi rotasi / refleksi untuk mendapatkan bentuk selesai. Ada contoh kecil untuk menunjukkan ini:
class CutoutCornersTreatment(val size: Float) : CornerTreatment() { override fun getCornerPath(angle: Float, interpolation: Float, shapePath: ShapePath) { shapePath.reset(0.0f, size * interpolation) shapePath.lineTo(size * interpolation, size * interpolation) shapePath.lineTo(size * interpolation, 0f) } } class CurvedEdgeTreatment(val size: Float) : EdgeTreatment() { override fun getEdgePath(length: Float, interpolation: Float, shapePath: ShapePath) { shapePath.quadToPoint(length / 2f, size * interpolation, length, 0f) } }
Jika MaterialShapeDrawable ini digunakan sebagai latar belakang, maka hasilnya akan seperti ini:
Paket bottomappbar dari Perpustakaan Komponen Bahan baru memiliki BottomAppBarTopEdgeTreatment. Ini menjelaskan guntingan di BottomAppBar untuk tombol FloatingActionButton. Sisi atasnya dapat dianimasikan tergantung pada posisi dan ukuran tombol. Saya menyarankan Anda untuk membaca kode dari kelas-kelas ini untuk melihat dengan mata kepala Anda sendiri bahwa MaterialShapeDrawable sangat fleksibel untuk digunakan dan hampir semuanya dapat dilakukan dengan itu.
Jika kita berbicara tentang ShapeDrawable yang biasa, ada detail lain yang layak disebut - kemampuan untuk melemparkan bayangan bentuk yang sesuai dengan kontur. Karena Anda sekarang dapat membuat garis bentuk yang sangat tidak biasa menggunakan MaterialShapeDrawable, akan mengecewakan jika tidak membawa bentuk bayangan ke bentuk gambar, terutama ketika bayangan ini dapat dilihat di mana-mana di Matarial Design 2.0. MaterialShapeDrawable juga menghitung penampilan bayangan. Menggunakan properti shadowEnabled, Anda dapat mengaktifkan bayangan, yang persis akan mengikuti garis besar gambar itu sendiri, juga dimungkinkan untuk menentukan jari-jari, ketinggian dan warna bayangan. Kedengarannya terlalu bagus untuk menjadi kenyataan? Sayangnya ya. Jika Anda menggunakan bayangan MaterialShapeDrawable, Anda mendapatkan bayangan normal (digambar oleh metode setShadowLayer () dari kelas Paint, yang dibuat untuk menggambar bayangan pada teks), tetapi dipotong ke perbatasan komponen UI di mana hasilnya ditampilkan:
Perlu diingat bahwa MaterialShapeDrawable masih dianggap eksperimental, seperti API-nya, dan dapat berubah di masa mendatang. Penting juga dicatat bahwa kode untuk pustaka Komponen Material baru terbuka, jadi membuat tiket di pelacak bug atau bahkan menarik permintaan dengan memperbaiki masalah yang diketahui sangat disambut. Bahkan, ketika Anda membaca baris-baris ini, API sudah sedikit berbeda di cabang utama perpustakaan (misalnya, ShapeAppearanceModel akan digunakan sebagai ganti ShapePathModel), yang menunjukkan pekerjaan aktif. Salah satu fitur yang menjanjikan dalam rilis berikutnya mungkin adalah kemampuan untuk menentukan sisi / sudut default untuk keseluruhan tema aplikasi. Anda dapat mempelajari lebih lanjut tentang ini dari dokumentasi resmi atau sumber perpustakaan.
Dari penerjemah:
Sangat keren bahwa ada alat yang menambahkan fitur baru ke ShapeDrawable yang biasa dan membantu untuk membuat bukan grafik yang paling sederhana. Hal ini memungkinkan pengembang untuk tidak menarik desainer untuk setiap hal kecil, tetapi untuk menyelesaikan masalah sendiri, dan membutuhkan waktu yang jauh lebih sedikit. Kami sedang menunggu versi berikutnya dari pustaka Komponen Material untuk mencoba dalam praktiknya cara-cara baru untuk menyelesaikan masalah yang ada.