ตอนที่ 3 : สร้าง Adapter

เราเริ่มต้นสร้าง “Adapter” ด้วยการสร้างไฟล์ Java ขึ้นมาใหม่
ตั้งชื่อว่า CustomAdapter

mystou-com-android-adapter-basic-3-1

จากนั้นทำการ สืบทอด (extends) BaseAdapter
แล้ว Implement Methods ที่ต้องมีเข้ามา
จะได้โค้ดดังนี้

ทำการสร้างตัวแปรประเภท LayoutInflater และ Context ขึ้นมา
แล้วสร้าง Constructor เพื่อกำหนดค่าเริ่มต้นให้ตัวแปรดังนี้

จากนั้นสร้าง Inner Class ชื่อ ViewHolder เตรียมไว้
โดยประกาสตัวแปรตาม layout ที่เราสร้างขึ้นมา

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

ตอนนี้เราจะได้โค้ดดังนี้ค่ะ

คราวนี้มาดูเมธอดที่ Override มากันนะคะ

เริ่มต้นที่เมธอดแรก getCount()
ทำหน้าที่คืนค่าจำนวนรายการทั้งหมด
เราจะจำลองข้อมูลไว้
โดยให้ return 30; กลับไป

เลื่อนลงมาดูที่เมธอด getView()
ทำหน้าที่คืนค่า view กลับไป
เราเริ่มต้นเมธอดนี้ด้วยการ เช็คว่า view ถูกสร้างขึ้นมาหรือยัง
แน่นอนว่าครั้งแรก view ยังไม่ถูกสร้าง
เราก็ทำการสร้าง view ขึ้นมาผ่านทาง inflate
ขั้นตอนนี้แหละค่ะที่เราดึง layout ที่สร้างเอาไว้มาใช้งาน

ตอนนี้เราจะได้โค้ดดังนี้ค่ะ

ไปที่ไฟล์ MainActivity.java ค่ะ
ทำการ matchingView กับ ListView ให้เรียบร้อบ
แล้วสร้าง Adapter ส่ง Context เข้ามา
จากนั้น setAdapter ให้ Listview แล้วลอง Run ดูผลลัพธ์ ค่ะ

โค้ด MainActivity.java มีดังนี้

ถ้าไม่มีอะไรผิดพลาด เราจะได้ผลลัพธ์ดังนี้

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

จะเห็นว่า ตอนนี้ไฟล์ layout_item.xml ที่เราสร้างเอาไว้
ถูก Adapter ดึงมาใช้งาน แล้ะนำมาแสดงผลที่ ListView แล้ว

ต่อมาเราจะทำการเปลี่ยนแปลง หัวข้อ (title)
และรายละเอียด (detail) ของ layout แต่ละ item ค่ะ

ในเมธอด getView ()
ส่วนของ if ถ้าเป็นจริง จะสร้าง view ขึ้นมา
เมื่อสร้าง view แล้ว เราก็ทำการจับคู่
ตัวแปรจาก ViewHolder กับ id ที่ layout_item.xml
ประกาศ ViewHolder ไว้ส่วนของคลาส นะคะ
แล้วจับคู่ให้ครบทุกตัว
เสร็จแล้วทำการ setTag() เอาไว้ด้วย

แล้วสร้างบล๊อก else ขึ้นมาในกรณีเป็นเท็จ
หมายความว่า view ถูกสร้างขึ้นมาแล้ว
เราก็ getTag() มาใช้งานได้เลย
ไม่ต้อง findViewById ใหม่

ออกจาก if มา ก็เป็นการกำหนดค่า
เราลองกำหนดค่าตามต้องการ ในส่วนของ
title และ detail รูปก็ใช้อันเดิมก่อนก็ได้คะ
ยังไม่ต้องเปลี่ยน เราจะใส่ค่า posotion ไปด้วย
จะได้รู้ว่าแต่ละ item มีค่าต่างกันทั้งหมด 30 ค่า

โค้ดทั้งหมดมีดังนี้

ลอง Run ดูนะคะ

mystou-com-android-adapter-basic-3-4

ผลการ Run ครั้งนี้จะเห็นว่า ค่าแต่ละ Item ถูกเปลี่ยนไปแล้ว
เลื่อนลงไปจนหมดจะได้ทั้งหมด 29 items ตามจำนวนที่เราสมมติไว้
นับเริ่มจาก 0 ก็จะได้จำนวน 30 พอดีค่ะ ^_^

mystou-com-android-adapter-basic-3-5

ตอนต่อไปเราจะทำการกำหนด onItemClick กันนะคะ
คือเมื่อคลิกแล้วจะแสดง ตำแหน่ง (position) ที่ถูกคลิกค่ะ


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


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

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

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