Blockdit Logo (Mobile)
การเขียนโปรแกรม Android โดยการใช้ภาษา Kotlin
•
14 มิ.ย. 2020 เวลา 11:26 • การศึกษา
เริ่มต้นการเขียนโปรแกรมแรกกันเลย เปิด Android Studio ขึ้นมาคลิกที่ Start a new Android Studio Project
เลือก Empty Activity คลิก Next
ตั้งชื่อโปรแกรม คลิก Finish
เมื่อเราสร้างเสร็จจะมีข้อความขึ้นมาว่า Hello World! ให้เอาเมาส์ไปคลิกที่ขอความแล้วกด delete เพื่อลบออก
ให้เราไปคลิกที่ Text เลือก TextView แล้วลากมาใส่ที่หน้าจอ
จะมีข้อความขึ้นมาให้เรา กำหนดตังนี้
id เป็น txtWelcome
text เป็น Welcome
ทำไหมต้องกำหนด ID เพื่อใช้อ้างอิงให้การเขียนโปรแกรม
ต่อไปเราจะกำหนดตำแหน่งของข้อความให้คลิกไปที่ +
ในที่นี้เรากำหนดให้ เป็น 16 คือระยะห่างจากขอบ
ต่อไปเราจะเปลี่ยนขนาดตัวอักษรให้เราคลิกที่รูปแว่น
พิมพ์คำว่า text หาคำว่า textSize ปรับค่าเป็น ค่าที่ต้องการในที่นี้ปรับเป็น 36sp สามารถปรับค่าอื่นได้ตามต้องการเช่นสี เป็นต้น
ทดสอบแสดงผลลัพภ์ใน emulator ในที่นี้จะทดสอบในสอง emulator
ให้เลือกตัว emulator แล้วคลิก Run
รอสักครู่จะได้ผลดังภาพ
ต่อไปเราจะเพิ่ม กล่องเพื่อรับข้อความ ไปที่ Text เลือก Plain Text แล้วลากมาที่หน้าจอออกแบบ
ให้เรากำหนดดังนี้
id=txtName
text ให้ลบออก
hint=Name
ต่อไปเราจะกำหนดให้กล่องรับข้อความอิงตามตำแหน่งของ Welcome ให้คลิกตามรูปลากจุดกลมตรงกลางไปหาจุดด้านลางของ Welcome เราจะเห็นว่
เราจะเห็นว่ามันอยู่ชิดคอบกันเกินไปไม่สวยงาน
ให้คลิกไปที่ Name กำหนดค่าดังนี้
layout_marginStart="16dp"
layout_marginTop="16dp"
layout_marginEnd="16dp"
layout_width="0dp"
ทดสอบโปรแกรมเราจะเห็นโปรแกรมมีช่องไฟสวยงามขึ้น
ต่อไปทำการเพิ่มปุ่ม showName และ txtShowHello ซึ่งทำคล้ายกับ txtName
การกำหนดค่า showName
การกำหนดค่า txtShowHello
ทดสอบผลการออกแบบ
ต่อไปจะเริ่มเขียนโปรแกรมโดยไปที่ MainActivity
กำหนดตัวแปล sName ให้รับค่า จาก txtName
val sName=txtName.text.trim()
สร้างการทำงานเมื่อกดปุ่ม showName โดยการพิมพ์ showName.setOnClickListener ให้คลิกเลือกดังภาพ
จะได้ดังนี้
ต่อไปเราจะเขียนโคดเพื่อให้แสดงค่า txtName ใน txtShowHello โดยมีข้อความข้างหน้าว่า Hello
ทดสอบผลการโปรแกรม
การคลิกที่ Show name โดยไม่กรอกอะไรเลย
การคลิกที่ Show name โดยกรอกแต่ไม่แสดงชื่อ
จากการทดสอบทำให้เราทราบว่าโปรแกรมเรายังมีข้อผิดพลาดอยู่แก้ไขดังนี้
 
var sName=txtName.text
showName.setOnClickListener {
if(sName.isEmpty() ){
txtShowHello.text="Please enter name"
}else {
txtShowHello.text="Hello $sName"
}
}
ทดสอบผลการโปรแกรม
โปรแกรมง่ายๆของเราก็เสร็จแล้ว โปรดติดต่ามบทความชองเราต่อไปนะครับ
โฆษณา