Difference between revisions of "Android Studio: Layout Layar"

From OnnoWiki
Jump to navigation Jump to search
 
(56 intermediate revisions by the same user not shown)
Line 26: Line 26:
 
==Menulis XML==
 
==Menulis XML==
  
−
Using Android's XML vocabulary, you can quickly design UI layouts and the screen elements they contain, in the same way you create web pages in HTML — with a series of nested elements.
+
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.
  
−
Each layout file must contain exactly one root element, which must be a View or ViewGroup object. Once you've defined the root element, you can add additional layout objects or widgets as child elements to gradually build a View hierarchy that defines your layout. For example, here's an XML layout that uses a vertical LinearLayout to hold a TextView and a Button:
+
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"?>
 
  <?xml version="1.0" encoding="utf-8"?>
Line 45: Line 45:
 
  </LinearLayout>
 
  </LinearLayout>
  
−
After you've declared your layout in XML, save the file with the .xml extension, in your Android project's res/layout/ directory, so it will properly compile.
+
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.
 
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:
  
−
Load the XML Resource
+
android:id="@+id/my_button"
  
−
When you compile your application, each XML layout file is compiled into a View resource. You should load the layout resource from your application code, in your Activity.onCreate() callback implementation. Do so by calling setContentView(), passing it the reference to your layout resource in the form of: R.layout.layout_file_name. For example, if your XML layout is saved as main_layout.xml, you would load it for your Activity like so:
+
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).
 +
 
 +
