หลักพื้นฐานของ Android Kotlin 02.2: เพิ่มการโต้ตอบของผู้ใช้

Codelab นี้เป็นส่วนหนึ่งของหลักสูตรหลักพื้นฐานของ Android Kotlin คุณจะได้รับประโยชน์สูงสุดจากหลักสูตรนี้หากทำตาม Codelab ตามลำดับ Codelab ของหลักสูตรทั้งหมดแสดงอยู่ในหน้า Landing Page ของ Codelab หลักพื้นฐานของ Android Kotlin

Codelab เหล่านี้เป็นส่วนหนึ่งของหลักสูตรหลักพื้นฐานของ Android Kotlin คุณจะได้รับประโยชน์สูงสุดจากหลักสูตรนี้หากทำตาม Codelab ตามลำดับ

Codelab ในชุดนี้มีดังนี้

• 2.1 เลย์เอาต์เชิงเส้นโดยใช้เครื่องมือแก้ไขการออกแบบ
• 2.2 เพิ่มการโต้ตอบของผู้ใช้
• 2.3 Constraint Layout โดยใช้เครื่องมือแก้ไขเลย์เอาต์
• 2.4 ข้อมูลพื้นฐานเกี่ยวกับการเชื่อมโยงข้อมูล

สิ่งที่คุณควรทราบอยู่แล้ว

• การสร้างแอป Android พื้นฐานใน Kotlin
• การเรียกใช้แอป Android ในโปรแกรมจำลองหรือในอุปกรณ์
• การสร้างเลย์เอาต์เชิงเส้นโดยใช้เครื่องมือแก้ไขเลย์เอาต์ของ Android Studio
• การสร้างแอปอย่างง่ายที่ใช้ LinearLayout, TextView, ScrollView และปุ่มที่มีตัวแฮนเดิลการคลิก

สิ่งที่คุณจะได้เรียนรู้

• วิธีรับอินพุตของผู้ใช้โดยใช้EditTextมุมมอง
• วิธีตั้งค่าข้อความเป็นTextViewมุมมองโดยใช้ข้อความจากEditTextมุมมอง
• วิธีทำงานกับ View และ ViewGroup
• วิธีเปลี่ยนระดับการมองเห็นของ View

สิ่งที่คุณต้องดำเนินการ

• เพิ่มการโต้ตอบลงในแอป AboutMe ซึ่งมาจาก Codelab ก่อนหน้า
• เพิ่ม EditText เพื่อให้ผู้ใช้ป้อนข้อความได้
• เพิ่ม Button และใช้ตัวแฮนเดิลการคลิก

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

ในงานนี้ คุณจะเพิ่มช่องป้อนข้อมูล EditText เพื่อให้ผู้ใช้ป้อนชื่อเล่นได้

ขั้นตอนที่ 1: เริ่มต้นใช้งาน

1. หากยังไม่มีแอป AboutMe จาก Codelab ก่อนหน้า ให้ดาวน์โหลดโค้ดเริ่มต้น AboutMeInteractive-Starter นี่คือโค้ดเดียวกันกับที่คุณทำเสร็จใน Codelab ก่อนหน้า
2. เปิดโปรเจ็กต์ AboutMeInteractive-Starter ใน Android Studio
3. เรียกใช้แอป คุณจะเห็นมุมมองข้อความชื่อ รูปภาพดาว และข้อความยาวในมุมมองการเลื่อน
   
   
   
   โปรดทราบว่าผู้ใช้จะเปลี่ยนข้อความใดๆ ไม่ได้

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

ขั้นตอนที่ 2: เพิ่ม EditText

