Menambahkan alat pilih ke aplikasi

Mencoba cara Compose

Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menambahkan komponen di Compose.

Alat pilih 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).

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

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 pada dialog dasar pada handset atau sebagai bagian tersemat dari tata letak di layar besar.

Membuat alat pilih waktu

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

Memperluas DialogFragment untuk alat pilih waktu

Untuk menentukan DialogFragment untuk TimePickerDialog, lakukan hal berikut:

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

Berikut contohnya:

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.
    }
}

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 alat pilih waktu

Setelah menentukan DialogFragment seperti 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:

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

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

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

Membuat alat pilih tanggal

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

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

Memperluas DialogFragment untuk alat pilih 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:

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.
    }
}

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 informasi tentang argumen konstruktor.

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

Menampilkan alat pilih 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:

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

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

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

Menggunakan alat pilih dengan isi otomatis

Pada tahun 2017, Android memperkenalkan framework IsiOtomatis, yang memungkinkan pengguna menyimpan data yang dapat digunakan untuk mengisi formulir di aplikasi yang berbeda. Alat pilih dapat berguna dalam skenario IsiOtomatis dengan menyediakan UI yang memungkinkan pengguna mengubah nilai kolom yang menyimpan data tanggal dan waktu. Misalnya, dalam formulir kartu kredit, alat pilih 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 menginginkan data isi otomatis jenis AUTOFILL_TYPE_TEXT. Sebaliknya, layanan IsiOtomatis menyimpan data sebagai AUTOFILL_TYPE_DATE untuk membuat representasi data yang sesuai. Untuk menyelesaikan masalah inkonsistensi pada beberapa jenis isiotomatis, sebaiknya Anda membuat tampilan kustom yang mewarisi EditText dan menerapkan metode yang diperlukan untuk menangani nilai berjenis AUTOFILL_TYPE_DATE dengan tepat.

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 membuat objek AutofillValue
4. Terapkan 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 akan memperbarui properti text dengan representasi string dari nilai yang dipilih pengguna pada alat pilih tanggal.

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

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