UIRefreshControl Background Color

Question

Is it possible to make the background of a UIRefreshControl grow as the control grows?

I would like to have a colored background for the refresh control to match the top

Answer 1

Swift version for easier copy-pasting :)

Swift 2

func viewDidLoad() {
    super.viewDidLoad()

    // Background Color
    let backgroundColor = UIColor.grayColor()

    // Creating refresh control
    let refresh = UIRefreshControl()
    refresh!.backgroundColor = backgroundColor
    refresh!.addTarget(self, action: #selector(refresh), forControlEvents: UIControlEvents.ValueChanged)
    refreshControl = refresh

    // Creating view for extending background color
    var frame = tableView.bounds
    frame.origin.y = -frame.size.height
    let backgroundView = UIView(frame: frame)
    backgroundView.autoresizingMask = .FlexibleWidth
    backgroundView.backgroundColor = backgroundColor

    // Adding the view below the refresh control
    tableView.insertSubview(backgroundView, atIndex: 0) // This has to be after refreshControl = refresh
}

Swift 3

func viewDidLoad() {
    super.viewDidLoad()

    // Background Color
    let backgroundColor = .gray

    // Creating refresh control
    let refresh = UIRefreshControl()
    refresh!.backgroundColor = backgroundColor
    refresh!.addTarget(self, action: #selector(refresh), forControlEvents: .valueChanged)
    refreshControl = refresh

    // Creating view for extending background color
    var frame = tableView.bounds
    frame.origin.y = -frame.size.height
    let backgroundView = UIView(frame: frame)
    backgroundView.autoresizingMask = .flexibleWidth
    backgroundView.backgroundColor = backgroundColor

    // Adding the view below the refresh control
    tableView.insertSubview(backgroundView, atIndex: 0) // This has to be after refreshControl = refresh
}

Answer 2

This can now be achieved (Swift 5, iOS 13) by simply setting the UIRefreshControl background color property:

let ctrl = UIRefreshControl(frame: .zero)    
ctrl.backgroundColor = UIColor.gray'
tableView.refreshControl = ctrl

Answer 3

You have to create a view with the bgColor and adding it with negative y origin in the tableView.

Warning:

• You have to insert this view at the bottom stack of tableView subviews
• You have to insert this view after setting the refreshControll: self.refreshControl = refreshControl;

If you do not insert this view this way you will not see the refresh control: he will be hidden below your view.

- (void)viewDidLoad
{
    [super viewDidLoad];

    // Background Color
    UIColor *bgRefreshColor = [UIColor grayColor];

    // Creating refresh control
    refreshControl = [[UIRefreshControl alloc] init];
    [refreshControl addTarget:self action:@selector(refresh) forControlEvents:UIControlEventValueChanged];
    [refreshControl setBackgroundColor:bgRefreshColor];
    self.refreshControl = refreshControl;

    // Creating view for extending background color
    CGRect frame = self.tableView.bounds;
    frame.origin.y = -frame.size.height;
    UIView* bgView = [[UIView alloc] initWithFrame:frame];
    bgView.backgroundColor = bgRefreshColor;
    bgView.autoresizingMask = UIViewAutoresizingFlexibleWidth;

    // Adding the view below the refresh control
    [self.tableView insertSubview:bgView atIndex:0]; // This has to be after self.refreshControl = refreshControl;
}