Tata letak dalam Tampilan

Coba cara Compose
Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menggunakan tata letak di Compose.

Tata letak menentukan struktur antarmuka pengguna di aplikasi Anda, seperti dalam aktivitas. Semua elemen dalam tata letak dibuat menggunakan hierarki objek View dan ViewGroup. View biasanya menggambar sesuatu yang dapat dilihat dan berinteraksi dengan pengguna. ViewGroup adalah penampung tak terlihat yang menentukan struktur tata letak untuk View dan objek ViewGroup lainnya, seperti yang ditunjukkan pada gambar 1.

Gambar 1. Ilustrasi hierarki tampilan, yang menentukan tata letak UI.

Objek View sering disebut widget dan dapat berupa salah satu dari banyak subclass, seperti Button atau TextView. Objek ViewGroup biasanya disebut tata letak dan dapat berupa salah satu dari banyak jenis yang menyediakan struktur tata letak berbeda, seperti LinearLayout atau ConstraintLayout.

Anda dapat mendeklarasikan tata letak dengan dua cara:

  • Deklarasikan elemen UI dalam XML. Android menyediakan kosakata XML sederhana yang sesuai dengan class dan subclass View, seperti untuk widget dan tata letak. Anda juga dapat menggunakan Layout Editor Android Studio untuk membuat tata letak XML menggunakan antarmuka tarik lalu lepas.

  • Buat instance elemen tata letak saat runtime. Aplikasi Anda dapat membuat objek View dan ViewGroup serta memanipulasi propertinya secara terprogram.

Dengan mendeklarasikan UI dalam XML, Anda dapat memisahkan presentasi aplikasi dari kode yang mengontrol perilakunya. Menggunakan file XML juga akan mempermudah penyediaan tata letak yang berbeda untuk berbagai ukuran dan orientasi layar. Hal ini dibahas lebih lanjut di Mendukung berbagai ukuran layar.

Framework Android memberi Anda fleksibilitas untuk menggunakan salah satu atau kedua metode ini untuk mem-build UI aplikasi. Misalnya, Anda dapat mendeklarasikan tata letak default aplikasi dalam XML, lalu mengubah tata letak tersebut saat runtime.

Menulis XML

Dengan menggunakan kosakata XML Android, Anda dapat mendesain tata letak UI dan elemen layar yang dimuat dengan cepat, sama seperti saat Anda membuat halaman web di HTML dengan serangkaian elemen bertingkat.

Setiap file tata letak harus berisi tepat satu elemen root, yang harus berupa objek View atau ViewGroup. Setelah menentukan elemen root, Anda dapat menambahkan objek atau widget tata letak tambahan sebagai elemen turunan untuk secara bertahap membangun hierarki View yang menentukan tata letak. Misalnya, berikut adalah tata letak XML yang menggunakan LinearLayout vertikal untuk menyimpan 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 mendeklarasikan tata letak dalam XML, simpan file dengan ekstensi .xml dalam direktori res/layout/ project Android Anda agar dapat dikompilasi dengan benar.

Untuk mengetahui informasi selengkapnya tentang sintaksis file XML tata letak, lihat Resource tata letak.

Memuat resource XML

Saat mengompilasi aplikasi, masing-masing file tata letak XML akan dikompilasikan menjadi resource View. Muat resource tata letak di implementasi callback Activity.onCreate() aplikasi Anda. Lakukan dengan memanggil setContentView(), dengan meneruskan referensi ke resource tata letak Anda dalam bentuk: R.layout.layout_file_name. Misalnya, jika tata letak XML Anda disimpan sebagai main_layout.xml, muat untuk Activity seperti berikut:

Kotlin

fun onCreate(savedInstanceState: Bundle) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main_layout)
}

Java

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

Framework Android memanggil metode callback onCreate() di Activity saat Activity diluncurkan. Untuk informasi selengkapnya tentang siklus proses aktivitas, lihat Pengantar aktivitas.

Atribut

Setiap objek View dan ViewGroup mendukung berbagai atribut XML-nya sendiri. Beberapa atribut bersifat khusus untuk objek View. Misalnya, TextView mendukung atribut textSize. Namun, atribut ini juga diwarisi oleh objek View yang memperluas class ini. Beberapa objek bersifat umum untuk semua objek View, karena diwarisi dari class View root, seperti atribut id. Atribut lainnya dianggap sebagai parameter tata letak, yaitu atribut yang menjelaskan orientasi tata letak tertentu dari objek View, seperti yang didefinisikan oleh objek ViewGroup induk objek tersebut.

ID