[[Image:Layoutparams.png|center|200px|thumb|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().
 +
 
 +
Meskipun View dapat menentukan padding, itu tidak menyediakan dukungan untuk margin. Namun, view group memberikan dukungan seperti itu. Lihat ViewGroup dan ViewGroup.MarginLayoutParams untuk informasi lebih lanjut.
 +
 
 +
Untuk informasi lebih lanjut tentang dimensi, sebaiknya membaca-baca Dimension Values.
 +
 
 +
==Layout Umum==
 +
 
 +
Setiap subclass dari class ViewGroup memberikan cara yang unik untuk mendisplay view yang di nest di dalam-nya. Di bawah ini adalah beberapa contoh tipe layout yang sering digunakan dan sudah ada di dalam platform android.
 +
 
 +
 
 +
Catatan: Meskipin kita dapat melakukan nest satu atau lebih layout dalam layout lain untuk memperoleh disain UI yang kita kehendaki, sebaiknya kita berusaha agar hirarki layout yang kita gunakan se-dangkal mungkin. Layout akan lebih cepat di gambar jika hanya sedikit nested layout (hirarki view yang lebar akan lebih baik daripada hirarki view yang dalam).
  
−
public void onCreate(Bundle savedInstanceState) {
 
−
    super.onCreate(savedInstanceState);
 
−
    setContentView(R.layout.main_layout);
 
−
}
 
  
−
The onCreate() callback method in your Activity is called by the Android framework when your Activity is launched (see the discussion about lifecycles, in the Activities document).
+
[[Image:Linearlayout-small.png|center|200px|thumb|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.]]
  
 +
[[Image:Relativelayout-small.png|center|200px|thumb|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).]]
  
 +
[[Image:Webview-small.png|center|200px|thumb|Web View : Displays web pages.]]
  
 +
==Build Layout dengan sebuah Adapter==
  
 +
Jika content untuk layout adalah dynamic atau tidak di set sebelumnya, kita dapat menggunakan layout yang menggunakan subclass AdapterView untuk mengisi layout dengan view saat runtime. Subcladass dari class AdapterView menggunakan Adapter untuk menempelkan data ke layout tersebut. Adapter berperilaku seperti perantara antara sumber data dengan AdapterView layout - Adapter akan mengambil data (dari sumber seperti array atau query database) dan mengubahnya setiap entry menjadi view yang dapat di tambahkan ke layout AdapterView.
  
 +
Layout yang banyak digunakan yang di dukung oleh adapter termasuk:
  
 +
[[Image:Listview-small.png|center|200px|thumb|List View - Displays a scrolling single column list.]]
  
 +
[[Image:Gridview-small.png|center|200px|thumb|Grid View - Displays a scrolling grid of columns and rows.]]
  
  
−
Attributes
+
===Filling an adapter view with data===
  
−
Every View and ViewGroup object supports their own variety of XML attributes. Some attributes are specific to a View object (for example, TextView supports the textSize attribute), but these attributes are also inherited by any View objects that may extend this class. Some are common to all View objects, because they are inherited from the root View class (like the id attribute). And, other attributes are considered "layout parameters," which are attributes that describe certain layout orientations of the View object, as defined by that object's parent ViewGroup object.
+
Kita dapat mengisi sebuah AdapterView seperti ListView atau GridView dengan cara menempelkan instance AdapterView ke sebuah Adapter, yang akan mengambil data dari sumber di luar dan membuat View yang merepresentasikan sebuah data entry.
−
ID
 
  
−
Any View object may have an integer ID associated with it, to uniquely identify the View within the tree. When the application is compiled, this ID is referenced as an integer, but the ID is typically assigned in the layout XML file as a string, in the id attribute. This is an XML attribute common to all View objects (defined by the View class) and you will use it very often. The syntax for an ID, inside an XML tag is:
+
Android menyediakan beberapa  subclasses dari Adapter yang bermanfaat untuk mengambil berbagai jenis data dan membuat views untuk sebuah AdapterView. Dua adapter yang banyak digunakan adalah:
  
−
android:id="@+id/my_button"
+
'''ArrayAdapter'''
  
−
The at-symbol (@) at the beginning of the string indicates that the XML parser should parse and expand the rest of the ID string and identify it as an ID resource. The plus-symbol (+) means that this is a new resource name that must be created and added to our resources (in the R.java file). There are a number of other ID resources that are offered by the Android framework. When referencing an Android resource ID, you do not need the plus-symbol, but must add the android package namespace, like so:
+
Menggunakan adapter ini jika sumber data kita adalah sebuah array. Secara default, ArrayAdapter membuat view untuk setiap item di array dengan memanggil toString() untuk setiap item dan meletakan content-nya di TextView.
  
−
android:id="@android:id/empty"
+
Contoh, jika kita mempunyai array string yang akan kita display di sebuah ListView, inisialisasi sebuah ArrayAdapter baru menggunakan sebuah constructor untuk menspesifikasi layout untuk setiap string dan string array:
  
−
With the android package namespace in place, we're now referencing an ID from the android.R resources class, rather than the local resources class.
+
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
 +
        android.R.layout.simple_list_item_1, myStringArray);
  
−
In order to create views and reference them from the application, a common pattern is to:
+
Maka argumen untuk constructor ini adalah:
  
−
    Define a view/widget in the layout file and assign it a unique ID:
+
* Context app kota
 +
* layout yang berisi TextView untuk setiap string di array
 +
* string array
  
−
    <Button android:id="@+id/my_button"
+
Kemudian panggil setAdapter() di ListView anda:
−
            android:layout_width="wrap_content"
 
−
            android:layout_height="wrap_content"
 
−
            android:text="@string/my_button_text"/>
 
  
−
    Then create an instance of the view object and capture it from the layout (typically in the onCreate() method):
+
ListView listView = (ListView) findViewById(R.id.listview);
 +
listView.setAdapter(adapter);
  
−
    Button myButton = (Button) findViewById(R.id.my_button);
+
Untuk meng-custimisasi penampilan setiap item kita dapat meng-overide method toString() untuk objek yang ada di array. Atau, untuk meng-create view untuk setiap item yang menggunakan bukan TextView (contoh, jika kita ingin menggunakan ImageView untuk setiap item di array), extend class ArrayAdapter dan overide getView() untuk memberikan return tipe view yang kita inginkan untuk setiap item.
  
