Material Design Component pada iOS App: Button
Pada tulisan kali ini kita akan mencoba mengimplementasi prinsip-prinsip dari Google Material Design pada aplikasi iOS. Material Design sejak awal merupakan design language yang independen dalam arti tidak terikat pada satu platform saja. Walaupun mungkin untuk saat ini adaptasi material design paling sering kita jumpai pada aplikasi-aplikasi Android dan produk-produk Google tentunya.
Google sendiri telah menyediakan cukup banyak resource untuk memudahkan designer dan developer untuk dapat mengimplementasi Material Design. Bahkan untuk iOS platform sekalipun.
Material Design Component
Tahun lalu Google telah merilis Material Design Component (MDC), yang mana merupakan library yang menampung banyak sekali fungsi untuk memudahkan implementasi material design pada platform Android, iOS dan Web. Dan library ini pun terus di-maintain untuk mengikuti standar Material design.
Dan cukup mudah ternyata untuk bisa menggunakan MDC pada aplikasi iOS kita terlebih lagi jika kita telah menggunakan Cocoapods pada project kita. Cukup dengan menambahkan dependency yang dibutuhkan pada Podfile kita.
pod 'MaterialComponents'Dengan ini kita akan memasukkan semua komponen dari MDC ini ke dalam project, tapi jika hanya ingin menggunakan komponen tertentu saja, misalnya MDCButton kita cukup menambahkan baris berikut ke Podfile:
pod 'MaterialComponents/Buttons'MDCButton
Seperti yang dituliskan pada judul tulisan ini, fokus tulisan pertama ini adalah implementasi Button dengan standar Material Design. Untuk memudahkan kita dalam melakukan hal tersebut, MDC telah menyediakan class MDCButton yang juga merupakan turunan dari UIButton.
Jika setelah memperbaharui Podfile dan melakukan pod install, seharusnya kita sudah bisa menggunakan class-class MDC. Berikut contoh penggunaannya:
let button = MDCButton(type: .custom)
button.setBackgroundColor(.red)
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitle("MDCButton", for: .normal)
self.view.addSubview(button)Kode diatas akan menghasilkan button seperti berikut:
Bisa kita lihat button diatas telah memiliki rounded-corner secara default. MDC juga menyediakan beberapa jenis button.
MDCRaisedButton
Contoh MDCRaisedButton bisa kita lihat pada kode berikut:
let button = MDCRaisedButton(type: .custom)
button.setBackgroundColor(.blue)
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitle("MDCRaisedButton", for: .normal)
self.view.addSubview(button)Hasilnya seperti berikut:
Bisa kita lihat selain rounded-corner, kali ini button yang dihasilkan juga memiliki shadow.
MDCFlatButton
Berikutnya adalah MDCFlatButton
let button = MDCFlatButton(type: .custom)
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitle("MDCFlatButton", for: .normal)
self.view.addSubview(button)Hasilnya seperti berikut
Kali ini, button yang dihasilkan tidak memiliki background.
MDCFloatingButton
Yang terakhir adalah MDCFloatingButton.
let button = MDCFloatingButton(type: .custom)
button.translatesAutoresizingMaskIntoConstraints = false
button.setImage(UIImage(named: "ic_done"), for: .normal)
self.view.addSubview(button)Hasil dari kode di atas adalah sebagai berikut:
Floating Button ini mungkin cukup akrab buat para pengguna produk-produk Google seperti GMail, Inbox, Google+, etc.
Button-button diatas juga hadir dengan animasi bawaan seperti ripple effect ketika di-tap. Contohnya seperti berikut
Demikian tulisan kali ini. Semoga bermanfaat dan bisa berlanjut untuk membahas komponen-komponen yang lain.
Terima Kasih.
