หน้านี้ได้รับการแปลโดย Cloud Translation API

Android Kotlin Fundamentals 02.2: เพิ่มการโต้ตอบของผู้ใช้

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

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

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

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

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

สิ่งที่คุณจะทํา

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

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

แอปเกี่ยวกับฉัน

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

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

หากยังไม่มีแอปเกี่ยวกับ MeMe จาก Codelab ก่อนหน้า ให้ดาวน์โหลดโค้ดเริ่มต้น AboutMeInteractive-Starter ซึ่งเป็นโค้ดเดียวกับที่คุณทําใน Codelab ก่อนหน้านี้
เปิดโปรเจ็กต์เกี่ยวกับ MeMeInteractive-Starter ใน Android Studio
เรียกใช้แอป คุณจะเห็นมุมมองข้อความชื่อ รูปภาพดาว และข้อความยาวๆ ในมุมมองแบบเลื่อน

สังเกตเห็นว่าผู้ใช้จะเปลี่ยนข้อความไม่ได้

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

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

ใน Android Studio ให้เปิดไฟล์เลย์เอาต์ activity_main.xml ในแท็บการออกแบบ
ในแผงชุดสี ให้คลิกข้อความ

Ab TextView ซึ่งเป็น TextView จะแสดงที่ด้านบนของรายการองค์ประกอบข้อความในแผงชุดสี ด้านล่าง Ab TextView คือมุมมอง EditText หลายรายการ

ในแผง Palette ให้สังเกตว่าไอคอนสําหรับ TextView แสดงตัวอักษร Ab อย่างไร แต่ไอคอน EditText จะแสดงเครื่องหมายขีดล่าง Ab การขีดเส้นใต้จะบอกว่ามุมมองนั้นแก้ไขได้

สําหรับมุมมอง EditText แต่ละรายการ Android จะตั้งค่าแอตทริบิวต์ที่แตกต่างกัน และจะแสดงวิธีป้อน Soft ที่เหมาะสม (เช่น แป้นพิมพ์บนหน้าจอ)
ลากข้อความ PlainText แก้ไขในคอมโพเนนต์คอมโพเนนต์แล้ววางใต้ name_text และอยู่เหนือ star_image
ใช้แผงแอตทริบิวต์เพื่อตั้งค่าแอตทริบิวต์ต่อไปนี้ในมุมมอง EditText

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

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

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

ขั้นตอนที่ 1: เพิ่มข้อความแนะนํา

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

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

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

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

ในแผงแอตทริบิวต์ ให้นําค่า Name ออกจากแอตทริบิวต์text ค่าแอตทริบิวต์ text ต้องว่างเปล่าเพื่อให้คําแนะนําปรากฏ

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

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

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

เช่น ในรหัสผ่าน ให้ใช้ค่า textPassword ช่องข้อความจะซ่อนอินพุตของผู้ใช้

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

ตั้งค่าประเภทอินพุตของช่องชื่อเล่น ดังนี้

ตั้งค่าแอตทริบิวต์ inputType เป็น textPersonName สําหรับข้อความแก้ไขข้อความ nickname_edit
สังเกตคําเตือน autoFillHints ในแผงคอมโพเนนต์คอมโพเนนต์ คําเตือนนี้ไม่มีผลกับแอปนี้และอยู่นอกเหนือขอบเขตของ Codelab รายการนี้ คุณจึงไม่จําเป็นต้องสนใจคําเตือนนี้ (หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับการป้อนข้อความอัตโนมัติ โปรดดูเพิ่มประสิทธิภาพแอปสําหรับการป้อนข้อความอัตโนมัติ)
ในแผงแอตทริบิวต์ ให้ยืนยันค่าสําหรับแอตทริบิวต์ต่อไปนี้ของข้อมูลพร็อพเพอร์ตี้ 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: เพิ่มปุ่มเสร็จสิ้น

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

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

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

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

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

เปลี่ยนรูปแบบเป็น 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: จัดรูปแบบปุ่มเสร็จสิ้น

ในแผงแอตทริบิวต์ ให้เพิ่มระยะขอบบนโดยเลือก Layout_Margin > Top ตั้งค่าระยะขอบบนเป็น layout_margin ซึ่งกําหนดไว้ในไฟล์ dimens.xml
ตั้งค่าแอตทริบิวต์ fontFamily เป็น roboto จากเมนูแบบเลื่อนลง
เปลี่ยนไปที่แท็บข้อความและยืนยันโค้ด 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: เปลี่ยนทรัพยากรสี

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

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

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

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

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

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

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

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

ลากมุมมองข้อความจากแผงชุดสีลงในแผนผังคอมโพเนนต์ วางมุมมองข้อความใต้ done_button และด้านบน star_image
ใช้แผงแอตทริบิวต์เพื่อตั้งค่าแอตทริบิวต์ต่อไปนี้สําหรับมุมมอง TextView ใหม่

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

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

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

visible: มองเห็นมุมมองได้
Invisible: ซ่อนมุมมอง แต่มุมมองจะยังคงใช้พื้นที่เก็บข้อมูลในเลย์เอาต์
gone: ซ่อนมุมมองและมุมมองจะไม่กินพื้นที่ในเลย์เอาต์

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

สังเกตเห็นว่าเมื่อเปลี่ยนแอตทริบิวต์ในแผงแอตทริบิวต์ มุมมอง nickname_text จะหายไปจากตัวแก้ไขดีไซน์ มุมมองถูกซ่อนในตัวอย่างเลย์เอาต์
เปลี่ยนค่าแอตทริบิวต์ 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 ที่โฮสต์เลย์เอาต์ด้วยปุ่ม (มุมมอง)

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

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

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

ฟังก์ชัน Listener การคลิกที่เรียกว่า addNickname จะดําเนินการต่อไปนี้

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

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

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

private fun addNickname(view: View) {
}

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

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

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

nicknameTextView.text = editText.text

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

ในงานก่อนหน้า คุณได้เปลี่ยนพร็อพเพอร์ตี้ visibility โดยใช้เครื่องมือแก้ไขเลย์เอาต์ ซึ่งคุณทําแบบเดียวกันนี้แบบเป็นโปรแกรม

editText.visibility = View.GONE

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

view.visibility = View.GONE

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

nicknameTextView.visibility = View.VISIBLE

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

private fun updateNickname (view: View) {
}

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

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

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

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

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

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

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

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

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

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

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

เพิ่มโค้ดเพื่อทําให้แป้นพิมพ์มองเห็นได้ที่ท้ายฟังก์ชัน updateNickname

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

ขั้นตอนที่ 3: เพิ่มสีพื้นหลังในมุมมอง "ข้อความ" ที่มีชื่อเล่น

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

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

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

ทีนี้ลองแสดงแอป "เกี่ยวกับฉัน" แบบอินเทอร์แอกทีฟให้เพื่อนดู

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

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

Listener การคลิก

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

คุณแนบฟังก์ชัน Listener การคลิกลงใน View ได้ด้วย 2 วิธีต่อไปนี้

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

หลักสูตร Udacity:

การพัฒนาแอป Android ด้วย Kotlin

เอกสารประกอบสําหรับนักพัฒนาซอฟต์แวร์ Android

ส่วนนี้จะอธิบายการบ้านและรายงานสําหรับนักเรียนที่ทํางานผ่าน 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: จํากัดเลย์เอาต์โดยใช้เครื่องมือแก้ไขเลย์เอาต์

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