1. ใน Android Studio ให้เปิดactivity_main.xmlไฟล์เลย์เอาต์ในแท็บการออกแบบ
2. ในแผงจานสี ให้คลิกข้อความ
   
   
   
   Ab TextView ซึ่งเป็น TextView จะแสดงที่ด้านบนของรายการองค์ประกอบข้อความในแผงจานสี ด้านล่าง Ab TextView มีมุมมอง EditText หลายรายการ
   
   ในแผงจานสี ให้สังเกตว่าไอคอนสำหรับ TextView แสดงตัวอักษร Ab โดยไม่มีขีดล่าง แต่ไอคอน EditText จะแสดง Ab ที่มีขีดล่าง ขีดล่างแสดงว่ามุมมองนั้นแก้ไขได้
   
   สำหรับEditTextมุมมองแต่ละรายการ Android จะตั้งค่าแอตทริบิวต์ที่แตกต่างกัน และระบบจะแสดงวิธีการป้อนข้อมูลแบบนุ่มที่เหมาะสม (เช่น แป้นพิมพ์บนหน้าจอ)
3. ลากข้อความแก้ไข PlainText ไปยังแผนผังคอมโพเนนต์ แล้ววางไว้ใต้ name_text และเหนือ star_image
   
   
   
4. ใช้แผงแอตทริบิวต์ เพื่อตั้งค่าแอตทริบิวต์ต่อไปนี้ในมุมมอง EditText

แอตทริบิวต์	ค่า
id	nickname_edit
layout_width	match_parent (ค่าเริ่มต้น)
layout_height	wrap_content (ค่าเริ่มต้น)

5. เรียกใช้แอป เหนือรูปดาว คุณจะเห็นข้อความแก้ไขที่มีข้อความเริ่มต้น "ชื่อ"
   
   
   

ในงานนี้ คุณจะจัดรูปแบบEditTextมุมมองโดยการเพิ่มคำใบ้ เปลี่ยนการจัดแนวข้อความ เปลี่ยนรูปแบบเป็นNameStyle และตั้งค่าประเภทอินพุต

ขั้นตอนที่ 1: เพิ่มข้อความบอกใบ้

1. เพิ่มทรัพยากรสตริงใหม่สำหรับคำใบ้ในไฟล์ string.xml

<string name="what_is_your_nickname">What is your Nickname?</string>

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

2. ใช้แผงแอตทริบิวต์ เพื่อตั้งค่าแอตทริบิวต์ต่อไปนี้ให้กับEditTextมุมมอง

แอตทริบิวต์	ค่า
style	NameStyle
textAlignment	(กึ่งกลาง)
hint	@string/what_is_your_nickname

3. ในบานหน้าต่างแอตทริบิวต์ ให้นำค่า Name ออกจากแอตทริบิวต์ text ค่าแอตทริบิวต์ text ต้องว่างเปล่าเพื่อให้แสดงคำแนะนำ

ขั้นตอนที่ 2: ตั้งค่าแอตทริบิวต์ inputType

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

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

เช่น สำหรับรหัสผ่าน ให้ใช้ค่า textPassword ช่องข้อความจะซ่อนข้อมูลที่ผู้ใช้ป้อน

สำหรับหมายเลขโทรศัพท์ ให้ใช้ค่า phone ระบบจะแสดงแป้นพิมพ์ตัวเลข และผู้ใช้จะป้อนได้เฉพาะตัวเลข

ตั้งค่าประเภทอินพุตสำหรับช่องชื่อเล่น

1. ตั้งค่าแอตทริบิวต์ inputType เป็น textPersonName สำหรับnickname_editแก้ไขข้อความ
2. ในบานหน้าต่างแผนผังคอมโพเนนต์ คุณจะเห็นคำเตือน autoFillHints คำเตือนนี้ไม่เกี่ยวข้องกับแอปนี้และอยู่นอกขอบเขตของโค้ดแล็บนี้ คุณจึงไม่ต้องสนใจ (หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับการป้อนข้อความอัตโนมัติ โปรดดูเพิ่มประสิทธิภาพแอปสำหรับการป้อนข้อความอัตโนมัติ)
   
3. ในแผงแอตทริบิวต์ ให้ตรวจสอบค่าของแอตทริบิวต์ต่อไปนี้ของมุมมอง EditText

แอตทริบิวต์	ค่า
id	nickname_edit
layout_width	match_parent (ค่าเริ่มต้น)
layout_height	wrap_content (ค่าเริ่มต้น)
style	@style/NameStyle
inputType	textPersonName
hint	"@string/what_is_your_nickname"
text	(ว่าง)

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

