SwipeRefreshLayout หรือเมื่อก่อนที่เรียกกันติดปากว่า PullToRefresh นั่นเอง ถ้ายังนึกภาพไม่ออกมันคือการ "ดึงลง" แล้ว "ปล่อย" โดยปกติเรามักจะใช้เมื่อต้องการ reload ข้อมูล ซึ่งถ้าจะให้กดปุ่มแล้ว refresh มันก็คงจะดูไม่ cool ซักเท่าไร ก็เลยเป็นที่มาของการ "ดึงลง" แล้ว "ปล่อย" เพื่อ refresh หรือ reload นั่นเองแหละจ้า (จริงๆ เหตุผลน่าจะเป็นเรื่องของ Usability มากกว่านะครับ เรื่องความ cool นี่ คหสต. ล้วนๆ 55)

การติดตั้ง

เจ้า SwipeRefreshLayout จะมากับ support library v4 ใครใช้อยู่แล้วก็ไม่ต้องทำอะไรเพิ่ม

compile 'com.android.support:support-v4:22.2.0'

การใช้งาน

มาเริ่มในส่วนของ Layout XML กันก่อน

<android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/swipe_refresh"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</android.support.v4.widget.SwipeRefreshLayout>

ต่อมาในส่วนของ Activity ผมจะเอา Butter Knife ในบทความก่อน มาใช้งานด้วยนิดนึงนะครับ

public class SwipeToRefreshActivity extends AppCompatActivity {

    @InjectView(R.id.listview)      ListView           mListView;
    @InjectView(R.id.swipe_refresh) SwipeRefreshLayout mSwipeRefreshLayout;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.acivity_swipe_refresh);
        ButterKnife.inject(this);

        // setup listview data and adapter
        mListView.setAdapter(...);

        mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                // เมื่อทำการ "ดึง" แล้ว "ปล่อย" ให้ทำการโหลดข้อมูลใหม่
                refreshItems();
            }
        });
    }

    void refreshItems() {
        // โหลดข้อมูลใหม่
        ...

        // สมมุติว่าโหลดเสร็จแล้ว
        onRefreshCompleted();
    }

    private void onRefreshCompleted() {
        // สั่งให้ SwipeRefreshLayout หยุดทำงาน
        mSwipeRefreshLayout.setRefreshing(false);
    }
}

การใช้งาน SwipeToRefreshActivity เบื้องต้นก็มีเพียงเท่านี้แหละครับ :)

Tips

เราสามารถเปลี่ยนสีของตัว Loading ที่หมุนๆ ของ SwipeRefreshLayout ได้ด้วยวิธีการดังนี้

mSwipeRefreshLayout.setColorSchemeResources(R.color.red, R.color.green, R.color.blue);

อยากได้กี่สีก็จัดไปเลยเต็มที่

จะเปลี่ยนสี Background ก็ยังได้

mSwipeRefreshLayout.setProgressBackgroundColorSchemeResource(R.color.pink);

ปรับขนาดได้ 2 size คือ Default กับ Large

mSwipeRefreshLayout.setSize(SwipeRefreshLayout.LARGE);

สุดท้าย ... ของฝากนักก๊อป

ในการพัฒนา Application จริงๆ บางทีเราอาจจะต้องใช้ SwipeRefreshLayout ในหลายๆ หน้า ครั้นจะให้มาเซ็ตค่าทุกครั้งก็คงจะดูไม่งาม ซึ่งทางออกที่ผมจะมาเสนอก็ คือ เขียน Class ที่ extends SwipeRefreshLayout ขึ้นมาแล้วเซ็ตค่าทีเดียว หน้าตาจะเป็นยังไงมาชมกันครับ

public class MySwipeRefreshLayout extends SwipeRefreshLayout {
    public MySwipeRefreshLayout(Context context) {
        super(context);
        init();
    }

    public MySwipeRefreshLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        setColorSchemeResources(R.color.shopspot_red, R.color.link_color_blue, R.color.green);
        setProgressBackgroundColorSchemeResource(R.color.pink);
        setSize(LARGE);
    }

    // สั่งให้เริ่มงาน
    public void startRefresh() {
        setRefreshing(true);
    }

    // สั่งให้หยุดทำงาน
    public void refreshComplete() {
        setRefreshing(false);
    }

}

สำหรับบทความเรื่อง SwipeRefreshLayout ก็คงจบลงเพียงเท่านี้ ยังไงก็ลองเอาไปใช้กันดูนะครับ ขอบคุณครับ

ลิงค์อ้างอิง

Google : SwipeRefreshLayout
sapandiwakar.in : Swipe/Pull to Refresh for Android RecyclerView
bignerdranch.com : Implementing Swipe to Refresh, an Android Material Design UI Pattern