ตอนที่ 5 Android Studio Kotlin ควบคุม input และ event

01พ.ค. 2023 by รับทำแอพ สบายไอที

การจัดการอินพุตและกิจกรรม (event) ของผู้ใช้เป็นสิ่งสำคัญในการรับทำแอพ Android ในบทความนี้ เราจะสำรวจวิธีจัดการอินพุตและเหตุการณ์ (event) ของผู้ใช้โดยใช้ Kotlin ซึ่งเป็นภาษาโปรแกรมยอดนิยมสำหรับการทำแอพ Android

1. ทำความเข้าใจอินพุตของผู้ใช้

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

1.1 ประเภทของการป้อนข้อมูลของผู้ใช้

อินพุตของผู้ใช้แบ่งออกได้เป็น 2 ประเภทกว้างๆ คือ

  • อินพุตโดยตรง (Direct Input): อินพุตประเภทนี้ต้องการให้ผู้ใช้โต้ตอบกับอุปกรณ์ทางกายภาพ ตัวอย่าง ได้แก่ การแตะบนหน้าจอ การพิมพ์บนแป้นพิมพ์ และการปัดนิ้ว
  • อินพุตทางอ้อม (Indirect Input): อินพุตประเภทนี้สร้างขึ้นโดยอัตโนมัติจากอุปกรณ์หรือแอปพลิเคชัน ตัวอย่าง ได้แก่ การแจ้งเตือน การเตือน และเหตุการณ์ของระบบ
1.2 จับ (Capturing) อินพุตของผู้ใช้

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

  • Buttons
  • EditTexts
  • RadioButtons
  • CheckBoxes
  • SeekBars
  • Spinners
  • Switches
  • Sliders
1.3 การจัดการ (Handling) อินพุตของผู้ใช้

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

1.4 แนวทางปฏิบัติที่ดีที่สุดสำหรับการจัดการอินพุตของผู้ใช้

แนวทางปฏิบัติที่ดีที่สุดที่ควรคำนึงถึงเมื่อจัดการอินพุตของผู้ใช้ในการทำแอพ Android มีดังนี้

  • ให้คำแนะนำที่ชัดเจนและรัดกุมแก่ผู้ใช้เกี่ยวกับวิธีการป้อนข้อมูล
  • ใช้ส่วนประกอบ UI ที่เหมาะสมเพื่อบันทึกอินพุตของผู้ใช้ และตรวจสอบให้แน่ใจว่าเข้าถึงได้และใช้งานได้สำหรับผู้ใช้ทุกคน
  • ตรวจสอบการป้อนข้อมูลของผู้ใช้ก่อนที่จะดำเนินการเพื่อหลีกเลี่ยงข้อผิดพลาดและปรับปรุงประสบการณ์ของผู้ใช้
  • จัดการข้อผิดพลาดและกรณีขอบอย่างสง่างาม และแจ้งข้อความแสดงข้อผิดพลาดที่ให้ข้อมูลแก่ผู้ใช้
  • ใช้รูปแบบ UI ที่สอดคล้องกันและแบบแผนการออกแบบเพื่อทำให้แอปพลิเคชันใช้งานง่ายและใช้งานง่าย

2. การจัดการ (Handling) อินพุตของผู้ใช้ใน Android

ในการจัดการอินพุตของผู้ใช้ในรับทำแอพ Android เราสามารถใช้ตัวฟังเหตุการณ์ต่างๆ ที่จัดทำโดยเฟรมเวิร์ก Android Studio Listener เหตุการณ์เหล่านี้ออกแบบมาเพื่อจับประเภทการป้อนข้อมูลของผู้ใช้ เช่น การคลิก การสัมผัส และท่าทางสัมผัส

หนึ่งในฟังเหตุการณ์ (event listeners) ที่ใช้บ่อยที่สุดในการทำแอพ Android คือ OnClickListener ผู้ฟังเหตุการณ์นี้ใช้เพื่อจับภาพเหตุการณ์การคลิกบนมุมมอง ในการใช้ OnClickListener เราจำเป็นต้องติดตั้งอินเทอร์เฟซ View.OnClickListener และแทนที่เมธอด onClick() จากนั้นเราสามารถแนบ OnClickListener เข้ากับ View ได้โดยการเรียกใช้เมธอด setOnClickListener()