ในงานนี้ คุณจะเพิ่มปุ่มเสร็จสิ้น ซึ่งผู้ใช้จะแตะหลังจากป้อนชื่อเล่น ปุ่มนี้จะสลับEditTextมุมมองกับTextViewมุมมองที่แสดงชื่อเล่น หากต้องการอัปเดตชื่อเล่น ผู้ใช้สามารถแตะมุมมอง TextView

ขั้นตอนที่ 1: เพิ่มปุ่ม "เสร็จสิ้น"

1. ลากปุ่มจากบานหน้าต่างจานสีไปยังแผนผังคอมโพเนนต์ วางปุ่มใต้nickname_editข้อความแก้ไข
   
   
2. สร้างทรัพยากรสตริงใหม่ชื่อ done กำหนดค่าสตริงเป็น Done

<string name="done">Done</string>

3. ใช้แผงแอตทริบิวต์เพื่อตั้งค่าแอตทริบิวต์ต่อไปนี้ในButtonมุมมองที่เพิ่มใหม่

แอตทริบิวต์	ค่า
id	done_button
text	@string/done
layout_gravity	center_horizontal
layout_width	wrap_content

แอตทริบิวต์ layout_gravity จะจัดกึ่งกลางมุมมองในเลย์เอาต์ระดับบนสุด LinearLayout

4. เปลี่ยนรูปแบบเป็น Widget.AppCompat.Button.Colored ซึ่งเป็นหนึ่งในรูปแบบที่กำหนดไว้ล่วงหน้าซึ่ง Android มีให้ คุณเลือกสไตล์ได้จากเมนูแบบเลื่อนลงหรือจากหน้าต่างทรัพยากร
   
   
   
   สไตล์นี้จะเปลี่ยนสีปุ่มเป็นสีเน้น colorAccent สีเฉพาะจุดกำหนดไว้ในไฟล์ res/values/colors.xml
   
   
   

colors.xml มีสีเริ่มต้นสำหรับแอป คุณสามารถเพิ่มทรัพยากรสีใหม่หรือเปลี่ยนทรัพยากรสีที่มีอยู่แล้วในโปรเจ็กต์ได้ตามข้อกำหนดของแอป

ตัวอย่างไฟล์ colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#008577</color>
   <color name="colorPrimaryDark">#00574B</color>
   <color name="colorAccent">#D81B60</color>
</resources>

ขั้นตอนที่ 2: จัดรูปแบบปุ่ม "เสร็จสิ้น"

1. ในแผงแอตทริบิวต์ ให้เพิ่มระยะขอบด้านบนโดยเลือกLayout_Margin > Top ตั้งค่าระยะขอบบนเป็น layout_margin ซึ่งกำหนดไว้ในไฟล์ dimens.xml
   
   
   
2. ตั้งค่าแอตทริบิวต์ fontFamily เป็น roboto จากเมนูแบบเลื่อนลง
   
   
   
3. เปลี่ยนไปที่แท็บข้อความและยืนยันโค้ด XML ที่สร้างขึ้นสำหรับปุ่มที่เพิ่มใหม่
   

<Button
   android:id="@+id/done_button"
   style="@style/Widget.AppCompat.Button.Colored"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="@dimen/layout_margin"
   android:fontFamily="@font/roboto"
   android:text="@string/done" />

ขั้นตอนที่ 3: เปลี่ยนทรัพยากรสี

ในขั้นตอนนี้ คุณจะเปลี่ยนสีเฉพาะจุดของปุ่มให้ตรงกับแถบแอปของกิจกรรม

1. เปิด res/values/colors.xml แล้วเปลี่ยนค่าของ colorAccent เป็น #76bf5e
   

<color name="colorAccent">#76bf5e</color>

คุณจะเห็นสีที่สอดคล้องกับรหัส HEX ในขอบซ้ายของโปรแกรมแก้ไขไฟล์

