Membuat class tampilan

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

Tampilan kustom yang dirancang dengan baik akan sama seperti class lainnya yang dirancang dengan baik. Desain ini mengenkapsulasi 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.
  • Memberikan atribut kustom yang dapat ditata dan berfungsi dengan tata letak XML Android.
  • Mengirim peristiwa aksesibilitas.
  • Kompatibel dengan berbagai platform Android.

Framework Android menyediakan sekumpulan 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 memperluas View. Tampilan kustom juga dapat memperluas View secara langsung, atau Anda dapat menghemat waktu dengan menyediakan salah satu subclass tampilan yang ada, seperti Button.

Agar Android Studio dapat berinteraksi dengan tampilan, Anda setidaknya 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, tentukan dalam elemen XML dan kontrol penampilan dan perilakunya dengan atribut elemen. Anda juga dapat menambahkan dan menata gaya tampilan kustom menggunakan XML. Untuk mengaktifkan perilaku ini di tampilan kustom, lakukan hal berikut:

  • Tentukan atribut khusus untuk tampilan Anda dalam elemen resource <declare-styleable> .
  • Tentukan 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 cara mengambil dan menerapkan 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 bernama PieChart. Nama entity yang dapat ditata ini, menurut konvensi, adalah nama yang sama dengan nama class yang menentukan tampilan kustom. Meskipun tidak perlu mengikuti konvensi ini, banyak editor kode populer mengandalkan konvensi penamaan ini untuk memberikan pelengkapan pernyataan.

Setelah menentukan atribut khusus, Anda dapat menggunakannya dalam file XML tata letak seperti atribut bawaan. Satu-satunya perbedaan adalah atribut khusus Anda berada pada namespace yang berbeda. Bukannya termasuk dalam namespace http://schemas.android.com/apk/res/android, atribut tersebut termasuk dalam http://schemas.android.com/apk/res/[your package name]. Misalnya, 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 di atas menggunakan perintah xmlns. Perintah ini menetapkan custom alias ke http://schemas.android.com/apk/res/com.example.customviews namespace. Anda dapat memilih alias apa pun yang diinginkan untuk namespace.

Perhatikan nama tag XML yang menambahkan tampilan kustom ke tata letak. Ini adalah nama yang sepenuhnya memenuhi syarat dari class tampilan kustom. Jika class tampilan Anda adalah inner class, kualifikasikan lebih lanjut dengan nama outer class tampilan. Misalnya, class PieChart memiliki class dalam bernama PieView. Untuk menggunakan atribut khusus dari class ini, Anda menggunakan 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 dimungkinkan untuk membaca nilai dari AttributeSet secara langsung, melakukannya 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 untuk nilai yang telah dihilangkan referensinya dan ditata gayanya.

Compiler resource Android melakukan banyak hal agar Anda dapat mempermudah panggilan obtainStyledAttributes(). Untuk setiap resource <declare-styleable> dalam direktori res/, R.java yang dihasilkan menentukan array ID atribut dan satu set konstanta yang menentukan indeks untuk setiap atribut dalam array. Gunakan konstanta yang telah ditentukan ini untuk membaca atribut dari TypedArray. Berikut adalah 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();
   }
}

Perlu diketahui bahwa objek TypedArray adalah resource bersama dan harus didaur ulang setelah digunakan.

Menambahkan properti dan peristiwa

Atribut adalah cara yang efektif untuk mengontrol perilaku dan tampilan tampilan, tetapi atribut hanya dapat dibaca saat tampilan diinisialisasi. Untuk memberikan perilaku yang dinamis, tampakkan pasangan pengambil dan penyetel properti untuk setiap atribut khusus. 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 penting untuk memastikan bahwa tampilan berperilaku andal. Anda harus membatalkan tampilan setelah melakukan perubahan pada propertinya yang mungkin mengubah penampilannya, sehingga sistem mengetahui bahwa tampilan perlu digambar ulang. Demikian pula, Anda perlu meminta tata letak baru jika properti berubah dengan cara yang dapat 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 yang disebut OnCurrentItemChanged untuk memberi tahu pemroses bahwa pengguna memutar diagram lingkaran untuk berfokus pada irisan lingkaran baru.

Properti dan peristiwa sering kali lupa ditampilkan, terutama jika Anda 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 mengekspos properti apa pun yang memengaruhi tampilan atau perilaku tampilan kustom yang terlihat.

Desain untuk aksesibilitas

Tampilan kustom harus mendukung berbagai pengguna. Hal ini termasuk pengguna difabel yang tidak dapat melihat atau menggunakan layar sentuh. Untuk mendukung pengguna difabel, lakukan hal berikut:

  • Beri label pada kolom input menggunakan atribut 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.