Menambahkan alat pilih ke aplikasi

Mencoba cara Compose
Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menambahkan komponen di Compose.
Pemilih tanggal →

Android menyediakan kontrol bagi pengguna untuk memilih waktu atau tanggal sebagai dialog yang siap digunakan. Alat pilih ini menyediakan kontrol untuk memilih setiap bagian waktu (jam, menit, AM/PM) atau tanggal (bulan, hari, tahun).

Contoh pemilih waktu dari material.io
Gambar 1. Pilihan jam di pemilih kalender seluler.

Menggunakan alat pilih ini membantu memastikan bahwa pengguna dapat memilih waktu atau tanggal.yang valid, diformat dengan benar, dan disesuaikan dengan bahasa lokal pengguna.

Contoh pemilih tanggal modal dari material.io
Gambar 2. Pemilih tanggal modal.

Sebaiknya gunakan DialogFragment untuk menghosting setiap alat pilih waktu atau tanggal. DialogFragment mengelola siklus proses dialog untuk Anda dan memungkinkan Anda menampilkan alat pilih dalam konfigurasi tata letak yang berbeda, seperti dalam dialog dasar di handset atau sebagai bagian tersemat dari tata letak di layar besar.

Membuat pemilih waktu

Untuk menampilkan TimePickerDialog menggunakan DialogFragment, tentukan class fragmen yang memperluas DialogFragment dan menampilkan TimePickerDialog dari metode onCreateDialog() fragmen.

Memperluas DialogFragment untuk pemilih waktu

Untuk menentukan DialogFragment untuk TimePickerDialog, lakukan hal berikut:

  • Menentukan metode onCreateDialog() untuk menampilkan instance TimePickerDialog.
  • Menerapkan antarmuka TimePickerDialog.OnTimeSetListener untuk menerima callback saat pengguna menyetel waktu.

Berikut contohnya:

Kotlin

class TimePickerFragment : DialogFragment(), TimePickerDialog.OnTimeSetListener {

    override fun onCreateDialog(savedInstanceState: Bundle): Dialog {
        // Use the current time as the default values for the picker.
        val c = Calendar.getInstance()
        val hour = c.get(Calendar.HOUR_OF_DAY)
        val minute = c.get(Calendar.MINUTE)

        // Create a new instance of TimePickerDialog and return it.
        return TimePickerDialog(activity, this, hour, minute, DateFormat.is24HourFormat(activity))
    }

    override fun onTimeSet(view: TimePicker, hourOfDay: Int, minute: Int) {
        // Do something with the time the user picks.
    }
}

Java

public static class TimePickerFragment extends DialogFragment
                            implements TimePickerDialog.OnTimeSetListener {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // Use the current time as the default values for the picker.
        final Calendar c = Calendar.getInstance();
        int hour = c.get(Calendar.HOUR_OF_DAY);
        int minute = c.get(Calendar.MINUTE);

        // Create a new instance of TimePickerDialog and return it.
        return new TimePickerDialog(getActivity(), this, hour, minute,
                DateFormat.is24HourFormat(getActivity()));
    }

    public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
        // Do something with the time the user picks.
    }
}

Lihat class TimePickerDialog untuk informasi tentang argumen konstruktor.

Sekarang Anda hanya memerlukan peristiwa yang menambahkan instance fragmen ini ke aktivitas Anda.

Menampilkan pemilih waktu

Setelah menentukan DialogFragment seperti yang ada dalam contoh sebelumnya, Anda dapat menampilkan alat pilih waktu dengan membuat instance DialogFragment dan memanggil metode show().

Misalnya, berikut adalah tombol yang, saat diketuk, memanggil metode untuk menampilkan dialog:

<Button
    android:id="@+id/pickTime"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Pick time" />

Saat pengguna mengetuk tombol ini, sistem akan memanggil metode berikut:

Kotlin

findViewById<Button>(R.id.pickTime).setOnClickListener {
    TimePickerFragment().show(supportFragmentManager, "timePicker")
}

Java

findViewById<Button>(R.id.pickTime).setOnClickListener {
    TimePickerFragment().show(supportFragmentManager, "timePicker");
}

Metode ini memanggil show() pada instance DialogFragment baru yang ditentukan dalam contoh sebelumnya. Metode show() memerlukan instance FragmentManager dan nama tag yang unik untuk fragmen tersebut.

Membuat pemilih tanggal

Membuat DatePickerDialog seperti membuat TimePickerDialog. Perbedaannya adalah dialog yang Anda buat untuk fragmen.

Untuk menampilkan DatePickerDialog menggunakan DialogFragment, tentukan class fragmen yang memperluas DialogFragment dan tampilkan DatePickerDialog dari metode onCreateDialog() fragmen.

Memperluas DialogFragment untuk pemilih tanggal

Untuk menentukan DialogFragment untuk DatePickerDialog, lakukan hal berikut:

  • Tentukan metode onCreateDialog() untuk menampilkan instance DatePickerDialog.
  • Terapkan antarmuka DatePickerDialog.OnDateSetListener untuk menerima callback saat pengguna menyetel tanggal.

Berikut contohnya:

Kotlin

class DatePickerFragment : DialogFragment(), DatePickerDialog.OnDateSetListener {

