ตอนที่ 2 : ออกแบบหน้าจอ (design)

ก่อนที่เราจะออกแบบหน้าจอได้
เราก็ต้องสร้าง Project ขึ้นมาก่อนนะคะ
กำหนดค่าตามที่ IDE ให้มาเลยค่ะ
สุดท้ายเราจะได้ไฟล์ MainActivity.java คู่กับ
ไฟล์ activity_main.xml ขึ้นมา…

ตอนนี้ยังไม่ต้องสนใจ 2 ไฟล์นั้นค่ะ
เราจะทำสร้าง layout ขึ้นมาก่อน
โดยมีหน้าตาแบบนี้

mystou-com-android-adapter-basic-2-1

สร้าง layout ชื่อ layou_item.xml

mystou-com-android-adapter-basic-2-2

ข้างในมีโค้ดดังต่อไปนี้
*อย่าลืมเตรียมรูปที่ต้องการใช้ไว้ด้วยนะคะ
เลือกรูปอะไรก็ได้ค่ะ เอาไว้ใน drawable*

เมื่อมองในมุม Design จะแสดงผลดังนี้
layou_item.xml

mystou-com-android-adapter-basic-2-3

ตอนนี้เราก็มี layout ตามที่เราต้องการแล้ว
แล้วเราจะนำ layout นี้ไปแสดงผลได้อย่างไร ?

ไปที่ไฟล์ activity_main.xml ก่อนนะคะ
เราจะเอา layout มาแสดงที่นี่ ในรูปแบบรายการ
เราต้องสร้างแท็ก Listview ขึ้นมา โดยเขียนโค้ดลงไปดังนี้

เมื่อมองในมุม Design ได้แสดงผลแบบนี้

mystou-com-android-adapter-basic-2-4

แต่ละ Item จะถูกแทนที่ด้วย layout ที่เราสร้างขึ้นมา

แต่กระบวนการที่จะนำ layout ไปแสดงได้นั้น
เราจะทำผ่าน “Adapter” ค่ะ
ในตอนต่อไปเราจะสร้าง “Adapter” กันแล้วนะคะ ^_^
แล้วพบกันค่ะ


เรื่องที่เกี่ยวข้อง :
>> Custom View (Basic)
ตอนที่ 1 : ภาพรวมของระบบ (Overview)
ตอนที่ 2 : ออกแบบหน้าจอ (design)
ตอนที่ 3 : สร้าง Adapter
ตอนที่ 4 : เซ็ต onItemClick
ตอนที่ 5 : สรุป


ธมนวรรณ มณีจันทร์

ธมนวรรณ มณีจันทร์

|:- เราเชื่อมั่นว่าการเสียสละและการแบ่งปันจะทำให้โลกใบนี้สวยงามมากขึ้น ทุกๆ จุดเริ่มต้นของการเรียนรู้ นำไปสู่การเรียนรู้ถัดไป เว็บไซต์แห่งนี้ขอเป็นส่วนหนึ่งของการแบ่งปันความรู้ที่ไม่มีที่สิ้นสุด มาร่วมกันผลักดันโลกของเราให้หมุนไปพร้อมกับพลังแห่งความรักด้วยกันนะคะ :) >>> |:- About Me! -:|