Cara Membuat Android User Interface Layouts | Tutorial

Antarmuka pengguna aplikasi Android dapat didefinisikan baik dalam xml atau dalam kode. Android UI terdiri dari hierarki tampilan dan grup tampilan.

Tampilan adalah kelas dasar untuk semua komponen UI seperti tombol, kotak centang, dan bidang teks.

ViewGroup, subclass dari View, adalah kelas dasar untuk tampilan kontainer seperti tampilan daftar, tampilan pendaur ulang, dan tampilan kisi dan tata letak seperti tata letak linier, tata letak relatif, dan tata letak kisi.

ViewGroups tidak terlihat; mereka adalah kontainer dan memiliki pandangan lain di UI. Dengan melihat grup, Anda dapat memposisikan komponen UI di layar sesuai kebutuhan Anda. Akar hierarki tampilan UI android adalah grup tampilan.

Dalam artikel ini, saya akan menulis tentang tata letak dan cara-cara untuk meningkatkan kinerja dan mengoptimalkan tata letak.

Di sini satu titik yang perlu diperhatikan adalah bahwa seluruh definisi UI untuk layar disebut tata letak dan subclass grup tampilan yang memposisikan tampilan di dalamnya disebut tata letak (kelas tata letak) juga.

Menentukan Tata Letak

Anda dapat menentukan UI untuk aktivitas Anda dalam file xml dan letakkan di folder sumber daya tata letak. Di bawah ini adalah contoh.

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_search"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.zoftino.search.SearchActivity">
    <TextView
        android:id="@+id/search_t"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></TextView>

    <Button
        android:id="@+id/search_b"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"       
        android:text="Search"></Button>
</LinearLayout>

Mengatur Tata Letak untuk Aktivitas dan Memodifikasi Tampilan dalam Kode

Setelah tata letak didefinisikan, Anda dapat mengaturnya sebagai UI untuk suatu aktivitas. Anda dapat melakukannya dengan memanggil metode setContentView lewat tata letak nama file dalam metode onCreate () aktivitas.

 @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_constraint);
}

Anda dapat mengubah tampilan dengan mencari tampilan menggunakan metode findViewById dalam aktivitas.

        TextView tv = (TextView)findViewById(R.id.search_text);
        tv.setText("search");

Proses Menggambar Layout Android

Kerangka kerja Android memulai proses menggambar tata letak untuk suatu aktivitas ketika aktivitas mendapat fokus. Proses menggambar melibatkan tiga melewati, inisialisasi, tata letak dan menggambar lulus.

Pada tahap inisialisasi, semua kelas tampilan dibuat dengan nilai properti yang diberikan pengguna.

Ada dua bagian dalam fase tata letak. Pada bagian pertama, kerangka kerja android melintasi melalui hierarki tampilan dari atas ke bawah dan menetapkan ukuran seperti lebar dan tinggi untuk setiap tampilan. Pada bagian kedua, ia menjelajah melalui hierarki tampilan kembali ke bawah dan memposisikan setiap tampilan dalam induknya menggunakan pengukuran yang dihitung pada langkah sebelumnya.

Dalam menggambar lulus, pandangan digambar di layar, orang tua pertama dan kemudian anak-anak.

Android Layouts

Kerangka Android menyediakan beberapa kelas tata letak dan grup tampilan yang memungkinkan Anda untuk menampilkan tampilan dengan cara posisi berbeda di layar. Beberapa tata letak memungkinkan Anda untuk menampilkan tampilan dalam pola tertentu seperti menampilkan semua tampilan di layar secara horizontal, vertikal, atau gaya kisi. Beberapa tata letak memberikan kontrol penuh sehingga tampilan dalam tata letak tersebut dapat disejajarkan seperti yang Anda inginkan.

