iOS Refresh Control Height - ios

Question

How can I set the height of the refresh control. I am using http://www.jackrabbitmobile.com/design/ios-custom-pull-to-refresh-control/
to create a custom loading icon for refresh control. I want to increase the height of the refresh control ie the space between navigationbar end and where tableview begins so that I have space below and above the image. Below is the code I use :
- (void)setupRefreshControl
{
// Programmatically inserting a UIRefreshControl
self.refreshControl = [[UIRefreshControl alloc] init];
// Setup the loading view, which will hold the moving graphics
self.refreshLoadingView = [[UIView alloc] initWithFrame:self.refreshControl.bounds];
self.refreshLoadingView.backgroundColor = [UIColor clearColor];
// Setup the color view, which will display the rainbowed background
self.refreshColorView = [[UIView alloc] initWithFrame:self.refreshControl.bounds];
self.refreshColorView.backgroundColor = [UIColor clearColor];
self.refreshColorView.alpha = 0.30;
// Create the graphic image views
self.compass_background = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"compass_background.png"]];
self.compass_spinner = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"compass_spinner.png"]];
// Add the graphics to the loading view
[self.refreshLoadingView addSubview:self.compass_background];
[self.refreshLoadingView addSubview:self.compass_spinner];
// Clip so the graphics don't stick out
self.refreshLoadingView.clipsToBounds = YES;
// Hide the original spinner icon
self.refreshControl.tintColor = [UIColor clearColor];
// Add the loading and colors views to our refresh control
[self.refreshControl addSubview:self.refreshColorView];
[self.refreshControl addSubview:self.refreshLoadingView];
// Initalize flags
self.isRefreshIconsOverlap = NO;
self.isRefreshAnimating = NO;
// When activated, invoke our refresh function
[self.refreshControl addTarget:self action:#selector(refresh:) forControlEvents:UIControlEventValueChanged];
}
I have tried using
self.refreshControl = [[UIRefreshControl alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 200)];
But that does not seem to work.

Answer 1

From the UIRefreshControl Class Reference:
The UITableViewController object that owns a refresh control is also responsible for setting that control’s frame rectangle. Thus, you do not need to manage the size or position of a refresh control directly in your view hierarchy.
You could try some hacks like swizzling UITableViewController methods or adding layout constraints, but they're probably not worth it.
Instead, I'd use a custom library like CBStoreHouseRefreshControl to accomplish what you want.

Answer 2

Sounds like you're looking for more space inside of the refresh control. To change the spacing in the way you mention, you can either change the coordinates of the UI elements (compass + spinner, in my example) or add padding to your images.
The scrollViewDidScroll method is where I set the UI coordinates. That method is called as the table is pulled down, and the further it is pulled, the more the elements are moved.
Lines 55 and 56 in JRTableViewController.m are where the updated frames are applied to the elements (and UI actually moves). If you need more space inside the refresh control, you can change the positioning of the elements by changing the frame.
I hope that answers your question, if not, let me know more about what effects you're looking to achieve. And hope our article has been helpful! Let us know what you create =)
--Anthony

Answer 3

UIRefreshControl sizes itself to fit it's subviews. So you need to change their size to get the control itself to change size.
In your UIRefreshControl subclass you can do something like:
override func layoutSubviews() {
for view in subviews {
view.frame = CGRectMake(1, 2, 3, 4) // or whatever size you want
}
super.layoutSubviews()
}

Answer 4

Maybe a hack. You can remove all views and place them agian