Introduction List View Prawit Pimpisan Computer Science RERU.

งานนำเสนอเรื่อง: "Introduction List View Prawit Pimpisan Computer Science RERU."— ใบสำเนางานนำเสนอ:

1 Introduction List View Prawit Pimpisan Computer Science RERU

2 List View ListView เป็นการแสดงรายการลิสของข้อมูล
อุปกรณ์ Android ส่วนใหญ่มีขนาดเล็ก มีพื้นที่ใช้งานอย่างจำกัด ถ้ารายการมีจำนวนมาก จำเป็นต้องมีการแสดงเป็น list

3 Adapter to ListView การแสดง ListView อย่างง่ายที่สุดคือการใช้ Adapter
Adapter ทำหน้าที่แปลงข้อมูล Array ไปแสดงยัง ListView

4 Simple ListView (layout)
สร้าง New Project -> Empty Activity จัดตำแหน่งให้เต็มจอ โดยการลบ padding ที่ layout ออก เพิ่ม ListView ลงไปที่หน้าจอ

5 Simple ListView (activity)
สร้างข้อมูล Array สำหรับรายการลิส ส่งข้อมูลเข้า adapter ชื่อ simple_list_item_1 เพื่อทำการจัดเรียงแล้วแปลงเป็นลิส ส่งรายการลิสไปที่ ListView

6 ตรวจจับการแตะรายการ ตรวจจับการแตะรายการโดยการ implement OnItemClickListener เข้ามา ดักจับการแตะด้วยเมธอด setOnItemClickListener() ใส่คำสั่งการทำงานเมื่อมีการแตะที่เมธอด onItemClick()

7 การใช้งาน ArrayList เป็นการกำหนดขนาด array แบบ dynamic
ArrayList สามารถเพิ่มลบข้อมูลในขณะ Runtime ได้ เป็นการกำหนดขนาด array แบบ dynamic สามารถ เพิ่ม ลบ รายการตามตำแหน่งได้

8 การใช้งาน ArrayList จากตัวอย่างก่อนหน้านี้ ทดลองใช้งาน ArrayList แทน array ทดลองใช้เมธอดของ Arraylist ที่ทำการ เพิ่ม ลบ และแสดงข้อมูล add(), remove(), get()

9 การใช้งาน ArrayList กับ HashMap
ถ้าต้องการเก็บ array แบบหลายคอลัมน์ สามารถทำได้หลายวิธี เช่นวิธี Hashmap สามารถนำไปประยุกต์กับการเรียกใช้ข้อมูลจาก database ได้ HashMap เป็นลักษณะของการผูกคีย์กับค่าข้อมูล <key, Value>

10 ใช้ ArrayList และ Class ข้อมูลลิส
สร้างคลาสชื่อ Data เพื่อใช้เป็นต้นแบบเก็บข้อมูลแต่ละ Record คลิกขวาที่ชื่อแพคเกจในโฟลเดอร์ java : New->Java Class

11 ใช้ ArrayList และ Class ข้อมูลลิส (Data.Class)
อักษรตัวแรกเป็นตัวใหญ่

12 ใช้ ArrayList และ Class ข้อมูลลิส (Data.Class)
สร้าง Class ที่เก็บข้อมูลแต่ละ record ประกอบด้วยฟิวล์ของ title, description, icon

13 Custom Adapter การสร้าง Adapter ในตัวอย่างที่ผ่านมา (simple_list_item_1) มีรูปแบบการแสดงแบบง่ายๆ คือ แต่ละแถวมีเพียง 1 ข้อความ Simple Adapter เหมาะสำหรับทำการทดสอบ หรือสร้างเมนู หรือรายการต่างๆที่ไม่ต้องการรายละเอียดมาก ถ้าต้องการรายละเอียดการแสดงให้กับ ListView ให้มากขึ้นเช่น มีภาพ มีข้อความให้แต่ละรายการ(แถว) จะต้องสร้าง Custom Adapter Custom Adapter คือ Adapter ที่สร้างรายละเอียดรายการจัดแสดง โดยกำหนดรายละเอียดที่จะแสดงแต่ละแถวขึ้นมาเอง

14 Custom Adapter - layout
เตรียม Layout หรับแสดงแต่ละแถว (Row) ข้อมูลลิส ประกอบด้วยข้อมูลหลายๆแถวเรียงต่อกัน สร้าง layout เพื่อใช้เป็นต้นแบบให้กับแต่ละแถวรายการ สร้าง layout ขึ้นมาใหม่ ทดลองสร้าง layout โดยกำหนดให้ตำแหน่งภาพวางซ้าย และข้อความมี 2 บรรทัด

15 Custom Adapter - layout
จัดรูปแบบ layout ที่ประกอบด้วย ImageView และ Text จัดวาง ImageView ไว้ซ้าย และ TextView 2 ชิ้น

