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 cell's background color. Changing the background color of the tableview is not acceptable because then empty cells at the bottom will also have the color, but I need them to stay white.

Apple's mail app shows this behavior. The refresh control's background matches the gray search bar, but empty cells at the bottom of the table view are still the normal white.

Here's an example screenshot of how the table looks showing the ugly white that appears as the refresh control is pulled:

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

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;
}