UIScrollView "pull up to load more" and "pull down to back back" causes flickering (with sample codes)
I'm working on a UI effect using "pull up to load more" and "pull down to back back".
It should work like this: When the user clicks UIScrollView
a certain distance, more load is triggered, and the bottom half of the content UIScrollView’s
will scroll to the visible area. After that, if the user is pulled scrollView
a distance, he should return to the top half.
I followed it up by setting contentInsets
in UIScrollView
when dragging the triggered action.
The problem is that during the change of contentOffset.y, when it changes contentInsets
! But I do not know why.
Below are simplified but sufficient codes ViewController
to reproduce the problem. With logs, you can clearly see what's going on.
Can anyone help me solve this problem?
#import "IssueShowcaseViewController.h"
@interface IssueShowcaseViewController () <UIScrollViewDelegate>
{
BOOL _isShowingUpperView;
}
@property (nonatomic, strong) UIScrollView* scrollView;
@property (nonatomic, strong) UIView* upperView;
@property (nonatomic, strong) UIView* lowerView;
@end
@implementation IssueShowcaseViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
self.upperView = [[UIView alloc] initWithFrame:self.scrollView.bounds];
self.lowerView = [[UIView alloc] initWithFrame:CGRectOffset(self.scrollView.bounds, 0, self.scrollView.bounds.size.height)];
[self.upperView setBackgroundColor:[UIColor blueColor]];
[self.lowerView setBackgroundColor:[UIColor greenColor]];
//Add upperView to upper half, and lowerView to lower half:
[self.scrollView addSubview:self.upperView];
[self.scrollView addSubview:self.lowerView];
[self.view addSubview:self.scrollView];
_isShowingUpperView = YES;
self.scrollView.delegate = self;
// Observe scrollView.contentOffset for watching unnormal changes:
[self.scrollView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld context:nil];
// Set contentSize as the sum height of two subviews:
self.scrollView.contentSize = CGSizeMake(self.view.frame.size.width, CGRectGetMaxY(self.lowerView.frame) - CGRectGetMinY(self.upperView.frame));
// But the contentInset is set as to not allow scrolling into lower half:
// 1-pixel more space is necessary, as the scrollView would not be able to scroll downwards without it:
self.scrollView.contentInset = UIEdgeInsetsMake(0, 0, 1-self.lowerView.frame.size.height, 0);
}
- (void) scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
if (_isShowingUpperView)
{
if (scrollView.contentOffset.y > 60)
{
scrollView.contentInset = UIEdgeInsetsMake(1-self.upperView.frame.size.height, 0, 0, 0);
_isShowingUpperView = NO;
}
}
else
{
if (scrollView.contentOffset.y < self.upperView.frame.size.height - 60)
{
scrollView.contentInset = UIEdgeInsetsMake(0, 0, 1-self.lowerView.frame.size.height, 0);
_isShowingUpperView = YES;
}
}
}
#pragma mark Here we can see what happens:
- (void) scrollViewDidScroll:(UIScrollView *)scrollView {
NSLog(@"contentOffsetY = %f", scrollView.contentOffset.y);
}
- (void) observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
if (object == self.scrollView) {
CGPoint oldOffset = [[change objectForKey:@"old"] CGPointValue];
CGPoint newOffset = [[change objectForKey:@"new"] CGPointValue];
if (fabs(newOffset.y - oldOffset.y) > 300) {
NSLog(@"Weird: %@", change);
}
}
}
@end
source to share
After many attempts I found a solution: first set zero contentInsets in animation block, then in completion block, set new contentInsets and fix contentOffset:
- (void) scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
if (_isShowingUpperView)
{
if (scrollView.contentOffset.y > 60)
{
[UIView animateWithDuration:0.0f animations:^{
scrollView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3f animations:^{
scrollView.contentOffset = CGPointMake(0, self.upperView.frame.size.height);
} completion:^(BOOL finished) {
scrollView.contentInset = UIEdgeInsetsMake(1-self.upperView.frame.size.height, 0, 0, 0);
}];
}];
_isShowingUpperView = NO;
}
}
else
{
if (scrollView.contentOffset.y < self.upperView.frame.size.height - 60)
{
[UIView animateWithDuration:0.0f animations:^{
scrollView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3f animations:^{
scrollView.contentOffset = CGPointMake(0, 0);
} completion:^(BOOL finished) {
scrollView.contentInset = UIEdgeInsetsMake(0, 0, 1-self.lowerView.frame.size.height, 0);
}];
}];
_isShowingUpperView = YES;
}
}
}
source to share