Membuat class tampilan

Mencoba cara Compose

Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara bekerja dengan tata letak di Compose.

Tata Letak Kustom di Compose →

Tampilan kustom yang dirancang dengan baik akan sangat mirip dengan semua class lain yang dirancang dengan baik. Desain yang baik ini mencakup serangkaian fungsionalitas tertentu dengan antarmuka yang sederhana, penggunaan CPU dan memori secara efisien, dan sebagainya. Selain menjadi class yang dirancang dengan baik, tampilan kustom harus melakukan hal berikut:

• Sesuai dengan standar Android.
• Memberikan atribut kustom yang dapat ditata yang 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. Pelajaran ini membahas cara menggunakan framework Android untuk membuat fungsionalitas inti untuk sebuah class tampilan.

Anda dapat menemukan informasi tambahan di Komponen tampilan kustom.

Menyediakan subclass tampilan

Semua class tampilan yang ditentukan dalam framework Android menyediakan View. Tampilan kustom juga dapat menyediakan 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, setidak-tidaknya Anda harus menyediakan konstruktor yang menggunakan objek Context dan AttributeSet sebagai parameter. Konstruktor ini memungkinkan layout editor untuk membuat dan mengedit instance tampilan Anda.

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

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

Menentukan atribut kustom

Untuk menambahkan View bawaan ke antarmuka pengguna, tentukan dalam elemen XML dan kontrol tampilan serta perilakunya dengan atribut elemen. Anda juga dapat menambahkan dan menata tampilan kustom menggunakan XML. Untuk mengaktifkan perilaku ini pada tampilan kustom, lakukan hal berikut:

• Menetapkan atribut khusus untuk tampilan Anda dalam elemen resource <declare-styleable> .
• Menentukan nilai atribut dalam tata letak XML Anda.
• Mengambil nilai atribut saat runtime.
• Menerapkan 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 pada waktu proses.

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 kustom, showText dan labelPosition, yang termasuk dalam entity yang dapat ditata bernama PieChart. Nama entity yang dapat ditata ini, menurut konvensi, sama dengan nama class yang menentukan tampilan kustom. Meskipun tidak perlu mengikuti konvensi ini, banyak editor kode populer yang bergantung pada konvensi penamaan ini untuk memberikan penyelesaian pernyataan.

Setelah menentukan atribut kustom, Anda dapat menggunakannya dalam file XML tata letak seperti atribut bawaan atribut. Satu-satunya perbedaan adalah atribut kustom Anda termasuk dalam namespace berbeda. Bukannya termasuk dalam namespace http://schemas.android.com/apk/res/android, atribut kustom 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>

Untuk menghindari keharusan mengulang URI namespace yang panjang, contoh di atas menggunakan perintah xmlns Perintah ini menetapkan alias custom ke namespace http://schemas.android.com/apk/res/com.example.customviews. Anda dapat memilih alias mana pun yang diinginkan untuk namespace Anda.

Perhatikan nama tag XML yang menambahkan tampilan kustom ke tata letak. Nama ini adalah nama class yang sepenuhnya memenuhi syarat untuk class tampilan kustom. Jika class tampilan Anda merupakan class dalam, kualifikasikan lebih lanjut dengan nama class luar tampilan. Misalnya, class PieChart memiliki class dalam bernama PieView. Untuk menggunakan atribut kustom dari class ini, Anda harus menggunakan tag com.example.customviews.charting.PieChart$PieView.

Menerapkan atribut kustom

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 akan memiliki beberapa kelemahan:

• Referensi resource dalam nilai atribut tidak ditetapkan.
• Gaya tidak diterapkan.

Sebagai gantinya, teruskan AttributeSet ke obtainStyledAttributes(). Metode ini mengembalikan a TypedArray array of values that are already dereferenced and styled.

Compiler resource Android melakukan banyak hal untuk memudahkan Anda membuat panggilan obtainStyledAttributes() lebih mudah. Untuk setiap <declare-styleable> resource dalam direktori res/, R.java yang dihasilkan menentukan array ID atribut dan seperangkat konstanta yang menentukan indeks untuk setiap atribut dalam array. Gunakan konstanta yang telah ditentukan ini untuk membaca atribut dari TypedArray. Contoh di bawah menunjukkan cara class PieChart membaca atributnya:

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()
        }
    }
}

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 efektif untuk mengontrol perilaku dan gaya tampilan, tetapi atribut hanya dapat dibaca jika tampilan diinisialisasi. Untuk memberikan perilaku yang dinamis, tampakkan pasangan pengambil dan penyetel properti untuk setiap atribut kustom. Cuplikan berikut menunjukkan cara PieChart memperlihatkan properti yang disebut showText:

fun isShowText(): Boolean {
    return mShowText
}

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

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 keandalan perilaku tampilan. Anda perlu membatalkan tampilan setelah adanya perubahan pada propertinya yang dapat mengubah gayanya, sehingga sistem tahu bahwa tampilan perlu digambar ulang. Demikian juga, Anda perlu meminta tata letak baru jika properti berubah 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, menampilkan peristiwa khusus yang disebut OnCurrentItemChanged untuk memberi tahu pemroses bahwa pengguna telah memutar diagram lingkaran untuk berfokus pada irisan lingkaran baru.PieChart

Properti dan peristiwa sering lupa ditampakkan, terutama jika Anda adalah satu-satunya pengguna tampilan kustom. Dengan meluangkan waktu untuk menentukan antarmuka tampilan secara cermat, Anda akan bisa mengurangi biaya perawatan di masa depan. Aturan yang perlu diikuti adalah selalu tampakkan properti apa pun yang memengaruhi gaya atau perilaku yang terlihat untuk tampilan kustom Anda.

Mendesain untuk aksesibilitas

Tampilan kustom Anda harus mendukung berbagai jenis pengguna. Pengguna tersebut mencakup pengguna dengan difabel yang tidak bisa melihat atau menggunakan layar sentuh. Untuk mendukung pengguna difabel, lakukan hal berikut:

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

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