UIRefreshControl Background Color

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.

  • How to cache using NSURLSession and NSURLCache. Not working
  • swift NSDateFormatter not working
  • obj-c AFNetworking 2.0 POST request does not work
  • Thread 1: signal SIGABRT IOS Xcode 5
  • TableView doesn't update(reloadData) after CoreData change using FRC Swift 3
  • Apple Mach-O Linker Errors (20) - Undefined symbols for architecture armv7
  • 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:
    enter image description here

    2 Solutions Collect From Internet About “UIRefreshControl Background Color”

    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;
    
        // Adding the view below the refresh control
        [self.tableView insertSubview:bgView atIndex:0]; // This has to be after self.refreshControl = refreshControl;
    }
    

    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
    }