16 Custom Adapter – list class
ทดลองใช้คลาสที่สร้างจากตัวอย่างก่อนหน้านี้

17 Custom Adapter – adapter class
สร้าง class สำหรับ Adapter ทำหน้าที่ในการจัดเรียงรูปแบบ array หรือ list ให้เป็นไปตามรูปแบบที่กำหนด จัดเรียงข้อมูลก่อนส่งออกจอภาพ Class ที่ทำหน้าที่ adapter จะต้อง extends BaseAdapter ทำการ implements เมธอทต่างๆ โดยเมธอดที่สำคัญต่อการแสดงผลคือ getView

18 Custom Adapter – adapter method
getCount - เอาไว้บอกว่ามีข้อมูลอยู่ทั้งหมดกี่ชุด (จำนวน Array ที่ใช้กำหนดเป็นข้อมูล) getItem - เอาไว้ดึง Object ใดๆแล้วแต่จะกำหนด เช่น List View ที่มี Text View เป็นสมาชิกหลัก เพื่อง่ายต่อการศึกษาสามารถ Return เป็น Text View ของข้อมูลแถวที่ต้องการได้ getItemId - คล้ายๆกับ getItem แต่เป็น ID ของ Object นั้นๆ getView - เอาไว้กำหนดค่าให้กับ Layout ที่ใช้แสดงในแต่ละแถวของ List View

19 Custom Adapter – adapter class
ก่อนทำการกำหนดรายละเอียดให้กับ view ใน adapter class จะต้องมีการกำหนดค่าข้อมูลที่ต้องการแสดงให้กับ adapter ก่อน สร้าง constructor เพื่อกำหนดข้อมูลรายละเอียดรูปแบบที่จะทำการส่ง สร้าง class ขึ้นมาเพื่อใช้สำหรับแสดงรายการแต่ละแถว (หลีกเลี่ยงการใช้ findViewById เพื่อประสิทธิภาพความเร็วในการทำงานสูงสุด)

20 Custom Adapter – adapter class
ทำการ Implement เมธอด getView โดยการกำหนดรายละเอียดสิ่งต่างๆที่ต้องการแสดงในแต่ละแถว แต่ละแถวจะแสดง Item รูปแบบเดียวกัน สร้างรูปแบบการจัดแสดงแถวเพียงแค่ครั้งเดียว นำรูปแบบที่เคยสร้างไว้นำกลับมาใช้ใหม่ (Reuse) เพื่อประสิทธิภาพการทำงานที่รวดเร็ว

21 Icon Image ทำการเพิ่มรูปที่ต้องการใช้เป็น Icon ให้กับแต่ละ List รายการ
เลือกรูปขนาด Icon ( px) Copy รูปมาวางไว้ที่โฟลเดอร์ mipmap เลือกวางไว้ที่ขนาด mdpi (Baseline)

22 MainActivity ทำการแสดงรายการ ListView โดยการกำหนด Data Source ขึ้นมาเอง ทดลองกำหนด Data Source โดยใช้เป็นข้อมูลชนิด ArrayList ให้ Item แต่ละชิ้นของ ArrayList เป็น class ตามที่กำหนด (กำหนด template เป็น data class) แต่ละ list รายการ ทำการเพิ่มรายละเอียดเข้าไป (ชื่อ, รายละเอียด, ....) แล้วเพิ่มลงไปใน arrayList นำ Data Source ที่ใส่ค่าเสร็จแล้ว ใส่ลงไปให้กับ Adater ที่สร้างขึ้นมา

23 สรุปการทำงานของ Custom Adapter
หลักการทำงานคือ สร้าง Adapter ขึ้นมาใหม่ ทำหน้าที่ในการรับข้อมูล List มาจาก MainActivity โดยที่ใน Adapter นั้นจะมี Layout ภายในที่ทำหน้าที่จัดรูปแบบในแต่ละบรรทัด (แต่ละ Row) การทำงานของ Custom Adatper ที่สร้างมานั้นใช้หลักการนำ object ของแถวที่ผ่านไปแล้วนำกลับมาใช้ใหม่ เรียกว่า View Holder Design Pattern ซึ่งจะมีการสร้าง object เพื่อเก็บแถวเอาไว้ โดยมี tag เป็นตัวอ้างอิง เมื่อเลื่อน Scroll เรื่อยๆ ระบบ Android จะทำการตรวจสอบว่า Object ไหนที่ไม่ใช้แล้ว (หลุดจอ) ก็จะนำกลับมาใช้ใหม่โดยเรียกตรงจาก tag เลย ไม่ต้องเสียเวลาในการสแกนหาด้วย findViewById อีก ทำให้ระบบลิสมีประสิทธิภาพการทำงานดีขึ้น