Membuat class tampilan

Mencoba cara Compose
Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menggunakan tata letak di Compose.
Tata Letak Kustom di Compose →

Tampilan kustom yang didesain dengan baik akan serupa dengan class lain yang dirancang dengan baik. Ini mengenkapsulasi serangkaian fungsionalitas dengan antarmuka yang sederhana, menggunakan CPU dan memori secara efisien, dan sebagainya. Di beberapa selain menjadi yang dirancang dengan baik, tampilan kustom harus melakukan hal berikut:

  • Sesuai dengan standar Android.
  • Berikan atribut kustom yang dapat ditata gayanya dan berfungsi dengan tata letak XML Android.
  • Mengirim peristiwa aksesibilitas.
  • Kompatibel dengan berbagai platform Android.

Framework Android menyediakan kumpulan class dasar dan tag XML untuk membantu Anda membuat tampilan yang memenuhi semua ini lainnya. Tutorial ini membahas cara menggunakan framework Android untuk membuat inti fungsionalitas tampilan .

Anda dapat menemukan informasi di Komponen tampilan kustom.

Membuat subclass tampilan

Semua class tampilan yang didefinisikan dalam framework Android memperluas View. Nama tampilan kustom juga dapat memperluas View secara langsung, atau Anda dapat menghemat waktu dengan memperpanjang tampilan yang ada subclass, seperti Button.

Agar Android Studio dapat berinteraksi dengan tampilan Anda, setidaknya Anda harus menyediakan konstruktor yang membutuhkan Context dan objek AttributeSet sebagai parameter. Konstruktor ini memungkinkan layout editor untuk membuat dan mengedit instance tampilan Anda.

Kotlin

class PieChart(context: Context, attrs: AttributeSet) : View(context, attrs)

Java

class PieChart extends View {
    public PieChart(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
}

Menentukan atribut khusus

Untuk menambahkan View bawaan ke antarmuka pengguna Anda, tentukan dalam elemen XML dan mengontrolnya penampilan dan perilaku dengan atribut elemen. Anda juga dapat menambahkan dan menata gaya menggunakan XML. Kepada mengaktifkan perilaku ini dalam tampilan kustom Anda, lakukan hal berikut:

  • Tentukan atribut khusus untuk tampilan Anda dalam elemen resource <declare-styleable> .
  • Tetapkan nilai untuk atribut dalam tata letak XML Anda.
  • Mengambil nilai atribut saat runtime.
  • Terapkan nilai atribut yang diambil ke tampilan Anda.

Bagian ini membahas cara menentukan atribut kustom dan menentukan nilainya. Bagian selanjutnya membahas mengambil dan menerapkan nilai tersebut pada runtime.

Untuk menentukan atribut kustom, tambahkan resource <declare-styleable> ke project Anda. Biasanya, sumber daya ini ditempatkan dalam sebuah File res/values/attrs.xml. Berikut contoh file attrs.xml: 

<resources>
   <declare-styleable name="PieChart">
       <attr name="showText" format="boolean" />
       <attr name="labelPosition" format="enum">
           <enum name="left" value="0"/>
           <enum name="right" value="1"/>
       </attr>
   </declare-styleable>
</resources>

Kode ini mendeklarasikan dua atribut khusus, showText dan labelPosition, yang termasuk dalam gaya visual entitas bernama PieChart. Nama entity yang dapat ditata gayanya, menurut konvensi, sama sebagai nama class yang mendefinisikan tampilan kustom. Meskipun tidak perlu mengikuti konvensi ini, banyak kode populer editor bergantung pada konvensi penamaan ini untuk memberikan pelengkapan pernyataan.

Setelah mendefinisikan atribut khusus, Anda bisa menggunakannya dalam file XML tata letak seperti . Satu-satunya perbedaannya adalah atribut khusus Anda milik ruang nama yang berbeda. Alih-alih menjadi milik ke namespace http://schemas.android.com/apk/res/android, file tersebut milik http://schemas.android.com/apk/res/[your package name]. Misalnya, berikut adalah cara menggunakan atribut yang ditetapkan untuk PieChart: 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:custom="http://schemas.android.com/apk/res-auto">
 <com.example.customviews.charting.PieChart
     custom:showText="true"
     custom:labelPosition="left" />
</LinearLayout>

Agar tidak perlu mengulang URI namespace yang panjang, contoh ini menggunakan atribut Perintah xmlns. Perintah ini menetapkan custom alias ke namespace http://schemas.android.com/apk/res/com.example.customviews. Anda dapat memilih alias yang diinginkan untuk namespace Anda.

Perhatikan nama tag XML yang menambahkan tampilan kustom ke tata letak. AI generatif adalah nama yang memenuhi syarat dari class tampilan kustom. Jika class tampilan Anda adalah inner class, kualifikasikan lebih lanjut dengan nama class luar tampilan. Misalnya, Class PieChart memiliki class dalam yang disebut PieView. Untuk menggunakan atribut khusus dari class ini, Anda gunakan tag com.example.customviews.charting.PieChart$PieView.

Menerapkan atribut khusus

Jika tampilan dibuat dari tata letak XML, semua atribut dalam tag XML akan dibaca dari referensi memaketkan dan diteruskan ke konstruktor tampilan sebagai AttributeSet. Meskipun dapat membaca nilai dari AttributeSet secara langsung, sehingga memiliki beberapa kekurangan:

  • Referensi resource dalam nilai atribut tidak di-resolve.
  • Gaya tidak diterapkan.

Sebagai gantinya, teruskan AttributeSet ke obtainStyledAttributes(). Metode ini meneruskan kembali sebuah TypedArray array nilai-nilai yang tidak direferensikan dan telah ditata.

Compiler resource Android melakukan banyak hal untuk Anda guna melakukan panggilan obtainStyledAttributes() semuanya. Untuk setiap <declare-styleable> resource di direktori res/, R.java yang dihasilkan akan menentukan array atribut ID dan serangkaian yang menentukan indeks untuk setiap atribut dalam array. Anda menggunakan model konstanta untuk membaca atribut dari TypedArray. Berikut caranya class PieChart membaca atributnya:

Kotlin

init {
    context.theme.obtainStyledAttributes(
            attrs,
            R.styleable.PieChart,
            0, 0).apply {

        try {
            mShowText = getBoolean(R.styleable.PieChart_showText, false)
            textPos = getInteger(R.styleable.PieChart_labelPosition, 0)
        } finally {
            recycle()
        }
    }
}

Java

public PieChart(Context context, AttributeSet attrs) {
   super(context, attrs);
   TypedArray a = context.getTheme().obtainStyledAttributes(
        attrs,
        R.styleable.PieChart,
        0, 0);

   try {
       mShowText = a.getBoolean(R.styleable.PieChart_showText, false);
       textPos = a.getInteger(R.styleable.PieChart_labelPosition, 0);
   } finally {
       a.recycle();
   }
}

Perhatikan bahwa objek TypedArray adalah referensi bersama dan harus didaur ulang setelah digunakan.

Menambahkan properti dan peristiwa

Atribut adalah cara yang ampuh untuk mengontrol perilaku dan tampilan tampilan, tetapi hanya dapat dibaca saat tampilan diinisialisasi. Untuk memberikan perilaku dinamis, ekspos pengambil properti dan pasangan penyetel untuk setiap atribut khusus. Cuplikan berikut menunjukkan cara PieChart mengekspos properti disebut showText:

Kotlin

fun isShowText(): Boolean {
    return mShowText
}

fun setShowText(showText: Boolean) {
    mShowText = showText
    invalidate()
    requestLayout()
}

Java

public boolean isShowText() {
   return mShowText;
}

public void setShowText(boolean showText) {
   mShowText = showText;
   invalidate();
   requestLayout();
}

Perhatikan bahwa setShowText memanggil invalidate() dan requestLayout(). Panggilan ini sangat penting untuk memastikan perilaku tampilan dapat diandalkan. Anda perlu untuk membatalkan tampilan setelah ada perubahan pada propertinya yang mungkin mengubah tampilan, sehingga mengetahui bahwa sistem tersebut perlu digambar ulang. Demikian pula, Anda perlu meminta tata letak baru jika suatu properti berubah dengan cara yang mungkin mempengaruhi ukuran atau bentuk tampilan. Melupakan panggilan metode ini dapat menyebabkan sulit ditemukan serangga kecil.

Tampilan kustom juga harus mendukung pemroses peristiwa untuk mengomunikasikan peristiwa penting. Sebagai PieChart, mengekspos peristiwa khusus bernama OnCurrentItemChanged untuk memberi tahu pemroses bahwa pengguna memutar bagan pai yang berfokus pada irisan pai baru.

Properti dan peristiwa sering lupa ditampilkan, terutama jika Anda satu-satunya pengguna tampilan kustom. Meluangkan waktu untuk menentukan antarmuka tampilan Anda dengan cermat akan mengurangi pemeliharaan di masa mendatang untuk biaya operasional. Aturan yang baik untuk diikuti adalah selalu mengekspos properti apa pun yang memengaruhi elemen penampilan atau perilaku tampilan kustom Anda.

Desain untuk aksesibilitas

Tampilan kustom harus mendukung berbagai pengguna. Ini termasuk pengguna dengan disabilitas yang mencegah mereka melihat atau menggunakan layar sentuh. Untuk mendukung pengguna penyandang disabilitas, lakukan hal berikut:

  • Melabeli kolom input menggunakan android:contentDescription .
  • Mengirim peristiwa aksesibilitas dengan memanggil sendAccessibilityEvent() jika diperlukan.
  • Mendukung pengontrol alternatif, seperti D-pad atau trackball.

Untuk informasi selengkapnya tentang membuat tampilan yang dapat diakses, lihat Membuat aplikasi lebih mudah diakses.