หน้านี้ได้รับการแปลโดย Cloud Translation API

เพิ่มเครื่องมือเลือกลงในแอป

Android มีการควบคุมเพื่อให้ผู้ใช้เลือกเวลาหรือวันที่เป็นกล่องโต้ตอบที่พร้อมใช้งาน เครื่องมือเลือกเหล่านี้มีตัวควบคุมสำหรับการเลือกแต่ละส่วน (ชั่วโมง นาที AM/PM) หรือวันที่ (เดือน วัน ปี)

ตัวอย่างเครื่องมือเลือกเวลาจาก material.io — **รูปที่ 1** การเลือกชั่วโมงในเครื่องมือเลือกปฏิทินในอุปกรณ์เคลื่อนที่

การใช้เครื่องมือเลือกเหล่านี้ช่วยให้มั่นใจได้ว่าผู้ใช้จะเลือกเวลาหรือวันที่ที่ถูกต้อง อยู่ในรูปแบบที่ถูกต้อง และปรับให้เหมาะกับภาษาของผู้ใช้

ตัวอย่างเครื่องมือเลือกวันที่แบบโมดอลจาก material.io — **รูปที่ 2** เครื่องมือเลือกวันที่แบบโมดอล

เราขอแนะนําให้คุณใช้ DialogFragment เพื่อโฮสต์เครื่องมือเลือกเวลาหรือวันที่แต่ละรายการ DialogFragment จะจัดการวงจรกล่องโต้ตอบให้คุณ และให้คุณแสดงเครื่องมือเลือกในการกำหนดค่าเลย์เอาต์ต่างๆ ได้ เช่น ในกล่องโต้ตอบพื้นฐานในโทรศัพท์หรือเป็นส่วนที่ฝังอยู่ในเลย์เอาต์ในหน้าจอขนาดใหญ่

สร้างเครื่องมือเลือกเวลา

หากต้องการแสดง TimePickerDialog โดยใช้ DialogFragment ให้กําหนดคลาสที่เป็นส่วนย่อยซึ่งขยายจาก DialogFragment และแสดงผล TimePickerDialog จากเมธอด onCreateDialog() ของส่วนย่อย

ขยาย DialogFragment สำหรับเครื่องมือเลือกเวลา

หากต้องการกําหนด DialogFragment สําหรับ TimePickerDialog ให้ทําดังนี้

กำหนดเมธอด onCreateDialog() เพื่อแสดงผลอินสแตนซ์ของ TimePickerDialog
ใช้อินเทอร์เฟซ TimePickerDialog.OnTimeSetListener เพื่อรับการเรียกกลับเมื่อผู้ใช้ตั้งเวลา

ตัวอย่างเช่น

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

ดูข้อมูลเกี่ยวกับอาร์กิวเมนต์คอนสตรัคเตอร์ได้จากคลาส TimePickerDialog

ตอนนี้คุณก็แค่ต้องมีเหตุการณ์ที่เพิ่มอินสแตนซ์ของข้อมูลโค้ดนี้ลงในกิจกรรม

แสดงเครื่องมือเลือกเวลา

หลังจากกำหนด DialogFragment แบบเดียวกับในตัวอย่างก่อนหน้านี้แล้ว คุณจะแสดงเครื่องมือเลือกเวลาได้โดยการสร้างอินสแตนซ์ของ DialogFragment และเรียกเมธอด show()

ตัวอย่างเช่น ปุ่มต่อไปนี้จะเรียกเมธอดเพื่อแสดงกล่องโต้ตอบเมื่อแตะ

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

เมื่อผู้ใช้แตะปุ่มนี้ ระบบจะเรียกใช้เมธอดต่อไปนี้

Kotlin

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

Java

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

เมธอดนี้จะเรียก show() ในอินสแตนซ์ใหม่ของ DialogFragment ที่กําหนดไว้ในตัวอย่างก่อนหน้า เมธอด show() ต้องมีอินสแตนซ์ของ FragmentManager และชื่อแท็กที่ไม่ซ้ำกันสำหรับส่วนย่อย

สร้างเครื่องมือเลือกวันที่

การสร้าง DatePickerDialog จะเหมือนกับการสร้าง TimePickerDialog สิ่งที่แตกต่างคือ กล่องโต้ตอบที่คุณสร้างสำหรับแฟรกเมนต์

หากต้องการแสดง DatePickerDialog โดยใช้ DialogFragment ให้กำหนดคลาสแฟรกเมนต์ที่ขยาย DialogFragment และแสดงผล DatePickerDialog จากเมธอด onCreateDialog() ของแฟรกเมนต์

ขยาย DialogFragment สำหรับเครื่องมือเลือกวันที่

หากต้องการกําหนด DialogFragment สําหรับ DatePickerDialog ให้ทําดังนี้

กำหนดเมธอด onCreateDialog() เพื่อแสดงผลอินสแตนซ์ของ DatePickerDialog
ใช้อินเทอร์เฟซ DatePickerDialog.OnDateSetListener เพื่อรับการติดต่อกลับเมื่อผู้ใช้ตั้งวันที่

ตัวอย่างเช่น

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

ดูข้อมูลเกี่ยวกับอาร์กิวเมนต์คอนสตรัคเตอร์ได้จากคลาส DatePickerDialog

คุณเพียงแค่ต้องมีเหตุการณ์ที่เพิ่มอินสแตนซ์ของส่วนนี้ลงในกิจกรรม