2.1 ตัวอย่างการ Capturing ผู้ใช้ใน XML

ในการจับอินพุตของผู้ใช้ในไฟล์เลย์เอาต์ XML เราสามารถใช้คอมโพเนนต์ UI ต่างๆ เช่น EditTexts, Buttons และ CheckBoxes จากนั้นเราสามารถกำหนด ID เฉพาะให้กับคอมโพเนนต์เหล่านี้และอ้างอิงในโค้ด Kotlin ของเราเพื่อบันทึกและจัดการอินพุตของผู้ใช้

ตัวอย่างเช่น นี่คือเลย์เอาต์ XML อย่างง่ายที่มี EditText, Button และ CheckBox:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter your name" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit" />

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I agree to the terms and conditions" />

</LinearLayout>

ในเลย์เอาต์นี้ เรามี EditText ที่มี ID editText ปุ่มที่มีปุ่ม ID และช่องทำเครื่องหมายที่มีช่องทำเครื่องหมาย ID

2.2 การจัดการอินพุตของผู้ใช้ใน Kotlin

ในการจัดการอินพุตของผู้ใช้ใน Kotlin เราสามารถอ้างอิงส่วนประกอบ UI ในโค้ดของเราและแนบตัวฟังเหตุการณ์ที่เหมาะสมเข้าไปได้

ตัวอย่างเช่น ในการจับภาพข้อความที่ป้อนใน EditText และแสดงใน TextView เมื่อคลิกปุ่ม เราสามารถเขียนโค้ดต่อไปนี้:

val editText = findViewById<EditText>(R.id.editText)
val button = findViewById<Button>(R.id.button)
val textView = findViewById<TextView>(R.id.textView)

button.setOnClickListener {
    val name = editText.text.toString()
    textView.text = "Hello, $name!"
}

ในโค้ดนี้ ขั้นแรกเราจะได้รับการอ้างอิงถึง EditText, Button และ TextView โดยใช้ ID ที่เกี่ยวข้อง จากนั้นเราแนบ OnClickListener เข้ากับปุ่มโดยใช้นิพจน์แลมบ์ดา ภายใน OnClickListener เราได้รับข้อความที่ป้อนใน EditText โดยใช้คุณสมบัติข้อความและแปลงเป็นสตริงโดยใช้เมธอด toString() จากนั้นเราจะเชื่อมข้อความกับข้อความทักทายและแสดงใน TextView โดยใช้คุณสมบัติข้อความ

ในทำนองเดียวกัน ในการจัดการ CheckBox เราสามารถแนบ OnCheckedChangeListener เข้ากับ CheckBox และดำเนินการตามความเหมาะสมโดยขึ้นอยู่กับว่า CheckBox ถูกเลือกหรือไม่ถูกเลือก:

val checkBox = findViewById<CheckBox>(R.id.checkBox)

checkBox.setOnCheckedChangeListener { buttonView, isChecked ->
    if (isChecked) {
        // Do something if the CheckBox is checked
    } else {
        // Do something if the CheckBox is unchecked
    }
}

ในโค้ดนี้ เราได้รับการอ้างอิงถึง CheckBox โดยใช้ ID และแนบ OnCheckedChangeListener เข้ากับนั้นโดยใช้นิพจน์แลมบ์ดา ภายใน OnCheckedChangeListener เราตรวจสอบค่าของพารามิเตอร์ isChecked เพื่อพิจารณาว่า CheckBox ถูกเลือกหรือไม่ถูกเลือก จากนั้นเราสามารถดำเนินการที่เหมาะสมตามสถานะ CheckBox

3. จัดการกิจกรรมการสัมผัส (Touch Events)ใน Android

นอกจากเหตุการณ์การคลิกแล้ว เรายังสามารถจัดการเหตุการณ์การสัมผัสใน Android ได้อีกด้วย เหตุการณ์การสัมผัสใช้เพื่อจับการเคลื่อนไหวของนิ้วของผู้ใช้บนหน้าจอ เช่น การแตะ การปัด และการเลื่อน