Ada dua masalah utama dengan tata letak di Android, masalah terkait kinerja dan keselarasan. Masalah kinerja terjadi karena tata letak penumpukan dan masalah penyelarasan terjadi karena kurangnya dukungan untuk menyelaraskan tampilan pada kedua sumbu. Untuk mengatasi masalah ini, android menyediakan tata letak yang berbeda. Pertama saya akan memberikan informasi singkat tentang tata letak tersebut dengan contoh-contoh dan kemudian saya akan berbicara tentang cara-cara untuk meningkatkan kinerja dan untuk melakukan optimalisasi tata letak.

Linear Layout

Tampilan tata letak linier dilihat secara horizontal atau vertikal. Atribut tata letak linier yang mengontrol orientasi adalah android: orientasi, atur ke horizontal atau vertikal.

Layout Relatif

Tata letak relatif memungkinkan Anda untuk menampilkan tampilan relatif terhadap tampilan orang tua atau saudara. Misalnya, Anda dapat membuat tampilan tampilan di bawah tampilan lain atau pusat penyejajaran dalam induk.

Tata letak Nesting memiliki dampak besar pada kinerja UI. Dengan tata letak relatif, Anda dapat mengurangi jumlah tata letak berlapis dan di sana dengan meningkatkan kinerja UI Anda.

Jika visibilitas tampilan diatur ke GONE, maka tampilan lain yang bergantung pada tampilan GONE untuk penyelarasan tidak dapat diposisikan sebagai tata letak relatif tidak tahu dengan tepat di mana posisi pandangan. Untuk memperbaiki masalah ini, Anda perlu mengatur alignWithParentIfMissing ke true untuk memberi tahu tata letak relatif yang jika terjadi kehilangan tampilan, menyesuaikan tampilan yang bergantung pada posisi ke orang tua.

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zoftino.content.MainActivity">
    <Button
        android:id="@+id/button1"
        android:text="Button One"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="40dp"></Button>

    <Button
        android:id="@+id/button2"
        android:text="Button Two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button1"
        android:layout_alignParentRight="true"
        android:layout_marginRight="40dp"></Button>
    <Button
        android:id="@+id/button3"
        android:text="Button Three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_below="@+id/button1"
        android:layout_toRightOf="@+id/button1"
        android:layout_toEndOf="@+id/button1"></Button>

</RelativeLayout>

GridLayout

GridLayout diperkenalkan untuk memecahkan masalah ketidakmampuan untuk menyelaraskan pandangan baik secara horizontal maupun vertikal. Jenis penyelarasan ini tidak dapat dicapai dengan tata letak yang lebih ramping.

Dengan tata letak kisi, Anda dapat menyelaraskan tampilan secara horizontal dan vertikal. Anda dapat mencapai jenis layar grid menggunakan tata letak relatif. Tapi tata letak relatif lambat dibandingkan dengan tata letak grid sederhana, tata letak grid tanpa bersarang. Jika Anda tidak dapat menghindari penumpukan tata letak, maka gunakan tata letak relatif.

 <?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="3"
    tools:context="com.zoftino.content.MainActivity">
    <Button
        android:id="@+id/button1"
        android:text="Button 1"
        android:layout_gravity="right"></Button>
    <Button
        android:id="@+id/button2"
        android:text="Button 2"
        android:layout_gravity="left"></Button>
    <Button
        android:id="@+id/button3"
        android:text="Button 3"
        android:layout_gravity="right"></Button>
    <Button
        android:id="@+id/button4"
        android:text="Button 4"
        android:layout_gravity="right"></Button>
    <Button
        android:id="@+id/button5"
        android:text="Button 5"
        android:layout_gravity="left"></Button>
    <Button
        android:id="@+id/button6"
        android:text="Button 6"
        android:layout_gravity="right"></Button>
</GridLayout>

Frame Layout

Untuk menampilkan tampilan tumpang tindih atau untuk menampilkan tampilan satu dengan yang lain, Anda dapat menggunakan tata-letak bingkai. Posisi tampilan anak tata letak bingkai dapat dikontrol dengan atribut layout_gravity.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zoftino.content.MainActivity">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/zoftinocom"></ImageView>

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Technology"></TextView>
</FrameLayout>

