iT邦幫忙

2024 iThome 鐵人賽

DAY 20
0

這次我們將上一篇做的RecyclerView更進階一點,讓它再最頂部下拉進行更新。
不知道怎麼做RecyclerView跟MVP架構可以翻翻之前的,再回來做就好。


可下滑更新的RecyclerView

為了能達到下滑更新的效果,我們需要用到Swiperefreshlayout,它是Android Support Library(安卓支援函式庫)中提供的一種佈局。

因此我們需要將RecyclerView包在Swiperefreshlayout 中,這是我們需要做的第一步驟。

  • 在activity_main.xml 程式碼,於原本寫的RecyclerView 外增加swiperefreshlayout。

  • 我們會發現是全紅狀態,先不要慌張,使用快捷鍵Alt + Enter
    https://ithelp.ithome.com.tw/upload/images/20240928/20168454z8To6MG8af.png

  • 選擇第一個
    https://ithelp.ithome.com.tw/upload/images/20240928/20168454WiSxHCn3yY.png
    添加依賴,你可以在build.gradle(:app)中看到,它的新增項目,我們有在開發環境介紹中提到一下,忘記的可以回去看看。
    https://ithelp.ithome.com.tw/upload/images/20240928/20168454eCWvQbJGMd.png

  • 完成後,會是正常狀態,記得新增id
    https://ithelp.ithome.com.tw/upload/images/20240928/20168454g5zI2wpl1J.png

(完整程式碼)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/main_swip_sl"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/main_list_rv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity

我們這次只需要在MainActivity中做更變。

  • 宣告一個swiperefreshlayout變數
    https://ithelp.ithome.com.tw/upload/images/20240928/20168454Hmd7ebvKgs.png

  • 這次還會用到colors.xml,點擊res資料夾>values>colors.xml,新增一個顏色
    https://ithelp.ithome.com.tw/upload/images/20240928/20168454BuXgLsggAL.png
    (程式碼)

<color name="blue_RURI">#005CAF</color>

也可以新增一個自己喜歡的顏色,因為這是去設置下滑更新時的轉動鍵頭顏色。

  • 在onCreate裡
    https://ithelp.ithome.com.tw/upload/images/20240928/20168454ETXgMMgwOh.png
  1. 綁定我們swiperefreshlayout
  2. 設置鍵頭顏色
  3. marrayList.clear => 清空資料
  4. mainPresenter.Data() => 讓假資料重新產生
  5. notifyDataSetChanged() => 通知資料被變動
  6. swipeRefreshLayout.setRefreshing(false) => 把橫條動畫結束, 如果沒有這一行它是部會消失的要注意一點

(完整程式碼)

public class MainActivity extends AppCompatActivity implements MainContract.view{

    //設定RecycleView類別的變數名稱recycleView
    private RecyclerView recyclerView;
    MainAdapter mainAdapter;
    private MainPresenter mainPresenter;
    SwipeRefreshLayout swipeRefreshLayout;

    //新增一個HashMap存放每筆資料
    ArrayList<HashMap<String, String>> marrayList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mainPresenter = new MainPresenter(this);
        mainPresenter.Data();

        //設置RecycleView
        recyclerView = findViewById(R.id.main_list_rv);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL));
        mainAdapter = new MainAdapter(marrayList);
        recyclerView.setAdapter(mainAdapter);

        //下拉刷新
        swipeRefreshLayout = findViewById(R.id.main_swip_sl);
        swipeRefreshLayout.setColorSchemeColors(getColor(R.color.blue_RURI));
        swipeRefreshLayout.setOnRefreshListener(()->{
            marrayList.clear();
            mainPresenter.Data();
            mainAdapter.notifyDataSetChanged();
            swipeRefreshLayout.setRefreshing(false);

        });
    }

    @Override
    public void getData(ArrayList arrayList) {
        marrayList = arrayList;
    }
}

執行畫面

完成上方動作後,就完成我們能下滑更新的RecyclerView囉~

(剛開始)
https://ithelp.ithome.com.tw/upload/images/20240928/20168454RdeQbqUHLT.png

(下滑更新,轉圈圈)
https://ithelp.ithome.com.tw/upload/images/20240928/20168454fDmhyh0eYJ.png

(放開,轉圈圈消失,資料更新)
https://ithelp.ithome.com.tw/upload/images/20240928/20168454eg18UUo83s.png


上一篇
元件篇-RecyclerView Day19
下一篇
元件篇-RecyclerView+Intent Day21
系列文
Android 元件總動員 - 運用與實踐元件指南30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言