−
Defining IDs for view objects is important when creating a RelativeLayout. In a relative layout, sibling views can define their layout relative to another sibling view, which is referenced by the unique ID.
+
'''SimpleCursorAdapter'''
  
−
An ID need not be unique throughout the entire tree, but it should be unique within the part of the tree you are searching (which may often be the entire tree, so it's best to be completely unique when possible).
+
Gunakan adaptor ini ketika data anda berasal dari sebuah kursor . Bila menggunakan SimpleCursorAdapter, anda harus menentukan layout yang akan digunakan untuk setiap baris di Cursor dan yang kolom di Cursor harus dimasukkan ke dalam view dari layout. Sebagai contoh, jika Anda ingin membuat daftar nama orang dan nomor telepon, anda dapat melakukan query yang mengembalikan Cursor yang berisi baris untuk setiap orang dan kolom untuk nama dan nomor. Anda kemudian membuat array string yang menetapkan kolom dari Cursor yang Anda inginkan dalam layout untuk setiap hasil dan sebuah array bilangan bulat menentukan view yang sesuai agar setiap kolom harus ditempatkan:
  
 +
String[] fromColumns = {ContactsContract.Data.DISPLAY_NAME,
 +
                        ContactsContract.CommonDataKinds.Phone.NUMBER};
 +
int[] toViews = {R.id.display_name, R.id.phone_number};
  
 +
Jika kita menginisiasi SimpleCursorAdapter, pass layout untuk digunakan untuk setiap hasil, Cursor berisi hasil, dan ke dua arrays:
  
 +
SimpleCursorAdapter adapter = new SimpleCursorAdapter(this,
 +
        R.layout.person_name_and_number, cursor, fromColumns, toViews, 0);
 +
ListView listView = getListView();
 +
listView.setAdapter(adapter);
  
 +
SimpleCursorAdapter kemudian membuat view untuk setiap baris di Cursor menggunakan layout yang diberikan dengan cara meng-insert setiap item fromColumns ke view toViews.
  
 +
Jika, dalam perjalanan aplikasi anda, anda mengubah data yang mendasari yang dibaca oleh adaptor anda, anda harus menghubungi notifyDataSetChanged (). Ini akan memberitahu view yang melekat bahwa data telah berubah dan harus me-refresh diri sendiri.
  
 +
==Handling click events==
  
 +
Kita dapat menghubungkan event click pada setiap item di AdapterView dengan cara mengimplementasikan interface AdapterView.OnItemClickListener . Contoh:
  
 +
// 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==
 
==Referensi==
  
 
* https://developer.android.com/guide/topics/ui/declaring-layout.html
 
* https://developer.android.com/guide/topics/ui/declaring-layout.html

Latest revision as of 11:30, 12 May 2015

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

Meskipun View dapat menentukan padding, itu tidak menyediakan dukungan untuk margin. Namun, view group memberikan dukungan seperti itu. Lihat ViewGroup dan ViewGroup.MarginLayoutParams untuk informasi lebih lanjut.

Untuk informasi lebih lanjut tentang dimensi, sebaiknya membaca-baca Dimension Values.

Layout Umum

Setiap subclass dari class ViewGroup memberikan cara yang unik untuk mendisplay view yang di nest di dalam-nya. Di bawah ini adalah beberapa contoh tipe layout yang sering digunakan dan sudah ada di dalam platform android.


Catatan: Meskipin kita dapat melakukan nest satu atau lebih layout dalam layout lain untuk memperoleh disain UI yang kita kehendaki, sebaiknya kita berusaha agar hirarki layout yang kita gunakan se-dangkal mungkin. Layout akan lebih cepat di gambar jika hanya sedikit nested layout (hirarki view yang lebar akan lebih baik daripada hirarki view yang dalam).


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.

Build Layout dengan sebuah Adapter

Jika content untuk layout adalah dynamic atau tidak di set sebelumnya, kita dapat menggunakan layout yang menggunakan subclass AdapterView untuk mengisi layout dengan view saat runtime. Subcladass dari class AdapterView menggunakan Adapter untuk menempelkan data ke layout tersebut. Adapter berperilaku seperti perantara antara sumber data dengan AdapterView layout - Adapter akan mengambil data (dari sumber seperti array atau query database) dan mengubahnya setiap entry menjadi view yang dapat di tambahkan ke layout AdapterView.

Layout yang banyak digunakan yang di dukung oleh adapter termasuk:

List View - Displays a scrolling single column list.
Grid View - Displays a scrolling grid of columns and rows.


Filling an adapter view with data

Kita dapat mengisi sebuah AdapterView seperti ListView atau GridView dengan cara menempelkan instance AdapterView ke sebuah Adapter, yang akan mengambil data dari sumber di luar dan membuat View yang merepresentasikan sebuah data entry.

Android menyediakan beberapa subclasses dari Adapter yang bermanfaat untuk mengambil berbagai jenis data dan membuat views untuk sebuah AdapterView. Dua adapter yang banyak digunakan adalah:

ArrayAdapter

Menggunakan adapter ini jika sumber data kita adalah sebuah array. Secara default, ArrayAdapter membuat view untuk setiap item di array dengan memanggil toString() untuk setiap item dan meletakan content-nya di TextView.

Contoh, jika kita mempunyai array string yang akan kita display di sebuah ListView, inisialisasi sebuah ArrayAdapter baru menggunakan sebuah constructor untuk menspesifikasi layout untuk setiap string dan string array: 

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

Maka argumen untuk constructor ini adalah:

  • Context app kota
  • layout yang berisi TextView untuk setiap string di array
  • string array

Kemudian panggil setAdapter() di ListView anda: 

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

Untuk meng-custimisasi penampilan setiap item kita dapat meng-overide method toString() untuk objek yang ada di array. Atau, untuk meng-create view untuk setiap item yang menggunakan bukan TextView (contoh, jika kita ingin menggunakan ImageView untuk setiap item di array), extend class ArrayAdapter dan overide getView() untuk memberikan return tipe view yang kita inginkan untuk setiap item.

SimpleCursorAdapter

Gunakan adaptor ini ketika data anda berasal dari sebuah kursor . Bila menggunakan SimpleCursorAdapter, anda harus menentukan layout yang akan digunakan untuk setiap baris di Cursor dan yang kolom di Cursor harus dimasukkan ke dalam view dari layout. Sebagai contoh, jika Anda ingin membuat daftar nama orang dan nomor telepon, anda dapat melakukan query yang mengembalikan Cursor yang berisi baris untuk setiap orang dan kolom untuk nama dan nomor. Anda kemudian membuat array string yang menetapkan kolom dari Cursor yang Anda inginkan dalam layout untuk setiap hasil dan sebuah array bilangan bulat menentukan view yang sesuai agar setiap kolom harus ditempatkan: 

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

Jika kita menginisiasi SimpleCursorAdapter, pass layout untuk digunakan untuk setiap hasil, Cursor berisi hasil, dan ke dua arrays: 

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

SimpleCursorAdapter kemudian membuat view untuk setiap baris di Cursor menggunakan layout yang diberikan dengan cara meng-insert setiap item fromColumns ke view toViews.

Jika, dalam perjalanan aplikasi anda, anda mengubah data yang mendasari yang dibaca oleh adaptor anda, anda harus menghubungi notifyDataSetChanged (). Ini akan memberitahu view yang melekat bahwa data telah berubah dan harus me-refresh diri sendiri.

Handling click events

Kita dapat menghubungkan event click pada setiap item di AdapterView dengan cara mengimplementasikan interface AdapterView.OnItemClickListener . Contoh: 

// 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

Retrieved from "https://onnocenter.or.id/wiki/index.php?title=Android_Studio:_Layout_Layar&oldid=43075"