Coordinator Layout

Tata letak koordinator memungkinkan pandangan anak untuk berinteraksi dengan pandangan anak lain, atau orang tua. Untuk ini, Anda perlu mendefinisikan Perilaku untuk setiap tampilan yang perlu memberikan perilaku tertentu dalam menanggapi peristiwa tertentu, atau perubahan pada tampilan yang bergantung. Tata letak koordinator mengeksekusi perilaku yang diberikan dalam menanggapi peristiwa tertentu atau perubahan tampilan bergantung.

Swipe Refresh Layout

Dengan tata letak segarkan geseran, Anda dapat menerapkan fungsi penyegaran layar dengan mudah. Artinya, konten dapat disegarkan menggunakan tata letak segarkan geseran saat pengguna membuat gerakan gesekan vertikal. Tata letak segarkan Swipe mendeteksi gerakan segarkan dan memberi tahu pendengar yang didaftarkan oleh aktivitas layar. Ini adalah tanggung jawab pendengar untuk mendapatkan konten terbaru dan menyegarkan layar dengannya.

Sliding Pane Layout

Tampilan panel geser adalah tata letak dua panel. Jika Anda memiliki konten yang sesuai dengan skenario menampilkan daftar item dalam satu panel, dan detail setiap item di panel yang berbeda, kemudian pergi untuk geser pane tata letak. Dengan tata letak panel geser, Anda dapat mencapai perilaku menampilkan kedua panel di layar besar, dan menciutkan panel daftar dan hanya menampilkan panel detail di layar kecil. Jendela tertutup dapat diseret untuk membukanya.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zoftino.content.MainActivity">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Technology"></TextView>
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/zoftinocom"></ImageView>
</android.support.v4.widget.SlidingPaneLayout>

Constraint Layout

Tata letak Constraint mirip dengan tata letak relatif, kedua tata letak memungkinkan Anda untuk memposisikan tampilan anak relatif terhadap satu sama lain atau orang tua, dan meratakan hierarki tampilan yang berarti mengurangi kedalaman hierarki untuk meningkatkan kinerja UI.

Tapi tata letak kendala adalah fleksibel dan mudah untuk merancang tata letak menggunakan editor layout studio android. Di bawah ini adalah contoh tata letak kendala yang memberikan keluaran UI yang sama seperti contoh tata letak relatif di atas.

 <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:layout_width="88dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="53dp"
        app:layout_constraintLeft_toLeftOf="parent"></Button>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="16dp"
        app:layout_constraintLeft_toRightOf="@+id/button1"
        android:layout_marginLeft="8dp"
        app:layout_constraintHorizontal_bias="0.625"></Button>

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/button2"></Button>
</android.support.constraint.ConstraintLayout>
 

Layout Performance

Kinerja aplikasi terpengaruh jika Anda memilih tata letak yang salah. Untuk meningkatkan kinerja UI, Anda perlu mengoptimalkan tata letak dengan bantuan alat yang saya bicarakan di bagian selanjutnya di bawah ini. Tetapi mengikuti praktik terbaik di bawah ini dapat membantu Anda mencapai UI yang berkinerja baik.

Tata letak Nesting menurunkan kinerja. Jadi untuk mengurangi penumpukan, lebih baik menggunakan tata letak relatif atau tata letak kendala.

Layout liner berlapis dengan parameter lebar membuatnya lebih mahal karena ukuran pass terjadi dua kali.

Jika Anda memiliki sekelompok tampilan yang berulang kali digunakan di banyak layar dalam aplikasi Anda, lebih baik untuk memisahkannya dan membuat file tata letak terpisah yang dapat dimasukkan dalam file tata letak utama. Tetapi dalam proses peningkatan usabilitas tata letak, satu kesalahan umum yang banyak dari kita lakukan adalah untuk memperkenalkan tata letak bersarang yang tidak perlu dengan menggunakan kelas tata letak sebagai elemen root.

