Android Studio: Layout Layar

Sumber: https://developer.android.com/guide/topics/ui/declaring-layout.html

Layout mendefinisikan struktur virtual untuk interface user, seperti UI untuk activity atau app widget. Kita dapat mendeklarasikan layout dengan dua cara:

• Deklarasikan elemen UI elements di XML. Android memberikan vocabulary XML yang straightforward XML yang berhubungan dengan class View dan subclass, seperti untuk widget dan layout.
• Inisiasi layout elemen saat runtime. Aplikasi kita dapat menggunakan program membuat objek View dan ViewGroup (dan memanipulasi property-nya).

Framework Android memberikan kita flexibilitas untuk menggunakan ke dua metoda tersebut untuk mendeklarasikan dan memanaje UI aplikasi kita. Contoh, kita dapat mendeklarasikan default layout aplikasi kita di XML, termasuk elemen screen yang akan muncul di dalamnya termasuk property-nya. Kemudian, kita dapat menambahkan code di aplikasi kita yang dapat memodifikasi kondisi screen object, termasuk deklarasi di XML sambil berjalan.

   The ADT Plugin for Eclipse offers a layout preview of your XML — with the XML file opened, select the Layout tab.
   You should also try the Hierarchy Viewer tool, for debugging layouts — it reveals layout property values, draws wireframes with padding/margin indicators, and full rendered views while you debug on the emulator or device.
   The layoutopt tool lets you quickly analyze your layouts and hierarchies for inefficiencies or other problems.

Keuntungan untuk men-deklarasikan UI anda dalam XML adalah bahwa hal itu memungkinkan anda untuk lebih memisahkan penyajian aplikasi anda dari kode yang mengontrol perilakunya. Deskripsi UI anda menjadi eksternal dari kode aplikasi anda, yang berarti bahwa anda dapat mengubah atau beradaptasi tanpa harus memodifikasi kode sumber dan mengkompilasi ulang. Misalnya, anda dapat membuat layout XML untuk orientasi yang berbeda layar, ukuran layar perangkat yang berbeda, dan bahasa yang berbeda. Selain itu, menyatakan tata letak di XML membuatnya lebih mudah untuk memvisualisasikan struktur UI anda, sehingga lebih mudah untuk masalah debug. Dengan demikian, dokumen ini berfokus pada mengajar anda bagaimana untuk menyatakan tata letak Anda dalam XML.

Secara umum, vocabulary XML untuk menyatakan elemen UI erat mengikuti struktur dan penamaan kelas dan metode, di mana nama elemen sesuai dengan nama kelas dan atribut nama sesuai dengan metode. Bahkan, korespondensi sering begitu langsung yang anda bisa menebak atribut XML tertentu sesuai dengan metode kelas, atau menebak kelas yang sesuai dengan elemen XML yang diberikan. Namun, perlu diketahui bahwa tidak semua vocabulary identik. Dalam beberapa kasus, ada perbedaan penamaan sedikit. Misalnya, unsur EditText memiliki atribut teks yang sesuai dengan EditText.setText ().

Tip: Learn more about different layout types in Common Layout Objects. There are also a collection of tutorials on building various layouts in the Hello Views tutorial guide

Visualization of a view hierarchy with layout parameters associated with each view

Menulis XML

Menggunakan vocabulary Android XML , anda dapat dengan cepat merancang layout UI dan elemen layar yang dikandungnya, dengan cara yang sama anda membuat halaman web di HTML - dengan serangkaian elemen nested.

Setiap file layout harus berisi hanya satu elemen root, yang harus sebuah View atau objek ViewGroup. Setelah anda mendefinisikan elemen root, anda dapat menambahkan objek layout tambahan atau widget sebagai elemen anak untuk secara bertahap membangun hirarki View yang mendefinisikan layout anda. Sebagai contoh, berikut adalah layout XML yang menggunakan LinearLayout vertikal untuk menampung TextView dan Button:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Hello, I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, I am a Button" />
</LinearLayout>

Setelah anda menyatakan layout anda dalam XML, simpan file dengan ekstensi .xml, di res / layout / direktori proyek Android anda, sehingga akan dicompilasi dengan benar.

More information about the syntax for a layout XML file is available in the Layout Resources document.

