Thứ Bảy, 25 tháng 8, 2018

BÀI 5: Sử dụng SwipeRefreshLayout trong Android

BÀI 5: Sử dụng SwipeRefreshLayout trong Android

Khi “chế tạo” các ứng dụng mang tính thực tế, mà đa phần là các ứng dụng tải dữ liệu từ internet về và đổ lên các ListView, GridView và mới hơn là RecyclerView, thông thường LTV đều cung cấp tùy chọn Refresh để người dùng có thể buộc tải lại dữ liệu. Ngoài việc sử dụng OptionsMenu trên ActionBar, bạn cũng có thể sử dụng SwipeRefreshLayout để cử chỉ refresh được diễn ra tự nhiên hơn. Nếu bạn chưa rõ SwipeRefreshLayout là gì, thì hãy bật ứng dụng Cộng Đồng Mod lên, cuộn lên đầu, rồi kéo xuống tiếp cho tới khi hiện ra một biểu tượng tròn tương tự như bên dưới. Biểu tượng tròn đó hiện ra chính do SwipeRefreshLayout.

1. Thêm SwipeRefreshLayout vào giao diện:

SwipeRefereshLayout thuộc gói thư viện Support v4. Gói này bình thường đã nằm trong gói AppCompat v7 rồi, vì vậy nếu bạn đã có appcompat-v7 trong build.gradle:app rồi thì bạn không phải làm gì thêm ở bước thư viện. Một điều quan trọng là SwipeRefeshLayout chỉ hoạt động với các ViewGroup chứa các children dạng cuộn như ListView, GridView, RecyclerView và các subsclasses của chúng, và bắt buộc ViewGroup đó phải là view child duy nhất của SwipeRefreshLayout. Bạn sẽ thấy rõ hơn trong phần layout mẫu bên dưới:

<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/swiperefresh"
android:layout_width="match_parent"
android:layout_height="match_parent">

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

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

2. Callback khi người dùng refresh:

“Khi người dùng refresh” ở đây có nghĩa là khi người dùng đã cuộn lên đầu danh sách và kéo xuống tiếp để hiện các vòng tròn có mũi tên như bên trên, và thả tay ra, thì SwipeRefreshLayout.OnRefreshListener#onRefresh sẽ được gọi. Bạn sẽ gán interface này cho SwipeRefeshLayout với thao tác quen thuộc là SwipeRefreshLayout#setOnRefreshListener(SwipeRefreshLayout.OnRefreshListener). Chẳng hạn:
final SwipeRefereshLayout srl = (SwipeRefreshLayout) findViewById(R.id.swiperefresh);
srl.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
     @Override
     public void onRefresh() {
          Toast.makeText(srl.getContext(), "User refreshes", 0).show();
     }
})
Ở đây, thông thường bạn sẽ cho ứng dụng fetch lại các thông tin từ server và gán lại nội dung cho ph

3. Một số thao tác khác:

SwipeRefreshLayout#setRefresh(boolean): Được dùng để ép buộc SwipeRefreshLayout thực hiện hoặc hủy thao tác refresh ngay. Bạn có thể dễ dàng đoán được cái boolean kia có ý nghĩa gì rồi.
SwipeRefreshLayout#setColorSchemeColors(int…) và SwipeRefreshLayout#setColorSchemeResources(@ColorRes int…): Đặt các màu cho progress indicator thay đổi. Bạn hãy nhìn lại app Gmail và thấy cái progress indicator thay đổi tuần hoàn từ đỏ sang vàng, rồi xanh lá và cuối cùng là xanh dương rồi quay lại từ đầu. Điều đó có được là do một trong hai methods vừa nêu. Sự khác biệt giữa chúng là cái đầu tiên yêu cầu các tham số Color trực tiếp, ví dụ Color.BLUE hay Color.parseColor(“#0000FF”), còn tên thứ hai yêu cầu Color dạng resource, hay gần gũi hơn là R.color.colorRes, ví dụ R.color.colorPrimary.
SwipeRefreshLayout#setProgressBackgroundColorSchemeColor(int) và SwipeRefreshLayout#setProgressBackgroundColorSchemeResource (@ColorRes int): Thay đổi màu nền của biểu tượng hình tròn, mặc định là màu trắng. Sự khác biệt giữa hai methods trên là cái đầu tiên yêu cầu các tham số Color trực tiếp, ví dụ Color.BLUE hay Color.parseColor(“#0000FF”), còn tên thứ hai yêu cầu Color dạng resource, hay gần gũi hơn là R.color.colorRes, ví dụ R.color.colorPrimary.
SwipeRefreshLayout#setOnChildScrollUpCallback(SwipeRefreshLayout.OnChildScrollUpCallback): Dùng để override SwipeRefreshLayout#canChildScrollUp(). Method này sẽ được overriden và return theo giá trị của SwipeRefreshLayout.OnChildScrollUpCallback#canChildScrollUp(SwipeRefreshLayout, View). Thông thường, bạn ít khi dùng method này và nếu override thì cũng chỉ với mục đích chèn thêm một số đoạn code của bạn, vì vậy bạn nên return giá trị gốc trừ trường hợp thực sự cần thiết phải làm khác.
Chúc các bạn thành công.ần UI.