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
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).
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
The geometry of a view is that of a rectangle. A view has a location, expressed as a pair of left and top coordinates, and two dimensions, expressed as a width and a height. The unit for location and dimensions is the pixel.
It is possible to retrieve the location of a view by invoking the methods getLeft() and getTop(). The former returns the left, or X, coordinate of the rectangle representing the view. The latter returns the top, or Y, coordinate of the rectangle representing the view. These methods both return the location of the view relative to its parent. For instance, when getLeft() returns 20, that means the view is located 20 pixels to the right of the left edge of its direct parent.
In addition, several convenience methods are offered to avoid unnecessary computations, namely getRight() and getBottom(). These methods return the coordinates of the right and bottom edges of the rectangle representing the view. For instance, calling getRight() is similar to the following computation: getLeft() + getWidth().
Size, Padding and Margins
The size of a view is expressed with a width and a height. A view actually possess two pairs of width and height values.
The first pair is known as measured width and measured height. These dimensions define how big a view wants to be within its parent. The measured dimensions can be obtained by calling getMeasuredWidth() and getMeasuredHeight().
The second pair is simply known as width and height, or sometimes drawing width and drawing height. These dimensions define the actual size of the view on screen, at drawing time and after layout. These values may, but do not have to, be different from the measured width and height. The width and height can be obtained by calling getWidth() and getHeight().
To measure its dimensions, a view takes into account its padding. The padding is expressed in pixels for the left, top, right and bottom parts of the view. Padding can be used to offset the content of the view by a specific number of pixels. For instance, a left padding of 2 will push the view's content by 2 pixels to the right of the left edge. Padding can be set using the setPadding(int, int, int, int) method and queried by calling getPaddingLeft(), getPaddingTop(), getPaddingRight() and 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);