Me-load XML Resource

Ketika anda mengkompilasi aplikasi anda, setiap file layout XML akan dikompilasi ke dalam View resource. Anda harus memuat layout resource dari kode aplikasi anda, di implementasi Activity.onCreate () callback anda. Dengan melakukan hal tersebut, memanggil setContentView (), akan melewatkan referensi untuk layout resource anda dalam bentuk: R.layout.layout_file_name. Contoh, jika tata letak XML anda disimpan sebagai main_layout.xml, anda akan memuatnya untuk kegiatan Anda seperti:

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_layout);
}

OnCreate () metode callback dalam Activity anda dipanggil oleh framework Android saat Activity anda diluncurkan (lihat pembahasan tentang siklus hidup, dalam dokumen Activity).

Attribute

Setiap objek View dan ViewGroup mendukung berbagai atribut XML mereka sendiri. Beberapa atribut yang spesifik untuk objek View (misalnya, TextView mendukung atribut textSize), tetapi sifat-sifat ini juga diwarisi oleh objek View yang dapat memperpanjang kelas ini. Beberapa yang umum untuk semua objek View , karena mereka mewarisi dari kelas root View (seperti atribut id). Dan, atribut lain dianggap "parameter layout," yang merupakan atribut yang menggambarkan orientasi layout tertentu dari objek View, seperti yang didefinisikan oleh objek induk ViewGroup .

ID

Setiap objek View mungkin memiliki ID integer yang terkait dengan-nya, untuk secara unik mengidentifikasi View dalam tree. Ketika aplikasi dikompilasi, ID ini dirujuk sebagai integer, tapi ID ini biasanya diberikan dalam file layout XML sebagai string, dalam atribut id. Ini adalah atribut XML yang umum untuk semua objek View (didefinisikan oleh View kelas) dan anda akan sering menggunakannya. Sintaks untuk ID, dalam sebuah tag XML adalah:

android:id="@+id/my_button"

Simbol (@) pada awal string menunjukkan bahwa parser XML harus mengurai dan memperluas sisa ID string dan mengidentifikasinya sebagai ID resource. Plus-simbol (+) berarti bahwa ini adalah nama resource baru yang harus dibuat dan ditambahkan ke resource (dalam file R.java). Ada sejumlah resource ID lainnya yang ditawarkan oleh framework Android. Ketika me-referensi ID resource Android, anda tidak perlu simbol (+), tetapi harus menambahkan paket namespace android, seperti:

android:id="@android:id/empty"

Dengan paket namespace android di install, kita sekarang dapat me-referensi ID dari android.R resource class, bukan class resource lokal.

Dalam rangka menbuat View dan me-referensi-nya dari aplikasi, pola umum adalah untuk:

• Definisikan view/widget di layout file dan set dengan ID yang unik:

   <Button android:id="@+id/my_button"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@string/my_button_text"/>

• Kemudian buat sebuah instance dari view object dan tangkap hasilnya dari layout (biasanya di onCreate() method):

   Button myButton = (Button) findViewById(R.id.my_button);

Mendefinisikan ID untuk tampilan objek penting saat membuat RelativeLayout. Dalam layout relatif, view sibling (saudara) dapat menentukan layout mereka relatif terhadap view saudara lain, yang direferensikan oleh ID yang unik.

Sebuah ID tidak perlu unik di seluruh tree, tetapi harus unik dalam bagian dari tree yang anda cari (yang sering mungkin seluruh tree, jadi yang terbaik untuk menjadi benar-benar unik bila memungkinkan).

Layout Parameter

Atribut XML layout dengan nama layout_something mendefinisikan parameter layout untuk View yang cocok untuk ViewGroup dimana dia berada.

Setiap class ViewGroup mengimplementasikan nested class sepanjang ViewGroup.LayoutParams. Subclass ini mengandung jenis properti yang menentukan ukuran dan posisi untuk setiap child View, yang sesuai untuk view group. Seperti yang Anda lihat pada gambar, parent view group mendefinisikan parameter layout untuk setiap child View (termasuk child view group).

Visualisasi dari hirarki dengan parameter layout terkait dengan masing-masing view

