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

      

+3


source to share


1 answer


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;
    }
}
}

      

+2


source







All Articles