User interface & XML Layout

Transkripsi

1 User interface & XML Layout Oleh : Farah Zakiyah Rahmanti, M.T Diperbarui 2017

2 Overview View Class UI Component XML Layout UI Hierarchy Layout Linear Layout Relative Layout Grid View List View

3 View Class Menempati area persegi/rectangular pada layar. Bertanggung jawab untuk menggambar dan penanganan event. Base class untuk semua widgets, seperti button, text field,check box, dll. ViewGroup subclass merupakan base class untuk layout.

4 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).

5 UI Component (1) ~ Widgets Date Picker Form Control : Image Button Text Fields Check Box Radio Button

6 UI Component (2) ~ Widgets AutoCompleteTextView ListView

7 UI Component (3) ~ Layouts

8 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.

9 XML Layout

10 XML Layout

11 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.

12

13 XML Layout Definition Root element butuh mendeklarasikan Android XML namespace : xmlns:android= Karena akan mereferensikan button tersebut ke dalam code java, maka perlu memberikan nama id pada atribut android:id.

14 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

15 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

16 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

17 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.

18

19 Display UI Hierarchy

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

21 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.

22 Linear Layout Layout yang menampilkan semua anaknya dalam satu arah. Bisa vertikal saja atau horizontal saja.

23

24 Contoh Linear Layout

25 Relative Layout Layout yang menampilkan semua anaknya (child) dalam posisi relatif. Bisa relatif terhadap saudaranya (sibling), bisa juga relatif terhadap orangtuanya (parent).

26 Contoh Relative Layout

27 Contoh Relative Layout

28 List View Layout Menampilkan semua list item ke bawah, sehingga bisa di scroll. List item otomatis dimasukkan ke dalam list menggunakan Adapter.

29 Contoh List View

30 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.

31 Contoh Grid View

32 Daftar Pustaka Layout.html inear.html

33 Tugas Praktek Membuat sebuah tampilan aplikasi dengan menggunakan salah satu layout : Linear Relative List View Grid View

34 Contoh

35 Terima Kasih