Perhatikan bahwa setiap LayoutParams subclass memiliki sintaks sendiri untuk menetapkan nilai-nilai. Setiap elemen child harus menentukan LayoutParams yang sesuai untuk induknya, meskipun dapat juga mendefinisikan LayoutParams berbeda untuk child sendiri.

Semua view group memasukan width dan height (layout_width dan layout_height), dan masing-masing view diperlukan untuk mendefinisikan-nya. Banyak LayoutParams juga mencakup opsi margin dan border.

Anda dapat menentukan lebar dan tinggi dengan pengukuran yang tepat, meskipun anda mungkin tidak akan ingin sering-sering melakukan hal ini. Lebih sering, Anda akan menggunakan salah satu dari konstanta berikut untuk mengatur lebar atau tinggi:

• wrap_content memberitahukan view untuk men-set size-nya sesuai dengan content yang ada.
• match_parent (bernama fill_parent sebelum API Level 8) memberitahukan view untuk menjadi sebesar yang diijinkan oleh parent view group.

Secara umum, menentukan lebar dan tinggi layout menggunakan unit mutlak seperti piksel tidak dianjurkan. Sebaliknya, menggunakan pengukuran relatif seperti unit density-independen pixel (dp), wrap_content, atau match_parent, merupakan pendekatan yang lebih baik, karena membantu memastikan bahwa aplikasi Anda akan ditampilkan dengan benar di berbagai ukuran layar perangkat. Jenis pengukuran diterima didefinisikan dalam Available Resource document.

Posisi Layout

Geometri View adalah persegi panjang. View memiliki lokasi, dinyatakan sebagai sepasang koordinat kiri dan atas, dan dua dimensi, dinyatakan sebagai width dan height. Unit untuk lokasi dan dimensi adalah pixel.

Hal ini dimungkinkan untuk mengambil lokasi View dengan menerapkan metode getLeft () dan getTop (). getLeft() akan mengembailkan koordinat kiri, atau X, dari persegi panjang yang mewakili View. Sementara getTop() akan mengembalikan koordinat atas, atau Y, persegi panjang yang mewakili View. Metode ini akan mengembalikan lokasi view relatif terhadap parent-nya. Misalnya, ketika getLeft() mengembalikan 20, yang berarti View terletak 20 piksel di sebelah kanan tepi kiri dari parent langsung-nya.

Selain itu, beberapa metode yang memudahkan ditawarkan untuk menghindari perhitungan yang tidak perlu, yaitu GetRight() dan getBottom(). Metode ini mengembalikan koordinat tepi kanan dan bawah persegi panjang yang mewakili View. Misalnya, memanggil GetRight() mirip dengan perhitungan sebagai berikut: getLeft() + getWidth().

Size, Padding dan Margin

Ukuran View adalah lebar dan tinggi. View memiliki dua pasang nilai width dan height.

Pasangan pertama dikenal sebagai width dan height yang di ukur. Dimensi ini menentukan seberapa besar View ingin berada dalam parent-nya. Dimensi yang diukur dapat diperoleh dengan memanggil getMeasuredWidth() dan getMeasuredHeight().

Pasangan kedua hanya dikenal sebagai width dan height, atau kadang-kadang drawing width dan height. Dimensi ini menentukan ukuran sebenarnya dari view di layar, pada saat menggambar dan setelah layput. Nilai-nilai ini mungkin, tapi tidak harus, berbeda dari width dan height yang terukur. Width dan hight dapat diperoleh dengan memanggil getWidth () dan getHeight ().

Untuk mengukur dimensinya, sebuah View akan memperhitungkan padding nya. Padding dinyatakan dalam piksel untuk bagian kiri, atas, kanan dan bawah dari View. Padding dapat digunakan untuk mengimbangi isi tampilan dengan jumlah piksel tertentu. Misalnya, padding kiri 2 akan mendorong konten pandangan oleh 2 pixel di sebelah kanan tepi kiri. Padding dapat diatur menggunakan metode setPadding (int, int, int, int) dan diqueri dengan memanggil getPaddingLeft(), getPaddingTop(), getPaddingRight() dan getPaddingBottom().

Even though a view can define a padding, it does not provide any support for margins. However, view groups provide such a support. Refer to ViewGroup and ViewGroup.MarginLayoutParams for further information.

For more information about dimensions, see Dimension Values.

Common Layouts

