วันนี้เราจะมาเรียนรู้ การทำ AlertDislog แบบ List โจทย์เป็นอย่างนี้นะครับ เดี๋ยวเราจะทำแอฟรีเคชั่น แอนดรอยด์ มาอันนึ่ง ที่มี

Conceptual Design แบบนี้

ตัวแอพจะมี Activity เพียงอันเดียว มีปุ่ม Wanted เอาไว้คลิกเพื่อเลือกรูป 3 รูป คือ

1. SmartPhone
2. Tablet
3. Netbook

เมื่อเลือกเสร็จ ให้นำรูปมาปรากฎที่ต้านล่าง โดยการทำงานจะ เขียนโค้ดบนแอนดรอยด์ 1.6 และ ออกแบบให้สามารถแสดงผลได้หลายความละเอียดของจอ

สร้างโปรเจ็ค LearnListAlertDialog

ไปที่ New > Android Project อ้อมีหลายๆท่าน ที่ต้องการโหลด Source Code มาติดตั้งใน eclipse ก็สามารถไปโหลดได้ที่ http://androidthai.in.th/download-code-android.html ครับ แต่ผมก็ไม่แนะนำนะครับ อย่างให้ลองทำเองก่อน ไม่ได้จริงๆ ค่อยโหลดมาเฉลยครับ

Project name

Build Target

Properties

Design User Interface

ในการออกแบบ UI ให้เราเริ่มต้นจากการเปิดไฟล์ main.xml มาแก้ไข

เตรียมรูป สำหรับความละเอียดต่างๆ

ขนาดของภาพ ?

ในการทำงานผมจะออกแบบบนความละเอียดหน้าจอแบบ mdpi หรือ มีค่าความละเอียดหน้าจอประมาญ 160 dpi ก่อน แล้วผมจะ Resize รูปไปที่

• ldpi เอา 0.75 ไปคุณขนาด ของ mdpi
• hdpi เอา 1.5 ไปคูณขนาดของ mdpi

รูปสำหรับ mdpi

รูปเพื่อ ldpi

นำ 0.75 ไปคูณเพื่อให้ Resize ไปเป็นรูปเพื่อ ldpi

รูปเพื่อ hdpi

เหมือนกับที่เราทำกับ ldpi แต่ให้เรานำ 1.5 ไปคูณ mdpi เพื่อให้ได้รูปสำหรับ hdpi

มีกี่รูปให้เตรียม Resize ให้หมดแล้วนำไปเก็บไว้ในโฟวเดอร์ ตามนี้

1. drawable-ldpi
2. drawable-mdpi
3. drawable-hdpi

เปิด main.xml ออกมาใส่โค้ดแบบนี้

และนี่เป็นโค้ด

เปิดไฟร์ MainActivity.java ออกมาแล้ว โค้ดดิ้งไปตามนี้

สังเกตุ ว่าผมมีการ SetOnClickListener ที่ปุ่ม btnWanted โดยกำหนดว่า ถ้ามีการคลิกให้ทำ method chooseWanted()

มีการกำหนด เงื่อนไขของการเลือก

เสร็จแล้วลองทดสอบบน AVD 1.6 หน้าจอขนาดเล็ก 240x320 px ความละเอียด 120 dpi

ได้ผลแบบนี้

เปลี่ยนรูป icon ด้วยนะ

ต่อมาทดสอบบนจอความละเอียดสูง

ผมปิด AVD 1.6 มาเปิด AVD 2.3 ขนาดจอ 480x854 px ความละเอียด 240 dpi

จะได้ผลลัพธ์แบบนี้

เรามาดูรูป icon กัน

ลองทดสอบบน

มือถือแอนดรอยด์จริง

เริ่มที่ htc tattoo 1.6

ต่อมานำโค้ดมาทดสอบบนครื่องหน้าจอใหญ่ และ มีความละเอียดสูง