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

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

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

วันที่

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

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

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

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

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

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

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

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

โปรดดูชั้นเรียน TimePickerDialog สำหรับข้อมูลเกี่ยวกับ อาร์กิวเมนต์ตัวสร้าง

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

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

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

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

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

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

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

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 เพื่อรับการติดต่อกลับเมื่อผู้ใช้กำหนดวันที่

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

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

โปรดดู DatePickerDialog สำหรับข้อมูลเกี่ยวกับอาร์กิวเมนต์ของตัวสร้าง

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

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

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

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

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

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

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

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

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

Android เปิดตัวในปี 2017 เฟรมเวิร์กการป้อนข้อความอัตโนมัติ ซึ่งช่วยให้ ผู้ใช้จะบันทึกข้อมูลที่สามารถใช้กรอกแบบฟอร์มในแอปต่างๆ เครื่องมือเลือก อาจมีประโยชน์ในสถานการณ์การป้อนข้อความอัตโนมัติด้วยการแสดง 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

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