User interface & XML Layout

User interface & XML Layout

Oleh : Farah Zakiyah Rahmanti, M.T Diperbarui 2017

[email protected] / Universitas Dian Nuswantoro

Overview 

View Class



UI Component



XML Layout



UI Hierarchy



Layout



Linear Layout



Relative Layout



Grid View



List View


View Class 

Menempati area persegi/rectangular pada layar.



Bertanggung jawab penanganan event.



Base class untuk semua widgets, seperti button, text field,check box, dll.



ViewGroup subclass merupakan base class untuk layout.

untuk


menggambar

dan

Menggunakan Views 

Semua views dalam jendela tersusun atas hierarki pohon.



Terdapat beberapa tipe operasi yang biasa dilakukan :



Set properties : contohnya melakukan seting text dari sebuah TextView.



Properti yang biasa dikenali pada saat build dapat di set ke file XML layout.



Set focus : Framework akan ditangani moving focus dalam menangani input user.



untuk melakukan force focus terhadap view tertentu, maka dapat memanggil requestFocus().



Set up listeners : View mengizinkan client untuk set listener dimana akan diberikan notifikasi ketika sesuatu terjadi.



Contohnya ketika sebuah button diklik, kemudian diberikan sebuah notifikasi bahwa button tersebut sudah diklik.



Set visibility : Kita dapat menyembunyikan atau memperlihatkan views yakni dengan menggunakan setVisibility(int).


UI Component (1) ~ Widgets Date Picker


Form Control : Image Button Text Fields Check Box Radio Button

UI Component (2) ~ Widgets AutoCompleteTextView ListView


UI Component (3) ~ Layouts


XML Layout 

XML based format.



Spesifikasi dari berbagai komponen UI dan memiliki hubungan antara satu dengan yang lainnya dan terhadap container-nya.



Berada pada folder resource atau res.



Terletak di dalam android project, res/layout.


XML Layout


XML Layout


XML Layout 

Setiap file XML terdiri atas tree of elements yang menspesifikasikan sebuah layout dari widget dan container-nya yang membentuk sebuah View.



Atribut-atribut dari XML element adalah properti.



Contohnya :



Jika sebuah elemen Button memiliki nilai atribut dari android:textStyle = "bold"



artinya bahwa text yang muncul di button harus diberikan dalam gaya huruf tebal.



XML Layout Definition



Root element butuh mendeklarasikan Android XML namespace :



xmlns:android=http://schemas.android.com/apk/res/android



Karena akan mereferensikan button tersebut ke dalam code java, maka perlu memberikan nama id pada atribut android:id.


XML Layout Definition



android:text



Menginisialisasi text yang ditampilkan pada button face, dalam hal ini string kosong.



android:layout_width dan layout_height



mendefinisikan width dan height dari sebuah button dengan fill parent container, dalam hal ini entire screen


UI Hierarchy




HierarchyViewer menampilkan semua elemen UI pada layar.



Caption teratas adalah TextView, berada pada FrameLayout-nya.



Sama halnya dengan button berada pada FrameLayout-nya.



FrameLayout merupakan bagian dari LinearLayout yang mana me-render semua elemen dari PhoneWindowView

Android Layout 

The most common way to define your layout and express the view hierarchy is with an XML layout file.



XML offers a human-readable structure for the layout, much like HTML.



Each element in XML is either a View or ViewGroup object


Menampilkan Application’s View 

Android UI framework menggambar layar dengan cara menjalankan View tree dengan meminta setiap komponen menggambar dirinya sendiri dalam pre-order traversal way.



Dengan kata lain, setiap komponen menggambar dirinya sendiri kemudian bertanya kepada setiap anaknya untuk melakukan hal yang sama.



Display UI Hierarchy


Layout Frame, Linear, Relative, List View, Grid View


Frame Layout 

Tipe layout objek yang paling seederhana.



Contohnya :



Pada dasarnya blank space on screen yang kemudian dapat diisi dengan single object. Seperti sebuah gambar yang dapat di-swap in dan swap out.


Linear Layout 

Layout yang menampilkan semua anaknya dalam satu arah.



Bisa vertikal saja atau horizontal saja.



Contoh Linear Layout


Relative Layout 

Layout yang menampilkan semua anaknya (child) dalam posisi relatif.



Bisa relatif terhadap saudaranya (sibling), bisa juga relatif terhadap orangtuanya (parent).


Contoh Relative Layout


Contoh Relative Layout


List View Layout 

Menampilkan semua list item ke bawah, sehingga bisa di scroll.



List item otomatis dimasukkan ke dalam list menggunakan Adapter.


Contoh List View


Grid View Layout 

Menampilkan item-item dalam dua dimensi (terdiri dari baris dan kolom).



Gridnya dapat di-scroll ke bawah/ke atas.



Grid item biasanya otomatis dimasukkan ke dalam layout menggunakan ListAdapter.


Contoh Grid View


Daftar Pustaka 

http://developer.android.com/reference/android/text/ Layout.html



http://developer.android.com/guide/topics/ui/layout/l inear.html


Tugas Praktek 

Membuat sebuah tampilan aplikasi dengan menggunakan salah satu layout :



Linear



Relative



List View



Grid View


Contoh


Terima Kasih


User interface & XML Layout

Recommend Documents