在UIScrollView、UICollectionView和UITableView中添加UIRefreshControl實(shí)現(xiàn)下拉刷新

Apple在iOS 6中添加了UIRefreshControl,但只能在UITableViewController中使用,不能在UIScrollViewUICollectionView中使用。

iOS 10 新特性

從iOS 10開始,UIScrollView增加了一個(gè)refreshControl屬性,用于把配置好的UIRefreshControl賦值給該屬性,這樣UIScrollView就有了下拉刷新功能。和之前在UITableViewController中使用一樣,不需要設(shè)置UIRefreshControlframe,只需要配置UIRefreshControl

因?yàn)?code>UITableView和UICollectionView繼承自UIScrollView,所以UITableViewUICollectionView也繼承了refreshControl屬性,也就是可以很方便的把刷新控件添加到滾動(dòng)視圖、集合視圖和表視圖(不再需要表視圖控制器)。

截止目前,Xcode 8.2.1的Interface Builder還沒有支持refreshControl屬性,如果你需要在UIScrollViewUITableViewUICollectionView中使用UIRefreshControl只能通過代碼添加。通過Interface Builder可以為UITableViewController 添加刷新控件。

滾動(dòng)視圖示例

這個(gè)demo使用Single View Application模板,打開storyboard,在系統(tǒng)創(chuàng)建的ViewController上添加一個(gè)UIScrollView,在UIScrollView上添加兩個(gè)UILabel,并在UILabel上添加內(nèi)容。想要實(shí)現(xiàn)的功能是,下拉刷新頁面時(shí)隱藏第二個(gè)UILabel,再次刷新時(shí)顯示該UILabel

RefreshControlStoryboard.png

這里只對(duì)demo簡單描述,如果需要查看詳細(xì)代碼,可以在我的GitHub中查看。另外,文章底部也會(huì)提供源碼地址。

創(chuàng)建刷新控件

UIScrollViewUITableViewUICollectionView中創(chuàng)建刷新控件步驟是一樣的。在這個(gè)示例中,在ViewControllerviewDidLoad方法中創(chuàng)建并配置UIRefreshControlscrollView是連接到Interface Builder中的UIScrollView的IBOutlet屬性。

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 1 先判斷系統(tǒng)版本
    if ([NSProcessInfo.processInfo isOperatingSystemAtLeastVersion:(NSOperatingSystemVersion){10,0,0}])
    {
        // 2 初始化
        UIRefreshControl *refreshControl = [[UIRefreshControl alloc] init];
        
        // 3.1 配置刷新控件
        refreshControl.tintColor = [UIColor brownColor];
        NSDictionary *attributes = @{NSForegroundColorAttributeName : [UIColor redColor]};
        refreshControl.attributedTitle = [[NSAttributedString alloc] initWithString:@"Pull To Refresh" attributes:attributes];
        // 3.2 添加響應(yīng)事件
        [refreshControl addTarget:self action:@selector(refresh:) forControlEvents:UIControlEventValueChanged];
        
        // 4 把創(chuàng)建的refreshControl賦值給scrollView的refreshControl屬性
        self.scrollView.refreshControl = refreshControl;
    }
}

注意以下幾點(diǎn):

  1. UIScrollView從iOS 10開始才有refreshControl屬性,所以第一步判斷當(dāng)前系統(tǒng)版本。
  2. 初始化刷新控件。UIKit會(huì)自動(dòng)設(shè)置frame,不需要手動(dòng)設(shè)定。
  3. 3.1 配置刷新控件,可以通過tintColor設(shè)置進(jìn)度滾輪指示器顏色,通過attributedTitle添加刷新時(shí)顯示的提示文字。3.2 添加響應(yīng)事件,當(dāng)UIControlEventValueChanged事件發(fā)生時(shí)指定響應(yīng)的動(dòng)作。
  4. 把上面創(chuàng)建、配置的refreshControl賦值給scrollViewrefreshControl屬性

現(xiàn)在實(shí)現(xiàn)動(dòng)作方法。available是在interface部分聲明的BOOL類型的對(duì)象。

- (void)refresh:(UIRefreshControl *)sender
{
    self.available = ! self.available;
    self.secondLabel.hidden = self.available;
    
    // 停止刷新
    [sender endRefreshing];
}

如果secondLabel目前顯示,下拉后隱藏,如果目前隱藏,下拉后顯示。最后使用endRefreshing停止刷新。

RefreshControl.gif

Demo名稱:RefreshControl
源碼地址:https://github.com/pro648/BasicDemos-iOS

參考資料:

  1. Refresh Control Changes in iOS 10
  2. What's New in UICollectionView in iOS 10

歡迎更多指正:https://github.com/pro648/tips/wiki

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容