    override fun onCreateDialog(savedInstanceState: Bundle): Dialog {
        // Use the current date as the default date in the picker.
        val c = Calendar.getInstance()
        val year = c.get(Calendar.YEAR)
        val month = c.get(Calendar.MONTH)
        val day = c.get(Calendar.DAY_OF_MONTH)

        // Create a new instance of DatePickerDialog and return it.
        return DatePickerDialog(requireContext(), this, year, month, day)

    }

    override fun onDateSet(view: DatePicker, year: Int, month: Int, day: Int) {
        // Do something with the date the user picks.
    }
}

Java

public static class DatePickerFragment extends DialogFragment
                            implements DatePickerDialog.OnDateSetListener {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // Use the current date as the default date in the picker.
        final Calendar c = Calendar.getInstance();
        int year = c.get(Calendar.YEAR);
        int month = c.get(Calendar.MONTH);
        int day = c.get(Calendar.DAY_OF_MONTH);

        // Create a new instance of DatePickerDialog and return it.
        return new DatePickerDialog(requireContext(), this, year, month, day);
    }

    public void onDateSet(DatePicker view, int year, int month, int day) {
        // Do something with the date the user picks.
    }
}

Lihat class DatePickerDialog untuk mengetahui informasi tentang argumen konstruktor.

Anda hanya memerlukan peristiwa yang menambahkan instance fragmen ini ke aktivitas Anda.

Menampilkan pemilih tanggal

Setelah menentukan DialogFragment seperti contoh sebelumnya, Anda dapat menampilkan alat pilih tanggal dengan membuat instance DialogFragment dan memanggil show().

Misalnya, berikut adalah tombol yang, saat diketuk, memanggil metode untuk menampilkan dialog:

<Button
    android:id="@+id/pickDate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Pick date"/>

Saat pengguna mengetuk tombol ini, sistem akan memanggil metode berikut:

Kotlin

findViewById<Button>(R.id.pickDate).setOnClickListener {
    val newFragment = DatePickerFragment()
    newFragment.show(supportFragmentManager, "datePicker")
}

Java

findViewById<Button>(R.id.pickDate).setOnClickListener {
    val newFragment = DatePickerFragment();
    newFragment.show(supportFragmentManager, "datePicker");
}

Metode ini memanggil show() pada instance DialogFragment baru yang ditentukan dalam contoh sebelumnya. Metode show() memerlukan instance FragmentManager dan nama tag yang unik untuk fragmen.

Menggunakan alat pilih dengan isi otomatis

Pada tahun 2017, Android memperkenalkan Framework isi otomatis, yang memungkinkan pengguna menyimpan data yang dapat digunakan untuk mengisi formulir di aplikasi yang berbeda. Alat pilih dapat berguna dalam skenario isi otomatis dengan menyediakan UI yang memungkinkan pengguna mengubah nilai kolom yang menyimpan data tanggal atau waktu. Misalnya, dalam formulir kartu kredit, pemilih tanggal memungkinkan pengguna memasukkan atau mengubah tanggal habis masa berlaku kartu kredit.

Karena berbentuk dialog, alat pilih tidak ditampilkan dalam aktivitas beserta kolom lainnya. Untuk menampilkan data alat pilih saat alat pilih tidak terlihat, Anda dapat menggunakan tampilan lain, seperti EditText, yang dapat menampilkan nilai saat alat pilih tidak terlihat.

Objek EditText secara native memperkirakan data isi otomatis jenis AUTOFILL_TYPE_TEXT. Sebaliknya, layanan isi otomatis menyimpan data sebagai AUTOFILL_TYPE_DATE untuk membuat representasi data yang sesuai. Untuk mengatasi inkonsistensi dalam jenis, sebaiknya Anda membuat tampilan kustom yang diturunkan dari EditText dan menerapkan metode yang diperlukan untuk menangani nilai berjenis AUTOFILL_TYPE_DATE dengan benar.

Lakukan langkah-langkah berikut untuk membuat subclass EditText yang dapat menangani nilai berjenis AUTOFILL_TYPE_DATE:

  1. Buat class yang mewarisi EditText.
  2. Terapkan metode getAutofillType(), yang menampilkan AUTOFILL_TYPE_DATE.
  3. Terapkan metode getAutofillValue(), yang menampilkan objek AutofillValue yang merepresentasikan tanggal dalam milidetik. Untuk membuat objek yang ditampilkan, gunakan metode forDate() untuk menghasilkan objek AutofillValue.
  4. Implementasikan metode autofill(). Metode ini menyediakan logika untuk menangani parameter AutofillValue, yang berjenis AUTOFILL_TYPE_DATE. Untuk menangani parameter tersebut, buat representasi string yang tepat, seperti mm/yyyy. Gunakan representasi string untuk menetapkan properti text tampilan Anda.
  5. Terapkan fungsionalitas yang menampilkan alat pilih saat pengguna ingin mengedit tanggal di subclass kustom EditText. Tampilan ini memperbarui properti text dengan representasi string dari nilai yang dipilih pengguna pada alat pilih.

Untuk contoh subclass EditText yang menangani nilai AUTOFILL_TYPE_DATE, lihat contoh Framework Isi Otomatis di Java atau Kotlin.

Untuk mempelajari lebih lanjut cara membuktikan dukungan isi otomatis untuk tampilan kustom Anda, lihat Framework isi otomatis.