โพสต์ก่อน [วันที่ 2.1] มาเขียน App Android ง่ายๆ กันเถอะ! มันยาวเลยตัดออกมาเป็นอีกอันนะครับ
วางแผนก่อน
เราจะเขียน App ที่หน้าตาแบบเริ่มต้นของ Android Studio นี่แหละ ไม่ต้องแก้เลย ผลลัพธ์ที่ได้วันนี้คือ
เมื่อกดปุ่มจดหมายสีชมพู จะเปลี่ยน “Hello World” เป็น “You clicked me X times” โดย X คือจำนวนครั้งที่เรากดนะครับ
ว่าแล้วก็มาเริ่มกันเลย!!!
Double click ที่ไฟล์ MainActivity ที่กล่องซ้ายมือ จะได้หน้าตาแบบนี้
ให้สังเกตุ โค้ดในสี่เหลี่ยมสีแดงนะครับ คุ้นๆมั้ยครับว่า fab มันคือชื่ออะไร ย้อนหลับไปดูที่ Layout จะเห็นว่า fab มันคือ
มาดูโค้ดกันนะครับ
|
1 2 3 4 5 6 7 8 |
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG) .setAction("Action", null).show(); } }); |
จากโค้ดเนี่ย 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 นั่นเอง
เปิด content_main.xml แล้วคลิ๊กไปที่ Hello World จะเห็นว่า มันคือ TextView ธรรมดา ยังไม่มีชื่อ (id) ตามภาพ
งั้นเรามาตั้งชื่อก่อน โดย switch ไปที่ “Text” ด้านล่างของรูปมือถือ
เราจะตั้งชื่อ (id) ให้กับ TextView ว่า “show_count” โดยการเพิ่ม 1 attribute ให้กับ TextView นั่นคือ android:id=”@+id/show_count” จะได้โค้ดออกมาแบบนี้
|
1 2 3 4 5 |
<TextView android:id="@+id/show_count" android:text="Hello World!" android:layout_width="wrap_content" android:layout_height="wrap_content" /> |
เราตั้งชื่อเรียบร้อย ก็กลับมาที่ปุ่ม fab ของเรากันครับ เพิ่มโค้ดเข้าไป ตามข้างล่างนี้ครับ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { //เมื่อมีการสร้างปุ่ม fab เราต้องมีตัวแปรเริ่มต้น เป็น 0 ในที่นี้ตัวแปรเป็น integer ชื่อ count int count = 0; @Override public void onClick(View view) { //เมื่อมีการกดปุ่ม function onClick จะถูกเรียกทุกครั้งดังนั้นเราจะต้องนับครั้งที่กด โดยให้ count เพิ่มขึ้นทีละ 1 count=count+1; //จากนั้นเราต้องเรียก show_count มาเก็บไว้ ในตัวแปรชื่อ showclickNum ก่อนเปลี่ยนข้อความ TextView showclickNum = (Textfacebook.com/9Bombs.pageView) findViewById(R.id.show_count); //แล้วเราก็ set ข้อความใหม่ให้ show_count ผ่านตัวแปร showclickNum showclickNum.setText("You clicked me "+count+" times"); } }); |
เท่านี้แหละครับโค้ดของเรา
มารันโปรแกรมกันเถอะ!!!
สำหรับการ Run ของ Android Studio ทำได้ 2 วิธีตามนี้เลยครับ
1 [วิธีง่าย] รันในมือถือเครื่องที่เสียบอยู่กับคอมทันที!
ผมเสียบเครื่อง One Plus One ของผมไว้ มัน Detect เจอก็ขึ้นใน list แบบ นี้เลย ไม่ต้องทำอะไร
2 [ยากขึ้นมาหน่อยแต่ทำครั้งเดียว] ก็สร้าง Emulator สำหรับกรณีที่ไม่มีเครื่อง ก็รันมันบนคอมพิวเตอร์เนี่ยแหละ ข้อเสียคือ บาง service อาจจะใช้ไม่ได้เหมือนมือถือจริงๆ เช่นโทรออกรับสาย เป็นต้น
ก็เลือก Launch emulator ถ้ายังไม่มีให้กด … เพื่อไปสร้างมา 1 อัน แนะนำว่า กด Next รัวๆ คุณจะได้ Nexus 5 API 23 x 86 อย่างที่เห็นในรูป
ถ้าไม่อยากเลือกบ่อยๆ ก็ติ๊ก Use same device for future launches ไปเลยครับ
จากนั้นก็กด OK แล้วรอซักพัก จะได้หน้าตาแบบนี้
App Click ในมือถือ
ถ้าใครรันในคอม ก็ต้องรอบูทเครื่องนิดนึงนะครับ 😛 แล้วจะได้แบบนี้
App Click ใน Emulator บน PC
สำเร็จแล้ววววว!!!!! App แรก ในชีวิต นับคลิ๊กได้แล้ว
ครั้งหน้าทำไร รอดูละกันนะครับ ฮ่าาตอนนี้ หัดเขียนไรเรื่อยเปื่อย ไม่ค่อยมีเวลาด้วย ><”
ขอบคุณที่อ่านมาจนจบ ถ้าทำตามแล้วติดตรงไหน เข้าไปถามได้ที่ Facebook/9Bombs.page ขอบคุณครับ