สังเกตการเปลี่ยนแปลงสีปุ่มในตัวแก้ไขดีไซน์

2. เรียกใช้แอป คุณควรเห็นปุ่มเสร็จสิ้นที่มีสไตล์อยู่ใต้ข้อความแก้ไข
   
   
   

หลังจากผู้ใช้ป้อนชื่อเล่นและแตะปุ่มเสร็จสิ้นแล้ว ชื่อเล่นจะแสดงในมุมมอง TextView ในงานนี้ คุณจะเพิ่มมุมมองข้อความที่มีพื้นหลังสี มุมมองข้อความจะแสดงชื่อเล่นของผู้ใช้เหนือ star_image

ขั้นตอนที่ 1: เพิ่ม TextView สำหรับชื่อเล่น

1. ลากมุมมองข้อความจากบานหน้าต่างจานสีไปยังแผนผังคอมโพเนนต์ วางมุมมองข้อความไว้ใต้ done_button และเหนือ star_image



2. ใช้แผงแอตทริบิวต์เพื่อตั้งค่าแอตทริบิวต์ต่อไปนี้สําหรับTextViewมุมมองใหม่

แอตทริบิวต์	ค่า
id	nickname_text
style	NameStyle
textAlignment	(กึ่งกลาง)

ขั้นตอนที่ 2: เปลี่ยนระดับการมองเห็นของ TextView

คุณสามารถแสดงหรือซ่อนมุมมองในแอปได้โดยใช้แอตทริบิวต์ visibility แอตทริบิวต์นี้มีค่า 3 ค่าดังนี้

• visible: มุมมองจะปรากฏ
• Invisible: ซ่อนมุมมอง แต่ยังคงใช้พื้นที่ในเลย์เอาต์
• gone: ซ่อนมุมมอง และมุมมองจะไม่ใช้พื้นที่ใดๆ ในเลย์เอาต์

1. ในแผงแอตทริบิวต์ ให้ตั้งค่าvisibilityของมุมมองข้อความnickname_textเป็น gone เนื่องจากคุณไม่ต้องการให้แอปแสดงมุมมองข้อความนี้ในตอนแรก
   
   
   
   โปรดสังเกตว่าเมื่อคุณเปลี่ยนแอตทริบิวต์ในแผงแอตทริบิวต์ มุมมองnickname_textจะหายไปจากเครื่องมือแก้ไขการออกแบบ ระบบจะซ่อนมุมมองในตัวอย่างเลย์เอาต์
2. เปลี่ยนค่าแอตทริบิวต์ text ของมุมมอง nickname_text เป็นสตริงว่าง

โค้ด XML ที่สร้างขึ้นสำหรับ TextView นี้ควรมีลักษณะคล้ายกับโค้ดต่อไปนี้

<TextView
   android:id="@+id/nickname_text"
   style="@style/NameStyle"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:textAlignment="center"
   android:visibility="gone"
   android:text="" />

ตัวอย่างเลย์เอาต์ควรมีลักษณะดังนี้

ตัวแฮนเดิลการคลิกในออบเจ็กต์ Button (หรือในมุมมองใดก็ได้) จะระบุการดำเนินการที่จะทำเมื่อแตะปุ่ม (มุมมอง) ควรใช้ฟังก์ชันที่จัดการเหตุการณ์คลิกใน Activity ที่โฮสต์เลย์เอาต์ที่มีปุ่ม (มุมมอง)

เครื่องมือฟังการคลิกมีรูปแบบนี้โดยทั่วไป โดยมุมมองที่ส่งผ่านคือมุมมองที่ได้รับการคลิกหรือแตะ

private fun clickHandlerFunction(viewThatIsClicked: View) {
// Add code to perform the button click event
}

คุณแนบฟังก์ชัน Listener การคลิกกับเหตุการณ์การคลิกปุ่มได้ 2 วิธี ดังนี้

• ในเลย์เอาต์ XML คุณสามารถเพิ่มแอตทริบิวต์ android:onClick ลงในองค์ประกอบ <Button> ได้ เช่น

