Swift — 實作 Pull to refresh（ UIRefreshControl ）

使用 UIRefreshControl 來實現下拉更新的畫面。

前言：

前面我們教學中有做出幾個即時更新 TableView 的方法，不論我們是透過 reloadData 或是 updates 方式。只要使用者送出，我們就馬上更新我們的 TableView 的數據。

常見的 Pull to refresh

但是市面上我們常常會看到部分 APP 會在當使用者下拉表單時，才會加載新的資料，我們稱為下拉更新（ Pull to refresh ），所以我們這次的功能就是需要使用者下拉我們 TableView 之後，如同上圖，之後我們的 TableView 才會真正進行讀取、刷新資料的動作。

實作：

第一階段：

那麼首先我們就先建立一個有簡單資料的 TableView 即可:

接著我們就需要一個 UIRefreshControl 來替我們啟動更新 TableView 的操作。所以我們宣吿一個類型為 UIRefreshControl 的變數：

var refreshControl:UIRefreshControl!

接著我們在 viewDidLoad 去初始化它，並將它 add 到我們的 TableView 上：

這時候你會看到我們下拉 TableView 時，已經會有一個讀取的動畫顯示在上方了，且拖動結束之後也會在上方運轉：

Pull to Refresh

當然我們也可以對上面的元件進行一些屬性的調整，除了基本的 tintColor、backgroundColor 之外，我們還可以使用 attributedTitle 來新增文字到動畫下方。

添加 attributedTitle 到其中

第二階段：

接下來寫一個方法來讓他進行重新讀取、加載的動作，刷新數據並且停止我們加載的動畫：

之後我們將這個 loadData 方法加入到 refreshControl 中：

refreshControl.addTarget(self, action: #selector(loadData), for: UIControlEvents.valueChanged)

接下來，我們來看我們測試一下是不是能重新加載新的數據吧：

重新讀取 TableView 數據

第三階段：

接著我們會遇到一個問題，可能使用者想要更新資訊，但是 TableView 已經長度已經過長，如果還要移動到最上方才會刷新資訊那麼使用者體驗將會很差。

所以我們在 NavigationBar 新增一個按鈕來刷新我們的數據：

新增一個刷新按鈕

新增完成之後，我們希望它一樣能有像 TableView 有下拉的效果，所以這邊我們簡單加上一個 UIView.animate，並套用彈性效果：

接著看我們的 refresh 效果如何吧：

按鈕刷新 TableView

後記

那們我們這次下拉刷新教學就到這邊結束，附上此次 Demo Github：

JeremyXue77/Refresh-TableView