Setiap objek View dapat memiliki ID bilangan bulat yang terkait dengannya untuk mengidentifikasi View secara unik dalam hierarki. Saat aplikasi dikompilasi, ID ini direferensikan sebagai bilangan bulat, tetapi ID ini biasanya ditetapkan dalam file XML tata letak sebagai string dalam atribut id. Ini adalah atribut XML yang umum untuk semua objek View, dan ditetapkan oleh class View. Anda sering menggunakannya. Sintaksis untuk ID di dalam tag XML adalah sebagai berikut:

android:id="@+id/my_button"

Simbol at (@) di awal string menunjukkan bahwa parser XML mengurai dan meluaskan string ID lainnya dan mengidentifikasinya sebagai resource ID. Simbol plus (+) berarti ini adalah nama resource baru yang harus dibuat dan ditambahkan ke resource Anda dalam file R.java.

Framework Android menawarkan banyak resource ID lainnya. Saat mereferensikan ID resource Android, Anda tidak memerlukan simbol plus, tetapi Anda harus menambahkan namespace paket android seperti berikut:

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

Namespace paket android menunjukkan bahwa Anda mereferensikan ID dari class resource android.R, bukan class resource lokal.

Untuk membuat tampilan dan mereferensikannya dari aplikasi, Anda dapat menggunakan pola umum sebagai berikut:

  1. Tentukan tampilan dalam file tata letak dan tetapkan ID unik, seperti dalam contoh berikut:
    <Button android:id="@+id/my_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/my_button_text"/>
    
  2. Buat instance objek tampilan dan ambil dari tata letak, biasanya dalam metode onCreate(), seperti ditunjukkan dalam contoh berikut:

    Kotlin

    val myButton: Button = findViewById(R.id.my_button)
    

    Java

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

Menentukan ID untuk objek tampilan bersifat penting saat membuat RelativeLayout. Dalam tata letak relatif, tampilan yang setara dapat menentukan tata letak secara relatif terhadap tampilan seinduk lainnya, yang direferensikan melalui ID unik.

ID tidak perlu unik di seluruh pohon, tetapi harus unik di bagian pohon yang Anda telusuri. Nama ini mungkin sering kali mencakup keseluruhan hierarki, jadi sebaiknya buat yang unik jika memungkinkan.

Parameter tata letak

Atribut tata letak XML bernama layout_something menentukan parameter tata letak untuk View yang sesuai untuk ViewGroup tempatnya berada.

Setiap class ViewGroup mengimplementasikan class bertingkat yang memperluas ViewGroup.LayoutParams. Subclass ini berisi jenis properti yang menentukan ukuran dan posisi setiap tampilan turunan, yang sesuai untuk kelompok tampilan. Seperti ditunjukkan dalam gambar 2, grup tampilan induk mendefinisikan parameter tata letak untuk setiap tampilan turunan, termasuk grup tampilan turunan.

Gambar 2. Visualisasi hierarki tampilan dengan parameter tata letak yang dikaitkan dengan setiap tampilan.

Setiap subclass LayoutParams memiliki sintaksisnya sendiri untuk menetapkan nilai. Setiap elemen turunan harus menentukan LayoutParams yang sesuai untuk induknya, meskipun elemen tersebut juga dapat menentukan LayoutParams yang berbeda untuk turunannya sendiri.

Semua kelompok tampilan menyertakan lebar dan tinggi, menggunakan layout_width dan layout_height, dan setiap tampilan harus menentukannya. Banyak LayoutParams yang menyertakan margin dan batas opsional.

Anda dapat menentukan lebar dan tinggi dengan ukuran persis, tetapi Anda mungkin tidak ingin sering-sering melakukannya. Seringnya, Anda menggunakan salah satu konstanta ini untuk menyetel lebar atau tinggi:

  • wrap_content: memberi tahu tampilan Anda agar menyesuaikan ukurannya dengan dimensi yang dibutuhkan oleh kontennya.
  • match_parent: memberi tahu tampilan Anda agar menjadi sebesar yang diizinkan oleh kelompok tampilan induknya.

Secara umum, sebaiknya jangan tetapkan lebar dan tinggi tata letak menggunakan unit absolut seperti piksel. Pendekatan yang lebih baik adalah menggunakan ukuran relatif, seperti unit piksel kepadatan mandiri (dp), wrap_content, atau match_parent, karena membantu aplikasi Anda ditampilkan dengan benar di berbagai ukuran layar perangkat. Jenis pengukuran yang diterima ditentukan dalam Resource tata letak.

Posisi tata letak

Tampilan memiliki geometri persegi panjang. Ini memiliki lokasi, yang dinyatakan sebagai pasangan koordinat kiri dan atas, serta dua dimensi, yang dinyatakan sebagai lebar dan tinggi. Satuan untuk lokasi dan dimensi adalah piksel.