แสดงเครื่องมือเลือกวันที่

หลังจากกำหนด DialogFragment ดังตัวอย่างก่อนหน้านี้แล้ว คุณจะสามารถแสดงเครื่องมือเลือกวันที่ได้โดยการสร้างอินสแตนซ์ของ DialogFragment และเรียกใช้ show()

ตัวอย่างเช่น ปุ่มต่อไปนี้จะเรียกเมธอดเพื่อแสดงกล่องโต้ตอบเมื่อแตะ

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

เมื่อผู้ใช้แตะปุ่มนี้ ระบบจะเรียกใช้เมธอดต่อไปนี้

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");
}

เมธอดนี้จะเรียก show() ในอินสแตนซ์ใหม่ของ DialogFragment ที่กําหนดไว้ในตัวอย่างก่อนหน้า เมธอด show() ต้องใช้อินสแตนซ์ของ FragmentManager และชื่อแท็กที่ไม่ซ้ำกันสำหรับข้อมูลโค้ด

ใช้เครื่องมือเลือกที่มีการป้อนข้อความอัตโนมัติ

ในปี 2017 Android ได้เปิดตัวเฟรมเวิร์กการป้อนข้อความอัตโนมัติ ซึ่งช่วยให้ผู้ใช้บันทึกข้อมูลที่สามารถใช้กรอกแบบฟอร์มในแอปต่างๆ ได้ เครื่องมือเลือกจะมีประโยชน์ในสถานการณ์การป้อนข้อความอัตโนมัติโดยให้ UI ที่ช่วยให้ผู้ใช้เปลี่ยนค่าของช่องที่จัดเก็บข้อมูลวันที่หรือเวลาได้ ตัวอย่างเช่น ในแบบฟอร์มบัตรเครดิต เครื่องมือเลือกวันที่ช่วยให้ผู้ใช้ป้อนหรือเปลี่ยนแปลงวันที่หมดอายุของบัตรเครดิตได้

เนื่องจากเครื่องมือเลือกเป็นกล่องโต้ตอบ จึงไม่แสดงในกิจกรรมพร้อมกับช่องอื่นๆ หากต้องการแสดงข้อมูลเครื่องมือเลือกเมื่อเครื่องมือเลือกไม่แสดง ให้ใช้มุมมองอื่น เช่น EditText ซึ่งจะแสดงค่าได้เมื่อเครื่องมือเลือกไม่แสดง

โดยค่าเริ่มต้น ออบเจ็กต์ EditText จะคาดหวังว่าจะมีข้อมูลป้อนข้อความอัตโนมัติประเภท AUTOFILL_TYPE_TEXT ในทางตรงกันข้าม บริการป้อนข้อความอัตโนมัติจะบันทึกข้อมูลเป็น AUTOFILL_TYPE_DATE เพื่อแสดงข้อมูลดังกล่าวอย่างเหมาะสม หากต้องการแก้ปัญหาความไม่สอดคล้องกันของประเภท เราขอแนะนำให้คุณสร้างมุมมองที่กำหนดเองซึ่งรับค่ามาจาก EditText และใช้เมธอดที่จำเป็นในการจัดการค่าประเภท AUTOFILL_TYPE_DATE อย่างถูกต้อง

ทําตามขั้นตอนต่อไปนี้เพื่อสร้างคลาสย่อยของ EditText ที่จัดการค่าประเภท AUTOFILL_TYPE_DATE ได้

สร้างชั้นเรียนที่รับค่าจาก EditText
ใช้เมธอด getAutofillType() ซึ่งแสดงผล AUTOFILL_TYPE_DATE
ใช้เมธอด getAutofillValue() ที่แสดงผลออบเจ็กต์ AutofillValue ที่แสดงวันที่เป็นมิลลิวินาที หากต้องการสร้างออบเจ็กต์ผลลัพธ์ ให้ใช้เมธอด forDate() เพื่อสร้างออบเจ็กต์ AutofillValue
ใช้เมธอด autofill() เมธอดนี้ให้ตรรกะในการจัดการพารามิเตอร์ AutofillValue ซึ่งเป็นประเภท AUTOFILL_TYPE_DATE หากต้องการจัดการพารามิเตอร์ ให้สร้างการแสดงสตริงที่เหมาะสมของพารามิเตอร์ เช่น mm/yyyy ใช้การนําเสนอสตริงเพื่อตั้งค่าพร็อพเพอร์ตี้ text ของมุมมอง
ใช้ฟังก์ชันการทำงานที่แสดงเครื่องมือเลือกเมื่อผู้ใช้ต้องการแก้ไขวันที่ในคลาสย่อยที่กำหนดเองของ EditText มุมมองจะอัปเดตพร็อพเพอร์ตี้ text ด้วยการแสดงค่าเป็นสตริงที่ผู้ใช้เลือกในเครื่องมือเลือก

ดูตัวอย่างคลาสย่อยของ EditText ที่จัดการค่า AUTOFILL_TYPE_DATE ได้ที่ตัวอย่างเฟรมเวิร์กการป้อนข้อความอัตโนมัติใน Java หรือ Kotlin

ดูข้อมูลเพิ่มเติมเกี่ยวกับการพิสูจน์การรองรับการป้อนข้อความอัตโนมัติสำหรับมุมมองที่กำหนดเองได้ที่เฟรมเวิร์กการป้อนข้อความอัตโนมัติ