UITableView上的iOS UIRefreshControl

时间:2020-02-23 14:45:57  来源:igfitidea点击:

在本教程中,我们将在iOS应用程序的UITableView上实现UIRefreshControl。
在iOS应用程序中拉动屏幕顶部时,您一定经常看到旋转的轮子。
我们将执行相同的操作。

UIRefreshControl

UIRefreshControl是一个标准的UI控件元素,它是UI套件的一部分,用于重新加载/刷新TableView,CollectionView或者ScrollView。

今天,我们将仅坚持使用UITableView。
从iOS 10开始,UITableView包含一个refreshControl属性,可轻松将UIRefreshControl元素附加到UITableView。

UIRefreshControl包含进度指示器图标。
除了设置UIRefreshControl的背景颜色外,我们还可以选择添加标题消息。

UITableView是UIScrollView的子类,因此ScrollView中已经存在refreshControl属性。

要在Swift中创建UIRefreshControl实例,请执行以下操作:

let myRefreshControl = UIRefreshControl()

然后,我们可以将该视图添加到UITableView中,如下所示:

self.myTableView.refreshControl = myRefreshControl

//or

self.myTableView.addSubView(myRefreshControl)

我们可以通过以下方式在UIRefreshControl上设置标题和字体颜色:

let myString = "Pull to refresh"
let myAttribute = [NSAttributedString.Key.foregroundColor: UIColor.white]
let myAttrString = NSAttributedString(string: myString, attributes: myAttribute)
refreshControl.attributedTitle = myAttrString

拉UIRefreshControl时如何调用函数?在通过UIRefreshControl调用的addTarget函数内部设置函数。

refreshControl.addTarget(self, action: #selector(ViewController.handleRefresh), for: UIControl.Event.valueChanged)

执行拉动刷新手势时会触发哪个功能?

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>)

在此函数内部,我们可以根据UITableView被拉动刷新的速度来手动调用函数。
有时用户实际上并不想刷新。
在这种情况下,他们只是缓慢地将UITableView拉下并使其缓慢地返回其原始位置。
在这些情况下,速度较小。
在这种情况下,我们可以决定通过此功能手动不触发操作。

让我们用XCode创建一个新的Single View应用程序。

在Main.storyboard中,将UITableView添加到视图控制器,设置约束。
设置代表。
添加原型单元并设置单元标识符,如下所示:

将TableView连接到ViewController.swift文件。

现在,在ViewController.swift文件中添加以下代码:

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

  @IBOutlet weak var myTableView: UITableView!
  var myArray = ["apple","windows","amazon"]
  
  lazy var refreshControl: UIRefreshControl = {
      let refreshControl = UIRefreshControl()
      refreshControl.addTarget(self, action: #selector(ViewController.handleRefresh), for: UIControl.Event.valueChanged)
      
      return refreshControl
  }()
  
  override func viewDidLoad() {
      super.viewDidLoad()
      //Do any additional setup after loading the view, typically from a nib.
      myTableView.refreshControl = refreshControl
      //myTableView.addSubview(refreshControl)        
  }
  
  func numberOfSections(in tableView: UITableView) -> Int {
      return 1
  }
  
  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
      let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
      cell.textLabel?.text = myArray[indexPath.row]
      return cell
  }
  
  func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
      return myArray.count
  }
  
  @objc func handleRefresh()
  {
      let newElements = ["google","facebook","flipkart"]
      myArray.append(contentsOf: newElements)
      myArray.append(String(myArray.count))
      myTableView.reloadData()
      refreshControl.endRefreshing()
      
  }

}

UIRefreshControl是使用Swift中的lazy var属性创建的。
调用endRefreshing来关闭UIRefreshControl。

在上面的代码中,我们在TableView中设置了一个字符串数组。
每次刷新时,我们都会在UITableView中添加更多元素。

实际应用程序的输出如下:

现在,让我们自定义UIRefreshControl:

将viewDidLoad方法更改为:

override func viewDidLoad() {
      super.viewDidLoad()
      //Do any additional setup after loading the view, typically from a nib.
      myTableView.refreshControl = refreshControl
      let myString = "Pull to refresh"
      let myAttribute = [NSAttributedString.Key.foregroundColor: UIColor.white, NSAttributedString.Key.font : UIFont.boldSystemFont(ofSize: 26)]
      let myAttrString = NSAttributedString(string: myString, attributes: myAttribute)
      refreshControl.attributedTitle = myAttrString
      refreshControl.tintColor = UIColor.white
      refreshControl.backgroundColor = UIColor.black
      
  }

我们在纺车上添加了色彩,并在完整的UI控件元素上添加了背景色。

实际应用程序的输出如下:

从UIRefreshControl删除addTarget代码行。
在ViewController类内添加以下代码:

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
      print(velocity)
      
      if(velocity.y < -0.1)
      {
          handleRefresh()
      }
  }

我们注意到,将UIRefreshControl下拉的速度越快,速度的负值就越高。
因此,我们添加了一个条件,该条件在值变为负值之前不会触发handleRefresh函数。

实际应用程序的输出如下:

可见,由于未刷新handleRefresh,因此未更新值。
这是因为我们没有将其拉下来并保持接触。
当它返回并导致正速度时,我们仍然保持它。