Anda dapat mengambil lokasi tampilan dengan memanggil metode getLeft() dan getTop(). Metode pertama menampilkan koordinat kiri (x) persegi panjang yang mewakili tampilan. Metode kedua menampilkan koordinat atas (y) persegi panjang yang mewakili tampilan. Metode ini menampilkan lokasi tampilan relatif terhadap induknya. Misalnya, jika getLeft() menampilkan 20, artinya tampilan terletak 20 piksel ke kanan dari tepi kiri induk langsungnya.

Selain itu, ada metode praktis untuk menghindari komputasi yang tidak perlu: yaitu getRight() dan getBottom(). Kedua metode ini menampilkan koordinat tepi kanan dan bawah persegi panjang yang merepresentasikan tampilan. Misalnya, memanggil getRight() mirip dengan komputasi berikut: getLeft() + getWidth().

Ukuran, padding, dan margin

Ukuran tampilan dinyatakan dengan lebar dan tinggi. Tampilan memiliki dua pasang nilai lebar dan tinggi.

Pasangan pertama dikenal sebagai lebar terukur dan tinggi terukur. Dimensi ini menentukan seberapa besar tampilan yang diinginkan dalam induknya. Anda dapat memperoleh dimensi yang diukur dengan memanggil getMeasuredWidth() dan getMeasuredHeight().

Pasangan kedua dikenal sebagai lebar dan tinggi, atau terkadang lebar gambar dan tinggi gambar. Dimensi ini menentukan ukuran tampilan sebenarnya di layar, saat digambar dan setelah tata letak. Nilai ini mungkin, tetapi tidak harus, berbeda dengan lebar dan tinggi terukur. Anda dapat memperoleh lebar dan tinggi dengan memanggil getWidth() dan getHeight().

Untuk mengukur dimensinya, tampilan akan memperhitungkan pengisinya. Padding dinyatakan dalam piksel untuk bagian kiri, atas, kanan, dan bawah tampilan. Anda dapat menggunakan padding untuk mengimbangi isi tampilan dengan jumlah piksel tertentu. Misalnya, padding kiri sebanyak dua mendorong konten tampilan dua piksel ke kanan tepi kiri. Anda dapat menetapkan padding menggunakan metode setPadding(int, int, int, int) dan membuat kuerinya dengan memanggil getPaddingLeft(), getPaddingTop(), getPaddingRight(), dan getPaddingBottom().

Meskipun bisa mendefinisikan padding, tampilan tidak mendukung margin. Namun, grup tampilan mendukung margin. Lihat ViewGroup dan ViewGroup.MarginLayoutParams untuk informasi selengkapnya.

Untuk mengetahui informasi selengkapnya tentang dimensi, lihat Dimensi.

Selain menyetel margin dan padding secara terprogram, Anda juga dapat menetapkannya dalam tata letak XML, seperti yang ditunjukkan dalam contoh berikut:

  <?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:layout_margin="16dp"
                android:padding="8dp"
                android:text="Hello, I am a TextView" />
      <Button android:id="@+id/button"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginTop="16dp"
              android:paddingBottom="4dp"
              android:paddingEnd="8dp"
              android:paddingStart="8dp"
              android:paddingTop="4dp"
              android:text="Hello, I am a Button" />
  </LinearLayout>
  

Contoh sebelumnya menunjukkan margin dan padding yang diterapkan. TextView memiliki margin dan padding seragam yang diterapkan di sekelilingnya, dan Button menunjukkan cara menerapkannya secara terpisah ke berbagai tepi.

Tata letak umum

Setiap subclass dari class ViewGroup menyediakan cara unik untuk menampilkan tampilan yang Anda tempatkan di dalamnya. Jenis tata letak yang paling fleksibel, dan yang menyediakan alat terbaik untuk menjaga hierarki tata letak Anda tetap dangkal, adalah ConstraintLayout.

Berikut adalah beberapa jenis tata letak umum yang di-build ke dalam platform Android.

Membuat tata letak linear

Mengatur turunannya ke dalam satu baris horizontal atau vertikal dan membuat scrollbar jika panjang jendela melebihi panjang layar.

Membuat aplikasi web di WebView

Menampilkan halaman web.

Membuat daftar dinamis

Jika konten tata letak bersifat dinamis atau tidak ditentukan sebelumnya, Anda dapat menggunakan RecyclerView atau subclass dari AdapterView. RecyclerView umumnya merupakan opsi yang lebih baik karena menggunakan memori secara lebih efisien daripada AdapterView.

Tata letak umum yang memungkinkan dengan RecyclerView dan AdapterView mencakup hal berikut:

Daftar

