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. Class ini mencakup serangkaian fungsi tertentu dengan antarmuka yang sederhana, menggunakan CPU dan memori secara efisien, dan sebagainya. Selain menjadi class yang didesain 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 serangkaian class dasar dan tag XML untuk membantu Anda membuat tampilan yang memenuhi semua persyaratan ini. Tutorial ini membahas cara menggunakan framework Android untuk membuat fungsi inti class tampilan.

Anda dapat menemukan informasi tambahan di Komponen tampilan kustom.

Membuat subclass tampilan

Semua class tampilan yang ditentukan dalam framework Android menyediakan View. Tampilan kustom Anda juga dapat memperluas View secara langsung, atau Anda dapat menghemat waktu dengan memperluas salah satu subclass tampilan yang ada, seperti Button.

Agar Android Studio dapat berinteraksi dengan tampilan Anda, setidaknya Anda harus menyediakan konstruktor yang menggunakan objek Context dan 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 kontrol tampilan dan perilakunya dengan atribut elemen. Anda juga dapat menambahkan dan menata gaya tampilan kustom menggunakan XML. Untuk 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 pengambilan dan penerapan nilai tersebut saat runtime.

Untuk menentukan atribut kustom, tambahkan resource <declare-styleable> ke project Anda. Biasanya resource ini ditempatkan dalam file res/values/attrs.xml. Berikut adalah 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 entity yang dapat ditata gayanya bernama PieChart. Nama entity yang dapat ditata gayanya, menurut konvensi, sama dengan nama class yang menentukan tampilan kustom. Meskipun tidak perlu mengikuti konvensi ini, banyak editor kode populer bergantung pada konvensi penamaan ini untuk memberikan penyelesaian pernyataan.

Setelah menentukan atribut khusus, Anda dapat menggunakannya dalam file XML tata letak seperti atribut bawaan. Satu-satunya perbedaan adalah atribut khusus Anda termasuk dalam namespace yang berbeda. Bukannya termasuk dalam namespace http://schemas.android.com/apk/res/android, atribut ini termasuk dalam http://schemas.android.com/apk/res/[your package name]. Sebagai contoh, berikut adalah cara menggunakan atribut yang ditentukan 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 mengulangi URI namespace yang panjang, contoh ini menggunakan perintah xmlns. Perintah ini menetapkan custom alias ke http://schemas.android.com/apk/res/com.example.customviews namespace. Anda dapat memilih alias yang diinginkan untuk namespace Anda.

Perhatikan nama tag XML yang menambahkan tampilan kustom ke tata letak. Ini adalah nama class tampilan kustom yang sepenuhnya memenuhi syarat. Jika class tampilan Anda adalah inner class, kualifikasikan lebih lanjut dengan nama outer class tampilan. Misalnya, class PieChart memiliki class dalam yang disebut PieView. Untuk menggunakan atribut khusus dari class ini, 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 paket resource dan diteruskan ke konstruktor tampilan sebagai AttributeSet. Meskipun memungkinkan untuk membaca nilai dari AttributeSet secara langsung, melakukan hal ini memiliki beberapa kelemahan:

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

Sebagai gantinya, teruskan AttributeSet ke obtainStyledAttributes(). Metode ini mengembalikan array TypedArray dari nilai yang sudah ditata dan dibatalkan referensinya.

Compiler resource Android melakukan banyak hal untuk Anda agar panggilan obtainStyledAttributes() menjadi lebih mudah. Untuk setiap resource <declare-styleable> dalam direktori res/, R.java yang dihasilkan menentukan array ID atribut dan sekumpulan konstanta yang menentukan indeks untuk setiap atribut dalam array. Gunakan konstanta yang telah ditentukan sebelumnya untuk membaca atribut dari TypedArray. Berikut cara 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 resource bersama dan harus didaur ulang setelah digunakan.

Menambahkan properti dan peristiwa

Atribut adalah cara andal untuk mengontrol perilaku dan tampilan tampilan, tetapi hanya dapat dibaca saat tampilan diinisialisasi. Untuk memberikan perilaku yang dinamis, ekspos pasangan pengambil dan penyetel properti untuk setiap atribut kustom. Cuplikan berikut menunjukkan cara PieChart mengekspos properti yang 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 yang andal. Anda perlu membatalkan tampilan setelah ada perubahan pada propertinya yang mungkin mengubah tampilannya, sehingga sistem tahu bahwa tampilan perlu digambar ulang. Demikian pula, Anda perlu meminta tata letak baru jika properti berubah dengan cara yang mungkin memengaruhi ukuran atau bentuk tampilan. Melupakan panggilan metode ini dapat menyebabkan bug yang sulit ditemukan.

Tampilan kustom juga harus mendukung pemroses peristiwa untuk mengomunikasikan peristiwa penting. Misalnya, PieChart menampilkan peristiwa kustom bernama OnCurrentItemChanged untuk memberi tahu pemroses bahwa pengguna telah memutar diagram lingkaran untuk berfokus pada irisan lingkaran baru.

Properti dan peristiwa sering lupa ditampilkan, terutama jika Anda adalah satu-satunya pengguna tampilan kustom. Dengan meluangkan waktu untuk menentukan antarmuka tampilan secara cermat, Anda dapat mengurangi biaya pemeliharaan di masa mendatang. Aturan yang baik untuk diikuti adalah selalu perlihatkan properti apa pun yang memengaruhi tampilan atau perilaku yang terlihat dari tampilan kustom Anda.

Desain untuk aksesibilitas

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

  • Beri label kolom input menggunakan atribut android:contentDescription.
  • Kirim 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.