สวัสดีครับ บทความนี้เป็นบทความที่ 17 แล้วนะครับ ที่ผมจะมาเขียน ในซีรีย์
Learn 30 Android Libraries in 30 days
สำหรับบทความทั้งหมด อ่านได้จากด้านล่างครับ
สำหรับวันนี้ขอนำเสนอเรื่อง SwipeListView เป็น Library ที่เอาไว้ทำให้ ListView สามารถที่จะ swipe เลื่อนซ้าย ขวาได้ ดังตัวอย่าง วิดีโอและรูปข้างล่างเลยครับ
Link Youtube : https://www.youtube.com/watch?v=E0352OH488M
Installation
ขั้นตอนการติดตั้ง ง่ายๆครับ เพิ่ม dependencies ลงไปที่ไฟล์ build.gradle
(ไฟล์ภายใน Module)
ต่อจากนั้นก็เพิ่ม Maven Central ที่ไฟล์ build.gradle
ใน Root Project ดังนี้
ถ้ามี maven url หลายอัน ก็จะได้เป็นลักษณะนี้
กด Sync Project with Gradle File เป็นอันเรียบร้อย
Getting Started
การใช้งาน SwipeListView
มีตัวอย่าง Demo ให้ดูที่ Google Play ด้วยนะครับ ลองโหลดมาลองดูได้ ส่วน Sample Code ก็ตามนี้
สำหรับวิธีการใช้งาน ก็เหมือนการใช้ ListView
ธรรมดาเลยครับ โดย xml จะมีลักษณะประมาณนี้
ส่วนข้างล่างเป็นคำอธิบายแต่ละ attributes ครับ
swipeFrontView
: เลเอาท์สำหรับ Front View (ต้องมี)
swipeBackView
: เลเอาท์สำหรับ Back View (ต้องมี)
swipeActionLeft
: เอฟเฟคเวลา swipe ไปทางซ้าย มีให้เลือก reveal (default) กับ dismiss
swipeActionRight
: เอฟเฟคเวลา swipe ไปทางขวา มีให้เลือก reveal (default) กับ dismiss
swipeMode
: เลือก Gestures หรือไม่ มี ให้เลือก none, both, right, left
swipeCloseAllItemsWhenMoveList
: ให้ปิดที่ swipe ไว้ทั้งหมด เวลาเลือก listView. Default เป็น true
swipeOpenOnLongPress
เปิดเมื่อกด Long Press. Default เป็น true
swipeAnimationTime
: เวลาที่ใ้ห้แสดง animation หน่วยเป็น ms
swipeOffsetLeft
และ swipeOffsetRight
: ระยะ offset เวลา swipe ไปซ้ายขวา จะให้มันเว้นระยะแค่ไหน
OK เมื่อรู้วิธีใช้และ attribute เบื้องต้นแล้ว ต่อไปก็มาสร้างโปรเจ็คกันนะครับ มันคล้ายๆกับ ListView ทั่วๆไป
Create Project
เป้าหมายโปรเจ็คคือ แสดง ListView เป็นชื่อเว็บไซต์ที่มีบทความสอนแอนดรอยส์ จากนั้นเมื่อ Swipe ก็จะมีปุ่มให้กดไปหน้าเว็บไซต์นั้นๆครับ สำหรับไฟล์และเลเอาท์ที่จะใช้ก็จะมีดังนี้
SwipeListViewActivity.java
: สำหรับ Activity หลักครับ
CustomAdapter
: มี Custom Adapter คลาสนึง เอาไว้แสดง หน้า front และ back ของ ListView แต่ละแถว
activity_swipe_listview.xml
: หน้าเลเอาท์หลัก มี SwipeListView
อยู่ภายใน
list_item.xml
: สำหรับ Layout ในแต่ละ row ของ SwipeListView
บทความที่เกี่ยวข้อง
เริ่มที่ activity_swipe_listview.xml
มีแค่ SwipeListView
ภายใน LinearLayout อันเดียวเท่านั้น
ต่อมาก็สร้างเลเอาท์ แต่ละแถวของ ListView ก็คือไฟล์ list_item.xml
โดยให้ FrontView อยู่ด้านบนของ BackView
เลเอาท์ LinearLayout และ RelativeLayout จะซ้อนกันแบบนี้
จะเห็นว่า มี id ชื่อ @+id/back
และ @+id/front
ซึ่งเป็นเลเอาท์ สำหรับแสดงข้างหน้าก่อนการ swipe และ เลเอาท์ข้างหลัก เมื่อมีการ swipe ดังที่ประกาศ attribute
ไว้ในไฟล์ activity_swipe_listview.xml
Custom Adapter
ต่อมาผมทำ Custom Adapter เพื่อจะจัดหน้าตาเลเอาท์แต่ละ row เอง ส่วนนี้ไม่ขอลงรายละเอียดมากนะครับ ไปอ่านเพิ่มเติมในบทความเกี่ยวกับ Custom ListView ดูครับ
ทำการตั้งชื่อว่า WebsiteAdapter.java
มีโค๊ดดังนี้
ตัวเว็บไซต์มี ชื่อ มี url และมีโลโ้ก้ ฉะนั้นผมเลยสร้างคลาส Website ขึ้นมาครับ ดังนี้
สุดท้ายที่ไฟล์ Activity หลัก ผมตั้งชื่อว่า SwipeListViewActivity
โค๊ดด้านบน เป็นการสร้าง WebsiteAdapter
จาก ArrayList<Website>
ที่ผมจำลองขึ้นมา จากนั้นก็ setAdapter()
ให้กับ SwipeListView
ส่วน SwipeListView
ทำการ setSwipeListViewListener
ให้มันเพื่อส่ง callback กลับมา ในกรณีที่มีการ swipe จากนั้นผม override เมธอด แค่ตัวเดียวครับ onDismiss
เวลาที่ทำการ swipe ไปทางซ้าย ก็จะเป็นการเรียก dismiss (ที่คอนฟิคไว้ใน xml) ก็จะให้แถวๆนั้น ไปอยู่ท้ายสุดของ List ครับ ส่วนเมธอดใน Listenter มีอะไรบ้าง ก็ตามรูปครับ ลองนำไปประยุกต์ใช้ดูครับ
ส่วนใน initSampleData()
ผมทำการสร้าง ข้อมูลขึ้นมา โดยใส่ title, url และ ไฟล์รูปภาพนะครับ สำหรับใครอยากได้รูปภาพ ก็โหลดจาก Github เลยครับ ภาพแอบขโมยมาจากแถวๆนี้แหละครับ :)
เมื่อรัน ผลลัพธ์ก็ได้ดังรูป
Happy Coding :D
References