Latihan Memanfaatkan Style dan Layout Grid

Pada latihan ini, Anda akan mengetahui cara untuk memanfaatkan Style untuk property yang sering digunakan dan mengetahui manfaat layout grid untuk membuat desain yang rapi dan terstruktur.

Pada bagian awal menu, terdapat header teks dengan judul Menu Favorit. Jika Anda menggunakan Text Tool (T), ia akan membuat teks dengan konfigurasi teks terakhir seperti ini:
Nah, di sini kita akan menyimpan pengaturan style pada teks “Mau ngopi apa hari ini?” dan menerapkannya pada teks “Menu Favorit”. Berikut urutan langkahnya:
- Pilih teks yang ingin dijadikan style.
- Klik ikon titik empat pada samping properti Text.
- Klik ikon tambah (+).
- Beri nama style, sebagai contoh namanya adalah “HeaderText”.
  
  Kemudian untuk menggunakan Style tersebut, cukup pilih teks → klik ikon titik empat → pilih style “HeaderText”.
Anda juga dapat mengubah style yang sudah disimpan dengan menekan ikon “Edit Style” pada nama Style seperti berikut:

Ketika style diubah, keseluruhan teks yang menerapkan style tersebut juga akan berubah. Tentu ini akan memudahkan Anda ketika terjadi perubahan desain atau font yang digunakan. Keren, bukan?Bukan hanya itu saja, dengan menggunakan tipografi yang konsisten, aplikasi akan terlihat menyatu dan terhubung satu sama lain. Ini merupakan salah satu prinsip dari desain visual, yakni Unity. Jika Anda ingin melepaskan style pada suatu teks, tekan ikon “Detach style” pada sebelah kanan properti seperti ini:
Selain membuat Style pada Text, Anda juga bisa melakukan hal yang sama pada pengaturan Fill (Color), Stroke, dan Effects. Sebagai contoh, berikut adalah Color Style dengan nama MainTextColor yang diambil dari teks “Mau ngopi apa hari ini” yang bernilai 1D232E dan diimplementasikan di teks “Menu Favorit”.
Seperti yang sudah dijelaskan pada materi, selain Grid untuk menambahkan garis bantu berupa kotak-kotak, juga terdapat Layout Grid untuk menambahkan garis bantu berupa kolom atau baris. Caranya, klik ikon tambah (+) pada properti Layout grid → klik ikon Grid → ganti Grid menjadi Columns pada pojok kiri atas → ubah count menjadi 2, margin menjadi 16, dan Gutter menjadi 16 sesuai dengan panduan dari Material Design.
Dengan menggunakan dua kolom ini, Anda dapat membuat daftar menu dengan lebih presisi seperti berikut:

Simak detail properti untuk setiap komponen tersebut di bawah ini:
- Margin gambar ke teks header : 12.
- Gambar : size 156x156, corner radius 8.
- Teks Judul : Inter Bold, size 14, line height : 20, warna 1D232E (MainTextColor).
- Teks Harga : Inter Medium, size 10, line height : 20, warna 1D232E (MainTextColor).
  Perhatikan di sini kita menggunakan ukuran dan ketebalan yang berbeda untuk menunjukkan Hierarchy seperti yang sudah kita pelajari sebelumnya.
Sama seperti sebelumnya, terapkan Auto Layout (Shift+A) supaya ketika teks judul lebih dari satu baris, Anda tidak perlu mengaturnya lagi. Semuanya akan diatur secara otomatis oleh Auto Layout. Anda juga dapat mengatur jarak antar elemen di dalamnya menjadi lebih mudah.
Karena desain daftar menu ini akan digunakan berulang kali, kira-kira apa yang harus dilakukan selanjutnya? Ya, betul! Kita akan membuatnya menjadi Components (Ctrl+Alt+K). Setelah selesai membuat Components, buat instance untuk menu kedua menggunakan Alt+Drag.
Untuk memastikan setiap komponen tertata teratur, gabungkan kedua Component tersebut dengan menggunakan Auto Layout (Shift+A). Kemudian Duplicate (Alt+Drag) dan buat Auto Layout (Shift+A) kembali seperti ini:

Sehingga, hasil akhir pada layer terlihat seperti ini:

Di sini Anda juga dapat melihat ikon Auto Layout yang menyesuaikan dengan orientasinya, ada yang horizontal dan vertikal.
Langkah terakhir pada bagian ini yaitu menyesuaikan teks dan gambar sesuai yang sudah dipelajari sebelumnya seperti ini: