UIScrollView "pull up to load more" 和“下拉返回”导致闪烁（附示例代码）

Question

我正在研究 UI 效果，“上拉加载更多”和“下拉返回”。

它应该是这样的：当用户将UIScrollView向上拉一定距离时，触发加载更多动作，UIScrollView’s内容的下半部分将滚动到可见区域.之后，如果用户将scrollView下拉一段距离，它应该回滚到上半部分。

我是通过设置UIScrollView的contentInsets来实现的，当拖动触发动作时。

问题是在改变scrollView’s contentInsets 时，它会闪烁。打印了一些日志，发现是contentInsets变化时contentOffset.y异常跳转造成的！但是不知道为什么。

以下是经过简化但足以重现问题的 ViewController 代码。通过日志，您可以清楚地看到发生了什么。

有人可以帮我解决吗？

#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

Answer 1

经过多次尝试，我找到了解决方案：首先在动画块中设置一个零 contentInsets，然后在完成块中设置新的 contentInsets 并更正 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;
    }
}
}

UIScrollView "pull up to load more" 和“下拉返回”导致闪烁（附示例代码）

UIScrollView's "pull up to load more" and “pull down to go back" causes flickering (with sample codes)

objective-c

uitableview

uiscrollview

uiviewcontroller

ios