Android - Desain UI

Pada bab ini kita akan melihat berbagai komponen UI layar android. Bab ini juga membahas tips membuat desain UI yang lebih baik dan juga menjelaskan cara mendesain UI.

Komponen layar UI

Antarmuka pengguna umum aplikasi android terdiri dari bilah tindakan dan area konten aplikasi.

Bilah Tindakan Utama
Lihat Kontrol
Area Konten
Pisahkan Bilah Tindakan

Komponen-komponen ini juga telah ditunjukkan pada gambar di bawah ini -

Memahami Komponen Layar

Unit dasar aplikasi android adalah aktivitas. UI didefinisikan dalam file xml. Selama kompilasi, setiap elemen dalam XML dikompilasi menjadi kelas GUI Android yang setara dengan atribut yang diwakili oleh metode.

View dan ViewGroups

Suatu kegiatan terdiri dari pandangan. Tampilan hanyalah sebuah widget yang muncul di layar. Bisa berupa tombol, dll. Satu atau lebih tampilan dapat dikelompokkan menjadi satu GroupView. Contoh ViewGroup mencakup tata letak.

Jenis tata letak

Ada banyak jenis tata letak. Beberapa di antaranya tercantum di bawah -

Tata Letak Linear
Tata Letak Mutlak
Tata Letak Tabel
Tata Letak Bingkai
Tata Letak Relatif

Tata Letak Linear

Tata letak linier selanjutnya dibagi menjadi tata letak horizontal dan vertikal. Artinya dapat mengatur tampilan dalam satu kolom atau dalam satu baris. Berikut adalah kode tata letak linier (vertikal) yang menyertakan tampilan teks.

<?xml version=”1.0” encoding=”utf-8”?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   android:orientation=”vertical” >
   
   <TextView
      android:layout_width=”fill_parent”
      android:layout_height=”wrap_content”
      android:text=”@string/hello” />
</LinearLayout>

AbsoluteLayout

AbsoluteLayout memungkinkan Anda menentukan lokasi persis turunannya. Itu bisa dideklarasikan seperti ini.

<AbsoluteLayout
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
   
   <Button
      android:layout_width=”188dp”
      android:layout_height=”wrap_content”
      android:text=”Button”
      android:layout_x=”126px”
      android:layout_y=”361px” />
</AbsoluteLayout>

TableLayout

TableLayout mengelompokkan tampilan menjadi baris dan kolom. Itu bisa dideklarasikan seperti ini.

<TableLayout
   xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_height=”fill_parent”
   android:layout_width=”fill_parent” >
   
   <TableRow>
      <TextView
         android:text=”User Name:”
         android:width =”120dp”
         />
      
      <EditText
         android:id=”@+id/txtUserName”
         android:width=”200dp” />
   </TableRow>
   
</TableLayout>

RelativeLayout

RelativeLayout memungkinkan Anda untuk menentukan bagaimana tampilan anak diposisikan relatif terhadap satu sama lain. Dapat dideklarasikan seperti ini.

<RelativeLayout
   android:id=”@+id/RLayout”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
</RelativeLayout>

FrameLayout

FrameLayout adalah placeholder di layar yang bisa Anda gunakan untuk menampilkan tampilan tunggal. Itu bisa dideklarasikan seperti ini.

<?xml version=”1.0” encoding=”utf-8”?>
<FrameLayout
   android:layout_width=”wrap_content”
   android:layout_height=”wrap_content”
   android:layout_alignLeft=”@+id/lblComments”
   android:layout_below=”@+id/lblComments”
   android:layout_centerHorizontal=”true” >
   
   <ImageView
      android:src = “@drawable/droid”
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content” />
</FrameLayout>

Selain atribut ini, ada atribut lain yang sama di semua tampilan dan ViewGroups. Mereka tercantum di bawah ini -

Sr Tidak	Lihat & deskripsi
1	layout_width Menentukan lebar View atau ViewGroup
2	layout_height Menentukan tinggi View atau ViewGroup
3	layout_marginTop Menentukan ruang ekstra di sisi atas View atau ViewGroup
4	layout_marginBottom Menentukan ruang ekstra di sisi bawah View atau ViewGroup
5	layout_marginLeft Menentukan ruang ekstra di sisi kiri View atau ViewGroup
6	layout_marginRight Menentukan ruang ekstra di sisi kanan View atau ViewGroup
7	layout_gravity Menentukan bagaimana View anak diposisikan
8	layout_weight Menentukan berapa banyak ruang ekstra dalam layout yang harus dialokasikan ke View

Satuan pengukuran

Saat Anda menentukan ukuran elemen di UI Android, Anda harus mengingat unit pengukuran berikut.

Sr Tidak	Unit & deskripsi
1	dp Pixel yang tidak tergantung kepadatan. 1 dp setara dengan satu piksel pada layar 160 dpi.
2	sp Piksel tanpa skala. Ini mirip dengan dp dan direkomendasikan untuk menentukan ukuran font
3	pt Titik. Sebuah titik didefinisikan sebagai 1/72 inci, berdasarkan ukuran layar fisik.
4	px Pixel. Sesuai dengan piksel aktual di layar

Kepadatan Layar

Sr Tidak	Kepadatan & DPI
1	Low density (ldpi) 120 dpi
2	Medium density (mdpi) 160 dpi
3	High density (hdpi) 240 dpi
4	Extra High density (xhdpi) 320 dpi

Mengoptimalkan tata letak

Berikut adalah beberapa pedoman untuk membuat tata letak yang efisien.

Hindari bersarang yang tidak perlu
Hindari menggunakan terlalu banyak Tampilan
Hindari bersarang dalam