将 UIRefreshControl 置于滚动 UICollectionView 上方的正确方法是什么？

Question

场景：包含图像视图的刷新控件。

我确定遇到过这个问题：

1. 在 UICollectionView 上创建 UIRefreshControl。
2. 水平滚动以注意 UIRefreshControl 是倾斜的。

这是设置代码：

- (void)setupRefreshControl {
    self.refreshControl = [UIRefreshControl new];
    self.refreshControl.attributedTitle = [[NSAttributedString alloc] initWithString:@"Refresh Data"];
    self.refreshControl.tintColor = UIColor.redColor;
    self.refreshControl.backgroundColor = UIColor.whiteColor;
    UIImage *hook = [UIImage imageNamed:@"Hook"];
    UIImageView *hookImageView = [[UIImageView alloc] initWithImage:hook];
    UIImage *fish = [UIImage imageNamed:@"Fish"];
    UIImageView *fishImageView = [[UIImageView alloc] initWithImage:fish];

    UIStackView *stackView = [[UIStackView alloc] initWithArrangedSubviews:@[hookImageView ,fishImageView]];
    stackView.axis = UILayoutConstraintAxisVertical;
    stackView.spacing = 10.0;
    [self.refreshControl addSubview:stackView];

    [stackView setTranslatesAutoresizingMaskIntoConstraints:NO];
    UILayoutGuide *container = [_refreshControl layoutMarginsGuide];
    [stackView.topAnchor constraintEqualToAnchor:container.topAnchor].active = YES;
    CGFloat width = self.refreshControl.bounds.size.width;
    [stackView.leftAnchor constraintEqualToAnchor:container.leftAnchor constant:width/2].active = YES;
    [self.refreshControl addTarget:self action:@selector(handleRefresh:) forControlEvents:UIControlEventValueChanged];
    self.collectionView.refreshControl = self.refreshControl;
}

如您所见，UIRefreshControl 在水平滚动条上偏离中心。我是否需要始终计算新中心？

必须有一个标准的方法来做到这一点。

Answer 1

最简单的方法应该是使用自动布局使堆栈视图居中，我不会将堆栈视图嵌入到刷新控件中。以下约束（您应该适应您的需要的 20.0 除外）应将堆栈视图放在正确的位置：

stackView.backgroundColor = [UIColor clearColor];
[stackView.centeredXAnchor constraintEqualToAnchor:container.centeredXAnchor constant:0.0].active = YES; 
[stackView.bottomAnchor constraintEqualToAnchor:container.topAnchor constant:20.0].active = YES;

您还应该向堆栈视图添加一个活动视图（或动画鱼图标）和一个标签，并且您必须自己处理弹跳。

Answer 2

简单的监督：
我只需要一个额外的锚来使 UIRefreshControl 居中：

- (void)setupRefreshControl {
    // Refresh Control:
    self.refreshControl = [UIRefreshControl new];
    self.collectionView.refreshControl = self.refreshControl;

    [_refreshControl setTranslatesAutoresizingMaskIntoConstraints:NO];
    UILayoutGuide *refreshControlContainer = [_collectionView layoutMarginsGuide];
    [_refreshControl.topAnchor constraintEqualToAnchor:refreshControlContainer.topAnchor constant: 1.0].active = YES;
    [_refreshControl.leftAnchor constraintEqualToAnchor:refreshControlContainer.leftAnchor constant: 1.0].active = YES;
    [_refreshControl.heightAnchor constraintEqualToConstant:300.0].active = YES;

    self.refreshControl.attributedTitle = [[NSAttributedString alloc] initWithString:@"Refresh Data"];
    self.refreshControl.tintColor = UIColor.redColor;
    self.refreshControl.backgroundColor = UIColor.whiteColor;

     // StackView members:
    UIImage *hook = [UIImage imageNamed:@"Hook"];
    UIImageView *hookImageView = [[UIImageView alloc] initWithImage:hook];
    UIImage *fish = [UIImage imageNamed:@"Fish"];
    UIImageView *fishImageView = [[UIImageView alloc] initWithImage:fish];

    UIStackView *stackView = [[UIStackView alloc] initWithArrangedSubviews:@[hookImageView ,fishImageView]];
    stackView.axis = UILayoutConstraintAxisVertical;
    stackView.spacing = 10.0;
    [self.refreshControl addSubview:stackView];

    // StackView:
    [stackView setTranslatesAutoresizingMaskIntoConstraints:NO];
    UILayoutGuide *stackViewContainer = [_refreshControl layoutMarginsGuide];
    [stackView.topAnchor constraintEqualToAnchor:stackViewContainer.topAnchor].active = YES;
    CGFloat width = self.refreshControl.bounds.size.width;
    [stackView.leftAnchor constraintEqualToAnchor:stackViewContainer.leftAnchor constant:width/2].active = YES;

    [self.refreshControl addTarget:self action:@selector(handleRefresh:) forControlEvents:UIControlEventValueChanged];

}