Untuk mencegah peneluran yang tidak perlu ini, gunakan elemen gabungan sebagai root di file tata letak yang termasuk dalam file tata letak utama.

Membuat tampilan kompleks pasti berdampak pada kinerja UI. Jadi itu adalah praktik yang baik untuk mengurangi kekacauan tidak hanya meningkatkan kinerja tetapi juga pengalaman pengguna. Alih-alih menyimpan jumlah tampilan di satu layar, pindahkan bagian elemen UI ke layar yang berbeda atau berikan menu opsi.

Menggunakan tab memperkenalkan tiga level ke hierarki tampilan Anda jadi lebih baik menghindarinya.

Saat Anda menggunakan tampilan daftar, pastikan bahwa pemrosesan seperti mengambil data, memuat gambar, dan akses jaringan dilakukan di utas latar belakang sehingga Anda akan memperoleh pengalaman gulir yang mulus.

Ini adalah praktik yang baik untuk menggunakan pemegang tampilan, yang memegang referensi ke tampilan, untuk mengurangi jumlah findViewById () panggilan karena panggilan ini mahal.

Delayed Loading of Views

Jika ada sumber daya yang intensif dan jarang menggunakan tampilan kompleks dalam tata letak Anda, lebih baik untuk menunda pemuatan saat dibutuhkan.

Anda dapat menyelesaikan fitur pemuatan pandangan yang tertunda dengan mendefinisikan ViewStub. ViewStub ringan, tampilan nol dimensi dan tidak mahal untuk mengembang.

Dalam definisi ViewStub, Anda perlu mengatur atribut android: tata letak untuk tata letak target xml dan atribut android: inflatedId ke id untuk ditetapkan ke tampilan akar tata letak target.

Ketika tata letak target perlu ditampilkan, Anda perlu memanggil inflate pada tampilan stub.

Optimizing Layouts

Untuk mengoptimalkan tata letak di aplikasi Anda, Anda dapat menggunakan alat monitor perangkat android yang dilengkapi dengan SDK Android. Anda dapat membuka monitor perangkat android di studio android dengan membuka Alat> Android dan mengklik Monitor Perangkat Android. Untuk membuka tampilan hierarki di monitor perangkat android, buka jendela> buka perspektif, lalu pilih tampilan hierarki. Tampilan hierarki dalam monitor perangkat android adalah apa yang kita butuhkan untuk mengoptimalkan tata letak.

Tetapi untuk melihat struktur hierarki tata letak aktivitas saat ini, pertama-tama Anda perlu menjalankan aplikasi Anda di emulator, atau pada perangkat yang tersambung dengan USB dan kemudian buka monitor perangkat android, saat membuka monitor perangkat android, nonaktifkan jendela integrasi-ADB akan muncul. Anda perlu mengklik ya untuk membuka monitor perangkat android.

Buka tampilan hierarki di monitor perangkat android, lalu di tampilan struktur pohon, Anda dapat memilih simpul untuk melihat ukuran, tata letak, dan waktu pengundian. Anda juga dapat melihat waktu untuk semua simpul pohon di bawah simpul yang dipilih.

Tiga titik ditampilkan untuk setiap tampilan untuk semua tampilan di bawah node yang dipilih. Tiga titik merepresentasikan kinerja tampilan selama tiga fase, ukuran, dan tata letak dan gambar masing-masing. Di sini performanya relatif terhadap node lain. Anda perlu menganalisis simpul merah karena merupakan node masalah potensial.

Anda dapat menggunakan alat lint juga untuk menemukan kinerja dan masalah lain dengan tata letak. Anda dapat menjalankan alat lint dari studio android dengan mengklik analisis> periksa kode.

Semoga Bermanfaat & Selamat Mencoba

Share this post