<Button
   android:id="@+id/done_button"
   android:text="@string/done"
   ...
   android:onClick="clickHandlerFunction"/>

หรือ

• คุณทำได้โดยใช้โปรแกรมในรันไทม์ใน onCreate() ของ Activity โดยการเรียกใช้ setOnClickListener เช่น

myButton.setOnClickListener {
   clickHanderFunction(it)
}

ในงานนี้ คุณจะเพิ่มเครื่องมือฟังการคลิกสำหรับ done_button โดยใช้โปรแกรม คุณเพิ่ม Listener การคลิกในกิจกรรมที่เกี่ยวข้อง ซึ่งก็คือ MainActivity.kt

ฟังก์ชันตัวตรวจจับการคลิกที่ชื่อ addNickname จะทำสิ่งต่อไปนี้

• รับข้อความจากnickname_editแก้ไขข้อความ
• ตั้งค่าข้อความในมุมมองข้อความ nickname_text
• ซ่อนข้อความแก้ไขและปุ่ม
• แสดงชื่อเล่น TextView

ขั้นตอนที่ 1: เพิ่มเครื่องมือฟังการคลิก

1. ใน Android Studio ให้เปิดไฟล์ MainActivity.kt ในโฟลเดอร์ java
2. ใน MainActivity.kt ภายในคลาส MainActivity ให้เพิ่มฟังก์ชันที่ชื่อ addNickname รวมพารามิเตอร์อินพุตที่ชื่อ view ประเภท View พารามิเตอร์ view คือ View ที่เรียกใช้ฟังก์ชัน ในกรณีนี้ view จะเป็นอินสแตนซ์ของปุ่มเสร็จสิ้น

private fun addNickname(view: View) {
}

3. ภายในฟังก์ชัน addNickname ให้ใช้ findViewById() เพื่อรับการอ้างอิงไปยังข้อความแก้ไข nickname_edit และมุมมองข้อความ nickname_text

val editText = findViewById<EditText>(R.id.nickname_edit)
val nicknameTextView = findViewById<TextView>(R.id.nickname_text)

4. ตั้งค่าข้อความใน nicknameTextView มุมมองข้อความเป็นข้อความที่ผู้ใช้ป้อนใน editText โดยรับจากพร็อพเพอร์ตี้ text

nicknameTextView.text = editText.text

5. ซ่อนมุมมองชื่อเล่น EditText โดยตั้งค่าพร็อพเพอร์ตี้ visibility ของ editText เป็น View.GONE

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

editText.visibility = View.GONE

6. ซ่อนปุ่มเสร็จสิ้นโดยตั้งค่าพร็อพเพอร์ตี้ visibility เป็น View.GONE คุณมีการอ้างอิงของปุ่มเป็นพารามิเตอร์อินพุตของฟังก์ชัน view อยู่แล้ว

view.visibility = View.GONE

7. ที่ส่วนท้ายของฟังก์ชัน addNickname ให้ทำให้มุมมองชื่อเล่น TextView แสดงได้โดยตั้งค่าพร็อพเพอร์ตี้ visibility เป็น View.VISIBLE

nicknameTextView.visibility = View.VISIBLE

ขั้นตอนที่ 2: แนบเครื่องมือฟังการคลิกกับปุ่มเสร็จสิ้น

ตอนนี้คุณมีฟังก์ชันที่กำหนดการดำเนินการที่จะทำเมื่อแตะปุ่มเสร็จสิ้นแล้ว คุณจะต้องแนบฟังก์ชันกับมุมมอง Button

1. ใน MainActivity.kt ที่ส่วนท้ายของฟังก์ชัน onCreate() ให้รับการอ้างอิงไปยังมุมมองเสร็จสิ้น Button ใช้ฟังก์ชัน findViewById() และเรียกใช้ setOnClickListener ส่งการอ้างอิงไปยังฟังก์ชัน Listener การคลิก addNickname()

findViewById<Button>(R.id.done_button).setOnClickListener {
            addNickname(it)
        }

