มาลองทำแอปบล็อกของตัวเองกันดีกว่า ตอนที่ 2 : มาทำ push to refresh กันเถอะ

Android Jun 30, 2016

หน้าแอปเราในตอนนี้ มีทั้งหน้าแรกที่แสดงบล็อกทั้งหมดที่เขียน และหน้าสองที่เป็นหน้าเนื้อหา

ด้วยความที่อาจจะมีบทความใหม่ระหว่างที่ดูแอปบล็อกของเราอยู่ ผู้ใช้แอปใช้ความเคยชิน ที่ใช้นิ้วสไลด์ด้านบนลงมาเพื่อ refresh ดังนั้น เราจึงต้องมีส่วนนี้ขึ้นมา ส่วนนี้คืออะไร มันคือ SwipeRefreshLayout ซึ่งมันจะทำงานครอบตัวที่ scroll ได้ ในที่นี้ คือ listview ของเรานั่นเอง

แหล่งข้อมูล :
- เอามาจากคอร์สพี่เนยคะ
- Implementing Pull to Refresh Guide

ก่อนอื่น เปิดหน้าที่มี listview ก่อนเลย ในที่นี้คือ fragment_main.xml นั่นเอง

จากนั้นเราเรียก SwipeRefreshLayout ครอบ listview ของเรา ซึ่งเราจะใส่ครอบตัวที่เลื่อนได้ โดยมันอยู่ใน android support library version4 แปะไปดังรูป อย่าลืมใส่ ID ให้มันด้วยนะ

ต่อมา เป็นส่วน implement code แล้วหล่ะ เข้าไปเปิด MainFragment.java
ประกาศตัวแปรขึ้นมา พร้อม findViewById ให้เรียบร้อย

เรียก method setOnRefreshListener เพื่อ implement ตัว swipeRefreshLayout (ตามกรอบสีแดง) ให้ทำงานตามเราต้องการ นั้นคือ เมื่อเราเอานิ้วเลื่อนจอลง มันจะ refresh data ถ้ามีอันใหม่ มันจะอยู่บนสุด จึงเอา function ที่เรียก service มาแยกเป็น function ใหม่ นามว่า reloadData (ตามกรอบสีนํ้าเงิน)

ดังนั้น เราจึงต้อง handle เพื่อในส่วนที่เราเรียก service ขึ้นมาทำงานด้วย เพราะที่เรา implement ไป มันจะโหลดหมุนๆไปเรื่อยๆ ไม่จบ จึงต้องใส่ swipeRefreshLayout.setRefreshing(false); เพื่อหยุดหมุนเมื่อโหลดเสร็จ ทั้งกรณีที่โหลดได้ และโหลดไม่ได้

จากรูปก่อนที่มีกรอบส้มๆ เนื่องจากการทำงานของ swipeRefreshLayout กับ listview จะมี bug นึงเกิดขึ้น คือ เราไม่สามารถเลื่อน listview ขึ้นลงได้อย่างเดิม จึงต้องเพิ่มคำสั่ง ว่า ให้ทำงานเมื่อ listview แรกอยู่บนสุดเท่านั้น

เรามาลองรันดูดีกว่าว่า จะโอเคไหม โดยทดสอบกับการ publish บล็อก blogger json api ดู ว่าตอนใหม่มา มันจะโผล่ขึ้นด้านบนหรือไม่ ถ้าโผล่มาแสดงว่าทำถูกต้องแล้วจ้า

นั่นไง การเรียกใช้งานง่ายนิดเดียว แต่ทว่า เวลาเราใช้งาน มันจะโหลดใหม่ทั้งหมด เราอาจจะ implement เพิ่มให้ไม่โหลดใหม่ทั้งหมดได้ ในฟังก์ชั่น onRefresh()