How to add refresh control to a scroll view
First, set your uiviewcontroller self.view background to black.
Then create a scroll view container and set it to red.
Then have the scroll view container add a refresh control.
Finally, draw an orange square and have the container add that.
self.view
—container
——-refresh control (operates on container as background)
——-square (other UIViews added to container will be pulled down)
Once you run the app and pull down, you’ll see that the refresh control is added onto the scroll view and operates using the scrollview as the background.
Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. [self.view setBackgroundColor:[UIColor blackColor]]; UIScrollView * container = [[UIScrollView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, self.view.bounds.size.width, self.view.bounds.size.height)]; container.userInteractionEnabled = TRUE; container.scrollEnabled = TRUE; container.backgroundColor = [UIColor redColor]; container.contentSize = CGSizeMake(self.view.bounds.size.width, self.view.bounds.size.height); container.alwaysBounceVertical = YES; UIRefreshControl * refreshControl = [[UIRefreshControl alloc] init]; [refreshControl addTarget:self action:@selector(refreshPulledOnDayView:) forControlEvents:UIControlEventValueChanged]; //whichever uiscrollview subview adds the uirefreshcontrol is the acting background. //whatever stuff gets added to that uiscrollview will be pulled down...and the spinner //will appear on top of the uiscrollview. [container addSubview:refreshControl]; //create square and let's put it inside the scrollview container UIView * square = [[UIView alloc] initWithFrame:CGRectMake(100.0f, 100.0f, 200.0f, 200.0f)]; [square setBackgroundColor:[UIColor orangeColor]]; [container addSubview:square]; //main adds the scrollview container [self.view addSubview:container]; } |
NSInternalInconsistencyException
|
1 |
[self.view addSubview:refreshControl]; |
If you happen to try to add the refresh control to a uiviewcontroller’s self.view, you’ll get a compiler error:
NSInternalInconsistencyException’, reason: ‘UIRefreshControl may only be managed by a UITableViewController’
You can only add it to a UITable, UICollection, and UIScrollView.
Making a successful View transition when UIRefresh is pulled
If you want to transition your view beautifully when the user pulls down on the refresh control, set your controls up so that there are 2 containers.
container1 – refresh control, other views
container2 – refresh control, other views
Then when a refresh control is pulled, you hit the event method of the ‘pull’ and make sure you animate the containers to switch. Something like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
-(void)refreshPulledOnDayView:(id)sender { NSLog(@"CalendarViewController.m - refresh pulled on DAY VIEW!"); [(UIRefreshControl*)sender endRefreshing]; if(self.isDayView) //if we're on day view, bring calendar view up { if(self.selectedDate) { [self.calendarView scrollToCalendarDate:self.selectedDate animated:YES]; [self.calendarView selectAndHighlightDate:self.selectedDate]; } self.calendarView.alpha = 0.0f; [self.calendarView setFrame:CGRectMake(0.0f, -1000.0f, self.view.bounds.size.width, self.view.bounds.size.height)]; self.dayViewContainer.alpha = 1.0f; [self.dayViewContainer setFrame: CGRectMake(0.0f, 20.0f + 44.0f, self.view.bounds.size.width, self.view.bounds.size.height - 112.0f)]; [UIView animateWithDuration:0.2f animations:^ { NSLog(@"we are at day view, we ANIMATING to blurred day view "); self.calendarView.alpha = 1.0f; [self.calendarView setFrame:CGRectMake(0.0f, 60.0f, self.view.bounds.size.width, self.view.bounds.size.height)]; self.dayViewContainer.alpha = 0.0f; [self.dayViewContainer setFrame:CGRectMake(0.0f, -1000.0f, self.view.bounds.size.width, self.view.bounds.size.height - 112.0f)]; } completion:^(BOOL finished) { NSLog(@"now arrived at calendar view....."); }]; self.isDayView = FALSE; } } |