ในการจัดการเหตุการณ์การสัมผัสในการทำแอพ Android Studio เราสามารถใช้อินเทอร์เฟซ OnTouchListener อินเทอร์เฟซนี้มีวิธีการในการจัดการที่แตกต่างกัน

ต่อไปนี้คือตัวอย่างวิธีใช้ OnTouchListener ใน Kotlin:

3.1 จับ (Capturing) เหตุการณ์การสัมผัสใน XML

ในการจับเหตุการณ์การสัมผัส (capture touch events) ในไฟล์เลย์เอาต์ XML เราสามารถใช้คอมโพเนนต์ UI ต่างๆ เช่น Buttons, ImageViews และ Views จากนั้นเราสามารถกำหนด ID เฉพาะให้กับคอมโพเนนต์เหล่านี้และอ้างอิงในโค้ด Kotlin ของเราเพื่อบันทึกและจัดการกับเหตุการณ์การสัมผัส

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/my_image" />

</RelativeLayout>

ใน xml นี้ เรามี ImageView ที่มี ID imageView และซอร์สอิมเมจ my_image

3.2 จัดการเหตุการณ์การสัมผัสใน Kotlin

ในการจัดการเหตุการณ์การสัมผัสใน Kotlin เราสามารถอ้างอิงส่วนประกอบ UI ในโค้ดของเราและแนบตัวรับฟังเหตุการณ์ที่เหมาะสมเข้าไปได้

ตัวอย่างเช่น หากต้องการบันทึกการแตะเพียงครั้งเดียวบน ImageView และแสดงข้อความ Toast เราสามารถเขียนโค้ดต่อไปนี้:

val imageView = findViewById<ImageView>(R.id.imageView)

imageView.setOnClickListener {
    Toast.makeText(this, "Image clicked!", Toast.LENGTH_SHORT).show()
}

ในโค้ดนี้ ขั้นแรกเราได้รับการอ้างอิงถึง ImageView โดยใช้ ID ของมัน จากนั้นเราแนบ OnClickListener เข้ากับ ImageView โดยใช้นิพจน์แลมบ์ดา ภายใน OnClickListener เราแสดงข้อความ Toast โดยใช้เมธอด makeText() และเมธอด show() ของคลาส Toast

ในทำนองเดียวกัน ในการจับภาพการกดค้างบน ImageView และดำเนินการบางอย่าง เราสามารถแนบ OnLongClickListener เข้าไปได้:

imageView.setOnLongClickListener {
    // Do something when the ImageView is long pressed
    true // Return true to indicate that the event has been handled
}

ในโค้ดนี้ เราแนบ OnLongClickListener กับ ImageView โดยใช้นิพจน์แลมบ์ดา ภายใน OnLongClickListener เราสามารถดำเนินการใดๆ ก็ตามที่เราต้องการ เช่น แสดงกล่องโต้ตอบหรือเริ่มกิจกรรม จากนั้นเราจะคืนค่าเป็น จริง เพื่อระบุว่าเหตุการณ์ได้รับการจัดการแล้ว และป้องกันการเผยแพร่เหตุการณ์ต่อไป

การจัดการอินพุตและกิจกรรมของผู้ใช้เป็นส่วนสำคัญของการรับทำแอพ Android Studio ด้วยการใช้ตัวรับฟังเหตุการณ์ เราสามารถบันทึกและประมวลผลอินพุตของผู้ใช้ประเภทต่างๆ เช่น การคลิกและการสัมผัส ใน Kotlin เราสามารถใช้อินเทอร์เฟซ เช่น OnClickListener และ OnTouchListener เพื่อจัดการอินพุตและเหตุการณ์ของผู้ใช้ในแอปพลิเคชัน Android ของเรา

เขียนแอพ Android Studio

ตอนที่ 4 Android Studio Kotlin แนะนำ Views
ตอนที่ 6 Android Studio Kotlin activities และ intents คืออะไร