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

ลองใช้วิธีแบบ Compose
Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีเพิ่มคอมโพเนนต์ใน Compose
เครื่องมือเลือกวันที่ →

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

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

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

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

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

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

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

ขยาย 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

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

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

หลังจากกำหนด 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 และชื่อแท็กที่ไม่ซ้ำกันสำหรับ Fragment

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

การสร้าง DatePickerDialog ก็เหมือนกับการสร้างTimePickerDialog ความแตกต่างคือกล่องโต้ตอบ ที่คุณสร้างขึ้นสำหรับ Fragment

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

ขยาย 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

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

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

หลังจากกำหนด 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 และชื่อแท็กที่ไม่ซ้ำกันสำหรับ Fragment

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

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

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

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

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

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

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

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