ในโค้ดด้านบน it หมายถึง done_button ซึ่งเป็นมุมมองที่ส่งผ่านเป็นอาร์กิวเมนต์

2. เรียกใช้แอป ป้อนชื่อเล่น แล้วแตะปุ่มเสร็จสิ้น สังเกตว่าข้อความแก้ไขและปุ่มจะถูกแทนที่ด้วยมุมมองข้อความชื่อเล่น

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

ขั้นตอนที่ 3: ซ่อนแป้นพิมพ์

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

1. ใน MainActivity.kt ให้เพิ่มโค้ดต่อไปนี้ที่ส่วนท้ายของฟังก์ชัน addNickname() หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของโค้ดนี้ โปรดดูเอกสารประกอบของ hideSoftInputFromWindow

// Hide the keyboard.
val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)

2. เรียกใช้แอปอีกครั้ง โปรดทราบว่าหลังจากแตะเสร็จสิ้นแล้ว แป้นพิมพ์จะซ่อนอยู่

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

ในงานนี้ คุณจะเพิ่มเครื่องมือฟังการคลิกลงในมุมมองข้อความชื่อเล่น เครื่องมือฟังการคลิกจะซ่อนมุมมองข้อความชื่อเล่น แสดงข้อความแก้ไข และแสดงปุ่มเสร็จสิ้น

ขั้นตอนที่ 1: เพิ่มเครื่องมือฟังการคลิก

1. ใน MainActivity ให้เพิ่มฟังก์ชันตัวฟังการคลิกที่ชื่อ updateNickname(view: View) สำหรับมุมมองข้อความชื่อเล่น

private fun updateNickname (view: View) {
}

2. ภายในฟังก์ชัน updateNickname ให้รับการอ้างอิงไปยังnickname_editแก้ไขข้อความ และรับการอ้างอิงไปยังปุ่มเสร็จสิ้น โดยใช้วิธี findViewById()

val editText = findViewById<EditText>(R.id.nickname_edit)
val doneButton = findViewById<Button>(R.id.done_button)

3. ที่ส่วนท้ายของฟังก์ชัน updateNickname ให้เพิ่มโค้ดเพื่อแสดงข้อความแก้ไข แสดงปุ่มเสร็จสิ้น และซ่อนมุมมองข้อความ

editText.visibility = View.VISIBLE
doneButton.visibility = View.VISIBLE
view.visibility = View.GONE

4. ใน MainActivity.kt ที่ส่วนท้ายของฟังก์ชัน onCreate() ให้เรียกใช้ setOnClickListener ในมุมมองข้อความ nickname_text ส่งการอ้างอิงไปยังฟังก์ชัน Listener การคลิก ซึ่งคือ updateNickname()

findViewById<TextView>(R.id.nickname_text).setOnClickListener {
   updateNickname(it)
}

5. เรียกใช้แอป ป้อนชื่อเล่น แตะปุ่มเสร็จสิ้น แล้วแตะชื่อเล่นในมุมมอง TextView มุมมองชื่อเล่นจะหายไป และข้อความแก้ไขกับปุ่มเสร็จสิ้นจะปรากฏขึ้น
   
   
   

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

ขั้นตอนที่ 2: ตั้งค่าโฟกัสไปยังมุมมอง EditText และแสดงแป้นพิมพ์

1. ที่ส่วนท้ายของฟังก์ชัน updateNickname ให้ตั้งค่าโฟกัสเป็นมุมมอง EditText ใช้วิธี requestFocus()

// Set the focus to the edit text.
editText.requestFocus()

2. ที่ส่วนท้ายของฟังก์ชัน updateNickname ให้เพิ่มโค้ดเพื่อให้แป้นพิมพ์ปรากฏ

// Show the keyboard.
val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
imm.showSoftInput(editText, 0)

ขั้นตอนที่ 3: เพิ่มสีพื้นหลังให้กับมุมมอง TextView ของชื่อเล่น