Each subclass of the ViewGroup class provides a unique way to display the views you nest within it. Below are some of the more common layout types that are built into the Android platform.

Note: Although you can nest one or more layouts within another layout to acheive your UI design, you should strive to keep your layout hierarchy as shallow as possible. Your layout draws faster if it has fewer nested layouts (a wide view hierarchy is better than a deep view hierarchy). Linear Layout

A layout that organizes its children into a single horizontal or vertical row. It creates a scrollbar if the length of the window exceeds the length of the screen. Relative Layout

Enables you to specify the location of child objects relative to each other (child A to the left of child B) or to the parent (aligned to the top of the parent). Web View

Displays web pages.

Building Layouts with an Adapter

When the content for your layout is dynamic or not pre-determined, you can use a layout that subclasses AdapterView to populate the layout with views at runtime. A subclass of the AdapterView class uses an Adapter to bind data to its layout. The Adapter behaves as a middleman between the data source and the AdapterView layout—the Adapter retrieves the data (from a source such as an array or a database query) and converts each entry into a view that can be added into the AdapterView layout.

Common layouts backed by an adapter include: List View

Displays a scrolling single column list. Grid View

Displays a scrolling grid of columns and rows. Filling an adapter view with data

You can populate an AdapterView such as ListView or GridView by binding the AdapterView instance to an Adapter, which retrieves data from an external source and creates a View that represents each data entry.

Android provides several subclasses of Adapter that are useful for retrieving different kinds of data and building views for an AdapterView. The two most common adapters are:

ArrayAdapter

   Use this adapter when your data source is an array. By default, ArrayAdapter creates a view for each array item by calling toString() on each item and placing the contents in a TextView.

   For example, if you have an array of strings you want to display in a ListView, initialize a new ArrayAdapter using a constructor to specify the layout for each string and the string array:

   ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
           android.R.layout.simple_list_item_1, myStringArray);

   The arguments for this constructor are:

       Your app Context
       The layout that contains a TextView for each string in the array
       The string array

   Then simply call setAdapter() on your ListView:

   ListView listView = (ListView) findViewById(R.id.listview);
   listView.setAdapter(adapter);

   To customize the appearance of each item you can override the toString() method for the objects in your array. Or, to create a view for each item that's something other than a TextView (for example, if you want an ImageView for each array item), extend the ArrayAdapter class and override getView() to return the type of view you want for each item.

SimpleCursorAdapter

   Use this adapter when your data comes from a Cursor. When using SimpleCursorAdapter, you must specify a layout to use for each row in the Cursor and which columns in the Cursor should be inserted into which views of the layout. For example, if you want to create a list of people's names and phone numbers, you can perform a query that returns a Cursor containing a row for each person and columns for the names and numbers. You then create a string array specifying which columns from the Cursor you want in the layout for each result and an integer array specifying the corresponding views that each column should be placed:

   String[] fromColumns = {ContactsContract.Data.DISPLAY_NAME,
                           ContactsContract.CommonDataKinds.Phone.NUMBER};
   int[] toViews = {R.id.display_name, R.id.phone_number};

   When you instantiate the SimpleCursorAdapter, pass the layout to use for each result, the Cursor containing the results, and these two arrays:

   SimpleCursorAdapter adapter = new SimpleCursorAdapter(this,
           R.layout.person_name_and_number, cursor, fromColumns, toViews, 0);
   ListView listView = getListView();
   listView.setAdapter(adapter);

   The SimpleCursorAdapter then creates a view for each row in the Cursor using the provided layout by inserting each fromColumns item into the corresponding toViews view.
   .

If, during the course of your application's life, you change the underlying data that is read by your adapter, you should call notifyDataSetChanged(). This will notify the attached view that the data has been changed and it should refresh itself. Handling click events

You can respond to click events on each item in an AdapterView by implementing the AdapterView.OnItemClickListener interface. For example:

// Create a message handling object as an anonymous class. private OnItemClickListener mMessageClickedHandler = new OnItemClickListener() {

   public void onItemClick(AdapterView parent, View v, int position, long id) {
       // Do something in response to the click
   }

};

listView.setOnItemClickListener(mMessageClickedHandler);

Referensi

• https://developer.android.com/guide/topics/ui/declaring-layout.html