การป้อนข้อมูลด้วยสไตลัสในช่องข้อความ

ลองใช้วิธีเขียน
Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนําสําหรับ Android ดูวิธีใช้ปากกาสไตลัสในเครื่องมือเขียน

Android 14 (API ระดับ 34) ขึ้นไปช่วยให้ผู้ใช้เขียนลงในช่องป้อนข้อความในแอปใดก็ได้โดยใช้สไตลัส ช่องป้อนข้อความของ Android ซึ่งรวมถึงคอมโพเนนต์ EditText และวิดเจ็ตข้อความ WebView จะรองรับการป้อนด้วยปากกาสไตลัสโดยค่าเริ่มต้น

อย่างไรก็ตาม หากแอปต้องใช้ช่องป้อนข้อความที่กำหนดเอง (ดูเครื่องมือแก้ไขข้อความที่กำหนดเอง) หรือมีเลย์เอาต์ที่ซับซ้อนโดยมีช่องป้อนข้อความวางซ้อนบนพื้นผิวการวาด คุณจะต้องปรับแต่งแอป

รูปที่ 1 การป้อนด้วยลายมือโดยใช้สไตลัส

EditText

ระบบจะเปิดใช้การเขียนด้วยลายมือโดยใช้สไตลัสสำหรับช่อง EditText ทั้งหมดโดยค่าเริ่มต้นใน Android 14 ขึ้นไป ระบบจะเริ่มโหมดการเขียนด้วยลายมือสำหรับ EditText เมื่อตรวจพบเหตุการณ์การเคลื่อนไหวของสไตลัสภายในขอบเขตการเขียนด้วยลายมือของมุมมอง

ขอบเขตการเขียนด้วยลายมือจะมีระยะห่างจากขอบแนวตั้ง 40 dp และระยะห่างจากขอบแนวนอน 10 dp รอบมุมมอง ปรับขอบเขตการเขียนด้วยลายมือด้วย setHandwritingBoundsOffsets() ปิดใช้การเขียนด้วยลายมือด้วย setAutoHandwritingEnabled(false)

ช่องป้อนข้อมูลที่มีสี่เหลี่ยมผืนผ้าโดยรอบซึ่งระบุขอบเขตของการตรวจจับเหตุการณ์การเคลื่อนไหวของปากกาสไตลัส
รูปที่ 2 ขอบเขตลายมือของช่อง EditText

การมอบสิทธิ์อินพุต

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

รูปที่ 3 การมอบสิทธิ์การป้อนข้อมูลจากองค์ประกอบ UI แบบคงที่ไปยังช่องป้อนข้อความ

การมอบสิทธิ์อินพุตสไตลัส

ใช้ API การมอบสิทธิ์การเขียนด้วยลายมือเพื่อรองรับการป้อนข้อมูลด้วยลายมือจากปากกาสไตลัสสำหรับช่องป้อนข้อมูลตัวยึดตําแหน่ง (ดู setHandwritingDelegatorCallback() และ setIsHandwritingDelegate()) ระบบจะกําหนดค่าองค์ประกอบ UI ตัวยึดตําแหน่งให้มอบสิทธิ์การเขียนด้วยลายมือให้กับช่องป้อนข้อมูลที่ใช้งานได้ เช่น

Kotlin

if (Build.VERSION.SDK_INT >= 34) {
    placeholderInputField.setHandwritingDelegatorCallback {
        showAndFocusDelegateInputField()
    }
    delegateInputField.setIsHandwritingDelegate(true)
}

Java

if (Build.VERSION.SDK_INT >= 34) {
    placeholderInputField.setHandwritingDelegatorCallback(this::showAndFocusInputFieldDelegate);
    delegateInputField.setIsHandwritingDelegate(true);
}

การเคลื่อนไหวของปากกาสไตลัสเหนือมุมมองช่องป้อนข้อความที่มีตัวยึดตําแหน่งจะเรียกใช้การเรียกกลับ การเรียกกลับจะทริกเกอร์การเปลี่ยน UI เพื่อแสดงและโฟกัสช่องป้อนข้อมูลที่มีฟังก์ชัน โดยทั่วไป การใช้งานการเรียกกลับจะเหมือนกับการใช้งานสำหรับ Listener การคลิกในองค์ประกอบตัวยึดตําแหน่ง เมื่อช่องป้อนข้อมูลแบบฟังก์ชันสร้าง InputConnection ระบบจะเริ่มโหมดการเขียนด้วยสไตลัส

รูปที่ 4 การมอบสิทธิ์การป้อนข้อมูลด้วยสไตลัสจากองค์ประกอบ UI แบบคงที่ไปยังช่องป้อนข้อความ

ดีไซน์ Material

ไลบรารี com.google.android.material.search มีคลาส SearchBar และ SearchView เพื่อช่วยในการใช้งานรูปแบบ UI ตัวยึดตำแหน่ง

มุมมองการค้นหาตัวยึดตําแหน่งและฟังก์ชันการค้นหาจะลิงก์กับ setUpWithSearchBar()

การกำหนดค่าการมอบสิทธิ์ลายมือจะกำหนดค่าไว้ในคลัง Material โดยที่คุณไม่ต้องพัฒนาแอปเพิ่มเติม

ทับซ้อนกับพื้นผิวสำหรับวาดเขียน

หากแอปมีพื้นผิววาดภาพที่มีช่องข้อความวางซ้อนกัน คุณอาจต้องปิดใช้การเขียนด้วยสไตลัสเพื่อให้ผู้ใช้วาดได้ ดูsetAutoHandwritingEnabled()

การทดสอบ

อุปกรณ์ Android 14 ขึ้นไปที่รองรับการเขียนด้วยสไตลัสต้องมีอุปกรณ์อินพุตสไตลัสที่เข้ากันได้และเครื่องมือแก้ไขวิธีป้อนข้อมูล (IME) ที่รองรับ API การเขียนด้วยสไตลัสของ Android 14

หากไม่มีอุปกรณ์รับข้อมูลสไตลัส ให้จําลองการป้อนข้อมูลด้วยสไตลัสในอุปกรณ์ใดก็ได้ที่มีสิทธิ์เข้าถึงระดับรูท (รวมถึงโปรแกรมจําลอง) โดยใช้คําสั่ง Android Debug Bridge (adb) ต่อไปนี้


// Android 14
adb shell setprop persist.debug.input.simulate_stylus_with_touch true && adb shell stop && adb shell start

// Android 15 and higher
// Property takes effect after screen reconfiguration such as orientation change.
adb shell setprop debug.input.simulate_stylus_with_touch true

ใช้ Gboard เบต้าเพื่อทดสอบหากคุณใช้อุปกรณ์ที่ไม่รองรับปากกาสไตลัส

แหล่งข้อมูลเพิ่มเติม