1. ตั้งค่าสีพื้นหลังของมุมมองข้อความ nickname_text เป็น @color/colorAccent และเพิ่มระยะห่างจากขอบด้านล่างเป็น @dimen/small_padding การเปลี่ยนแปลงเหล่านี้จะเป็นคำใบ้ให้ผู้ใช้ทราบว่ามุมมองข้อความชื่อเล่นคลิกได้

android:background="@color/colorAccent"
android:paddingBottom="@dimen/small_padding"

2. เรียกใช้แอปขั้นสุดท้าย ข้อความแก้ไขจะโฟกัส ชื่อเล่นจะแสดงในข้อความแก้ไข และข้อความชื่อเล่นจะได้รับการจัดรูปแบบ

ตอนนี้ก็ไปแสดงแอป AboutMe แบบอินเทอร์แอกทีฟให้เพื่อนดูได้เลย

โปรเจ็กต์ Android Studio: AboutMeInteractive

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

Listener การคลิก

• คุณทำให้ View ตอบสนองต่อการแตะได้โดยเพิ่มเครื่องมือฟังการคลิก
• ฟังก์ชันที่กำหนด Listener การคลิกจะได้รับ View ที่คลิก

คุณแนบฟังก์ชันตัวตรวจจับการคลิกกับ View ได้ 2 วิธี ดังนี้

• ในเลย์เอาต์ XML ให้เพิ่มแอตทริบิวต์ android:onClick ลงในองค์ประกอบ <View>
• ในเชิงโปรแกรม ให้ใช้ฟังก์ชัน setOnClickListener(View.OnClickListener) ใน Activity ที่เกี่ยวข้อง

หลักสูตร Udacity:

• การพัฒนาแอป Android โดยใช้ Kotlin

เอกสารประกอบสำหรับนักพัฒนาแอป Android

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

ส่วนนี้แสดงรายการการบ้านที่เป็นไปได้สำหรับนักเรียน/นักศึกษาที่กำลังทำ Codelab นี้เป็นส่วนหนึ่งของหลักสูตรที่สอนโดยผู้สอน ผู้สอนมีหน้าที่ดำเนินการต่อไปนี้

• มอบหมายการบ้านหากจำเป็น
• สื่อสารกับนักเรียนเกี่ยวกับวิธีส่งงานที่ได้รับมอบหมาย
• ให้คะแนนงานการบ้าน

ผู้สอนสามารถใช้คำแนะนำเหล่านี้ได้มากน้อยตามที่ต้องการ และควรมีอิสระในการมอบหมายการบ้านอื่นๆ ที่เห็นว่าเหมาะสม

หากคุณกำลังทำ Codelab นี้ด้วยตนเอง โปรดใช้แบบฝึกหัดเหล่านี้เพื่อทดสอบความรู้ของคุณ

ตอบคำถามต่อไปนี้

คำถามที่ 1

EditText เป็นคลาสย่อยของอะไร

• View
• LinearLayout
• TextView
• Button

คำถามที่ 2

หากตั้งค่าใดค่าหนึ่งต่อไปนี้ในvisibilityค่าแอตทริบิวต์ในมุมมอง จะทําให้มุมมองซ่อนอยู่และไม่ใช้พื้นที่ใดๆ ในเลย์เอาต์

• visible
• Invisible
• gone
• hide

คำถามที่ 3

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

• จริง
• เท็จ

คำถามที่ 4

ข้อความใดต่อไปนี้เป็นจริงเกี่ยวกับButtonยอดดู

• Button มุมมองคือกลุ่มมุมมอง
• คุณมีมุมมอง Button ได้เพียง 3 มุมมองต่อหน้าจอ
• Button สามารถคลิกยอดดูได้ และเมื่อคลิก Listener การคลิกที่แนบไว้จะดำเนินการ
• Button เป็นส่วนขยายของ ImageView

เริ่มบทเรียนถัดไป: 2.3: Constraint Layout โดยใช้เครื่องมือแก้ไขเลย์เอาต์

ดูลิงก์ไปยัง Codelab อื่นๆ ในหลักสูตรนี้ได้ที่หน้า Landing Page ของ Codelab หลักพื้นฐานของ Android Kotlin