Can you make a custom view for a UIRefreshControl in Swift?

Question

I want to put a custom Activity Indicator inside a view and place that inside the pull to refresh view. This pull to refresh is specifically for a table view. What I tried....

    var headerView = UIView(frame: self.refreshControl.bounds)
    headerView.addSubview(activityIndicator)
    headerView.backgroundColor = UIColor.clear
    headerView.frame = refreshControl.bounds
    headerView.contentMode = .scaleAspectFit
    headerView.translatesAutoresizingMaskIntoConstraints = false
    refreshControl.tintColor = .clear
    refreshControl.addSubview(headerView)

Answer 1

Yes, you can add your custom view to refresh control by calling addSubview method.

// Outlet of table view
@IBOutlet weak var tbl      : UITableView!

// Create global variable of NVActivityIndicatorView
var nvActivityIndicator     : NVActivityIndicatorView?

override func viewDidLoad() {
    super.viewDidLoad()

    // Create refresh control and add as subview in your table view.
    let refreshControl = UIRefreshControl()
    refreshControl.backgroundColor = .red
    refreshControl.addTarget(self, action: #selector(pullToRefresh), for: .valueChanged)
    tbl.addSubview(refreshControl)

    // Create NVActivityIndicator view and add as subview inside refresh control
    nvActivityIndicator = NVActivityIndicatorView(frame: refreshControl.bounds, type: NVActivityIndicatorType.ballRotate, color: .blue, padding: 0)
    nvActivityIndicator?.backgroundColor = refreshControl.backgroundColor
    nvActivityIndicator?.translatesAutoresizingMaskIntoConstraints = false

    refreshControl.addSubview(nvActivityIndicator!)

    // Add constraint to auto resize nvActivityIndicator as per refresh control view.
    let nvActivityIndicator_top = NSLayoutConstraint(item: nvActivityIndicator!, attribute: .top, relatedBy: .equal, toItem: refreshControl, attribute: .top, multiplier: 1, constant: 0)
    let nvActivityIndicator_bottom = NSLayoutConstraint(item: nvActivityIndicator!, attribute: .bottom, relatedBy: .equal, toItem: refreshControl, attribute: .bottom, multiplier: 1, constant: 0)
    let nvActivityIndicator_leading = NSLayoutConstraint(item: nvActivityIndicator!, attribute: .leading, relatedBy: .equal, toItem: refreshControl, attribute: .leading, multiplier: 1, constant: 0)
    let nvActivityIndicator_trailing = NSLayoutConstraint(item: nvActivityIndicator!, attribute: .trailing, relatedBy: .equal, toItem: refreshControl, attribute: .trailing, multiplier: 1, constant: 0)

    // Add constrains
    refreshControl.addConstraint(nvActivityIndicator_top)
    refreshControl.addConstraint(nvActivityIndicator_bottom)
    refreshControl.addConstraint(nvActivityIndicator_leading)
    refreshControl.addConstraint(nvActivityIndicator_trailing)

    // Set custom view background colour as per refreshControl background colour
    refreshControl.tintColor = refreshControl.backgroundColor
}

@objc func pullToRefresh() {
    // Start animation here.
    nvActivityIndicator?.startAnimating()
}

I hope this will help you.