Menampilkan daftar kolom tunggal yang bergulir.

Petak

Menampilkan petak kolom dan baris yang bergulir.

RecyclerView menawarkan lebih banyak kemungkinan dan opsi untuk membuat pengelola tata letak kustom.

Mengisi tampilan adaptor dengan data

Anda dapat mengisi AdapterView seperti ListView atau GridView dengan mengikat instance AdapterView ke Adapter, yang mengambil data dari sumber eksternal dan membuat View yang mewakili setiap entri data.

Android menyediakan beberapa subclass Adapter yang berguna untuk mengambil berbagai jenis data dan membuat tampilan untuk AdapterView. Dua adapter yang paling umum adalah:

ArrayAdapter
Gunakan adaptor ini bila sumber data berupa array. Secara default, ArrayAdapter akan membuat tampilan untuk setiap item array dengan memanggil toString() pada setiap item dan menempatkan konten dalam TextView.

Misalnya, jika Anda memiliki array string yang ingin ditampilkan dalam ListView, lakukan inisialisasi ArrayAdapter baru menggunakan konstruktor untuk menentukan tata letak setiap string dan array string:

Kotlin

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

Java

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

Argumen untuk konstruktor ini adalah sebagai berikut:

  • Aplikasi Anda Context
  • Tata letak yang berisi TextView untuk setiap string dalam array
  • Array string

Lalu, panggil setAdapter() di ListView Anda:

Kotlin

    val listView: ListView = findViewById(R.id.listview)
    listView.adapter = adapter
    

Java

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

Untuk menyesuaikan tampilan setiap item, Anda dapat mengganti metode toString() untuk objek dalam array Anda. Atau, untuk membuat tampilan bagi setiap item yang berbeda dari TextView—misalnya, jika Anda menginginkan ImageView untuk setiap item array—perluas class ArrayAdapter dan ganti getView() untuk menampilkan jenis tampilan yang Anda inginkan untuk setiap item.

SimpleCursorAdapter
Gunakan adaptor ini jika data Anda berasal dari Cursor. Saat menggunakan SimpleCursorAdapter, tentukan tata letak yang akan digunakan untuk setiap baris dalam Cursor dan kolom mana dalam Cursor yang ingin Anda sisipkan ke dalam tampilan tata letak yang Anda inginkan. Misalnya, jika Anda ingin membuat daftar nama orang dan nomor telepon, Anda dapat menjalankan kueri yang menampilkan Cursor yang berisi satu baris untuk setiap orang serta kolom untuk nama dan nomor. Selanjutnya, buat array string yang menentukan kolom dari Cursor yang Anda inginkan dalam tata letak untuk setiap hasil dan array bilangan bulat yang menentukan tampilan yang sesuai dengan penempatan setiap kolom:

Kotlin

    val fromColumns = arrayOf(ContactsContract.Data.DISPLAY_NAME,
                              ContactsContract.CommonDataKinds.Phone.NUMBER)
    val toViews = intArrayOf(R.id.display_name, R.id.phone_number)
    

Java

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

Saat Anda membuat instance SimpleCursorAdapter, teruskan tata letak yang akan digunakan untuk setiap hasil, Cursor yang berisi hasil tersebut, dan dua array ini:

Kotlin

    val adapter = SimpleCursorAdapter(this,
            R.layout.person_name_and_number, cursor, fromColumns, toViews, 0)
    val listView = getListView()
    listView.adapter = adapter
    

Java

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

SimpleCursorAdapter kemudian membuat tampilan untuk setiap baris dalam Cursor menggunakan tata letak yang disediakan dengan memasukkan setiap item fromColumns ke dalam tampilan toViews yang terkait.

Jika selama masa aktif aplikasi, Anda mengubah data pokok yang dibaca oleh adaptor, panggil notifyDataSetChanged(). Hal ini akan memberi tahu tampilan yang bersangkutan bahwa data telah diubah dan tampilan tersebut akan dimuat ulang dengan sendirinya.

Menangani peristiwa klik

Anda dapat merespons peristiwa klik pada setiap item dalam AdapterView dengan mengimplementasikan antarmuka AdapterView.OnItemClickListener. Contoh:

Kotlin

listView.onItemClickListener = AdapterView.OnItemClickListener { parent, view, position, id ->
    // Do something in response to the click.
}

Java

// Create a message handling object as an anonymous class.
private OnItemClickListener messageClickedHandler = new OnItemClickListener() {
    public void onItemClick(AdapterView parent, View v, int position, long id) {
        // Do something in response to the click.
    }
};

listView.setOnItemClickListener(messageClickedHandler);

Referensi lainnya

Lihat cara tata letak digunakan dalam aplikasi demo Sunflower di GitHub.