I'm trying to use a UIRefreshControl that has a colored background. I found that the UIRefreshControl's size is actually inaccurate when you use it on a UITableView or UICollectionView.
To highlight this, I set a background color to the UIRefreshControl and to the cells.
How do I fix this gap? This is driving me nuts. It looks very unprofessional and seems to be hidden with people using white UIRefreshControls.
Here the UIRefreshControl is flush against the UITableView
Now we start to see a little bit of a gap
Now the gap is much bigger
To reproduce this, simply have a plain Storyboard with a UITableViewController.
Relevant code:
self.refreshControl = [[UIRefreshControl alloc] init];
[self.refreshControl setBackgroundColor:[UIColor redColor]];
self.refreshControl.tintColor = [UIColor clearColor];
Repo with code:
https://github.com/Lyricalpanda/RefreshControl/tree/master/RefreshControl
Well, in your sample app, I can make that white gap go away by saying:
self.view.backgroundColor = [UIColor redColor];
But if that's acceptable you don't need to set the refresh control's background color at all just the view's.
Related
I'm setting the backgroundView of a tableView like this:
self.tableView.backgroundView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:#"background"]];
It works but gets placed on top of the tableview's activity indicator and hides it when the tableview is pulled down for refresh. I've tried setting a breakpoint on the point it's added and confirmed that indeed it goes on top of the activity indicator subviews array. Is there any way to fix this?
Thanks in advance.
I suggest that is better to place UIImageView below your UITableView and set:
_yourTableView.backgroundColor = [UIColor clearColor];
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.
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.
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
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()
}
Maybe a hack. You can remove all views and place them agian
I'm adding a UIRefreshControl to a pretty default UITableView by doing...
iOS SDK 8.1
self being an instance of UITableViewController
UIRefreshControl *refreshControl = [[UIRefreshControl alloc] init];
refreshControl.backgroundColor = [UIColor flatPeterRiverColor];
refreshControl.tintColor = [UIColor whiteColor];
[refreshControl addTarget:self
action:#selector(triggerSync)
forControlEvents:UIControlEventValueChanged];
[self setRefreshControl:refreshControl];
What happens is the following:
There is a strange top inset which I've never set up and which only appears when the UIRefreshControl has been set. Has anyone experienced this before? I'm pretty sure it worked well that way in with iOS 7.0.
Old topic, I don't know if you're still experiencing it but for those who wonder how to fix it I found out a quick solution.
You just have to set height for header in section.
I tried first with 0 but it gave no result.
So I set it to 1.0 for all section and it worked.
Hope this help
I have the following code in my willDisplayCell function
//bottom border
UIView* bottomBorderView = [[UIView alloc] initWithFrame:CGRectMake(0, cell.frame.size.height-1, cell.frame.size.width, 1)];/// change size as you need.
bottomBorderView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"dot.png"]];// you can also put image here
[cell.contentView addSubview:bottomBorderView];
It worked just fine in iOS7, but ever since I updated Xcode and started testing the app on iOS8 the borders have been displaying incorrectly. I cant figure out what changed that is causing the issue. The problem seems to get worse the more you scroll.
i try to set the UITableView Footerview backgroundcolor to clearColor but it stays white, any
other color works fine, any ideas?
_footerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, _incredientsTable.frame.size.width, 60)];
[_footerView setBackgroundColor:[UIColor clearColor]];
Thanks.
Ask yourself these questions:
What do you expect to see through the footer view? Is it the table's background? The underlying view controller's views? In the latter case there are more views between your and the object that you want to be visible under the footer view. That is at least the UITable itself and probably the background of self.view (which in most cases but not all is the table)
You need to set background color of table view in this case.
tblView.backgroundColor = [UIColor clearColor];