โพสต์ก่อน [วันที่ 2.1] มาเขียน App Android ง่ายๆ กันเถอะ! มันยาวเลยตัดออกมาเป็นอีกอันนะครับ

วางแผนก่อน

เราจะเขียน App ที่หน้าตาแบบเริ่มต้นของ Android Studio นี่แหละ ไม่ต้องแก้เลย ผลลัพธ์ที่ได้วันนี้คือ

เมื่อกดปุ่มจดหมายสีชมพู จะเปลี่ยน “Hello World” เป็น “You clicked me X times” โดย X คือจำนวนครั้งที่เรากดนะครับ


ว่าแล้วก็มาเริ่มกันเลย!!!

Double click ที่ไฟล์ MainActivity ที่กล่องซ้ายมือ จะได้หน้าตาแบบนี้

screenshot_20160205_223026

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

screenshot_20160205_223223

มาดูโค้ดกันนะครับ

จากโค้ดเนี่ย fab คือ ปุ่มที่เราต้องการเลย Android จัดมาให้ละ พร้อมกับใส่ OnClick listener มาให้แล้ว พร้อมทำงาน เห็นบรรทัดที่เขียนว่า “Replace with your own action” มั้ยครับ นั่นแหละ เป้าหมายของเรา

ก่อนที่เราจะเปลี่ยน Text ของ Hello World ได้เราต้องไปหาก่อนว่า Text Hello World มีชื่อเรีนก (id) ว่าอะไร ไม่งั้นเราจะเปลี่ยน Text ในนี้ไม่ได้นะครับ

โดย เราต้องกลับไปที่ activity_main.xml อีกครั้ง แล้วคลิ๊กไปที่ Hello World จะเห็นว่า มันอยู่ใน @layout/content_main ซึ่งก็คือ content_main.xml นั่นเอง

screenshot_20160205_224311

เปิด content_main.xml แล้วคลิ๊กไปที่ Hello World จะเห็นว่า มันคือ TextView ธรรมดา ยังไม่มีชื่อ (id) ตามภาพ

screenshot_20160205_224759

งั้นเรามาตั้งชื่อก่อน โดย switch ไปที่ “Text” ด้านล่างของรูปมือถือ

screenshot_20160205_225804

เราจะตั้งชื่อ (id) ให้กับ TextView ว่า “show_count” โดยการเพิ่ม 1 attribute ให้กับ TextView นั่นคือ android:id=”@+id/show_count” จะได้โค้ดออกมาแบบนี้

เราตั้งชื่อเรียบร้อย ก็กลับมาที่ปุ่ม fab ของเรากันครับ เพิ่มโค้ดเข้าไป ตามข้างล่างนี้ครับ

เท่านี้แหละครับโค้ดของเรา


 

มารันโปรแกรมกันเถอะ!!!

สำหรับการ Run ของ Android Studio ทำได้ 2 วิธีตามนี้เลยครับ

1 [วิธีง่าย] รันในมือถือเครื่องที่เสียบอยู่กับคอมทันที!

ผมเสียบเครื่อง One Plus One ของผมไว้ มัน Detect เจอก็ขึ้นใน list แบบ นี้เลย ไม่ต้องทำอะไร

screenshot_20160205_232340

2 [ยากขึ้นมาหน่อยแต่ทำครั้งเดียว] ก็สร้าง Emulator สำหรับกรณีที่ไม่มีเครื่อง ก็รันมันบนคอมพิวเตอร์เนี่ยแหละ ข้อเสียคือ บาง service อาจจะใช้ไม่ได้เหมือนมือถือจริงๆ เช่นโทรออกรับสาย เป็นต้น

ก็เลือก Launch emulator ถ้ายังไม่มีให้กด … เพื่อไปสร้างมา 1 อัน แนะนำว่า กด Next รัวๆ คุณจะได้ Nexus 5 API 23 x 86 อย่างที่เห็นในรูป

screenshot_20160205_232717

ถ้าไม่อยากเลือกบ่อยๆ ก็ติ๊ก Use same device for future launches ไปเลยครับ

จากนั้นก็กด OK แล้วรอซักพัก จะได้หน้าตาแบบนี้

 

Screenshot_2016-02-05-23-29-02

App Click ในมือถือ

ถ้าใครรันในคอม ก็ต้องรอบูทเครื่องนิดนึงนะครับ 😛 แล้วจะได้แบบนี้

screenshot_20160205_233216

App Click ใน Emulator บน PC

 

สำเร็จแล้ววววว!!!!! App แรก ในชีวิต นับคลิ๊กได้แล้ว

ครั้งหน้าทำไร รอดูละกันนะครับ ฮ่าาตอนนี้ หัดเขียนไรเรื่อยเปื่อย ไม่ค่อยมีเวลาด้วย ><“

ขอบคุณที่อ่านมาจนจบ ถ้าทำตามแล้วติดตรงไหน เข้าไปถามได้ที่ Facebook/9Bombs.page ขอบคุณครับ

Comments

comments