在滚动视图中使用自动布局缩放图像如何居中?

时间:2015-09-30 16:11:58

标签: ios objective-c uiscrollview uiimageview

我几乎完全使用自动布局从故事板进行缩放,唯一的问题是我的图像在缩放后不会居中。我们的目标是使图片边界完全无需黑条纹。

这是我的约束(它基本上是带有imageView的标准ScrollView): enter image description here

以下是我按顺序完成的工作。 Firstable我设置UIScrollViewDelegate方法:

-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
    return self.fullScreenImageView;
}

然后在图片下载完成后,我更新UIImageView高度约束:

-(void)setupConstraintsToImageSize:(CGSize)imageSize {
    [self.imageHConstraint setConstant:imageSize.height];
    [self layoutIfNeeded];
}

对于图像约束就像

enter image description here

所以这样的工作(对不起3MB GIF):

enter image description here

所以它几乎几乎可以工作,但它奇怪地走到了底部,而不是中心,如何集中它?

我发现我必须使用方法-(void)scrollViewDidZoom:(UIScrollView *)scrollView但我真的不确定应该在那里设置什么。

2 个答案:

答案 0 :(得分:2)

尤里卡!我设法用AutoLayout

完成了这项工作

要实现这一点,需要做的是创建Center Y Constraints的插座,然后在缩放时修改它:

-(void)scrollViewDidZoom:(UIScrollView *)scrollView {
    CGFloat diff = self.fullScreenImageView.frame.size.height-self.fullScreenImageView.image.size.height;
    if(self.fullScreenImageView.frame.size.height >= self.frame.size.height) {return;}
    [self.centerYConstraint setConstant:-diff/2];
}

那就是它。

答案 1 :(得分:1)

我能够通过子类化UIScrollView以编程方式完成此操作(子类没有必要,但我想要一些可重用的东西)。

我使用了以下约束:

CGRect visibleRect = CGRectMake(0, self.contentInset.top, self.bounds.size.width, self.bounds.size.height -  self.contentInset.top - self.contentInset.bottom);

        CGRect scaleFrame = AVMakeRectWithAspectRatioInsideRect(_image.size, visibleRect);

        _imageViewLeadingConstraint = [NSLayoutConstraint constraintWithItem:_imageView
                                                                   attribute:NSLayoutAttributeLeading
                                                                   relatedBy:NSLayoutRelationEqual
                                                                      toItem:self attribute:NSLayoutAttributeLeading
                                                                  multiplier:1.0 constant:scaleFrame.origin.x];

        _imageViewTopConstraint = [NSLayoutConstraint constraintWithItem:_imageView
                                                               attribute:NSLayoutAttributeTop
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:self attribute:NSLayoutAttributeTop
                                                              multiplier:1.0 constant:scaleFrame.origin.y];

        _imageViewWidthConstraint = [NSLayoutConstraint constraintWithItem:_imageView
                                                                 attribute:NSLayoutAttributeWidth
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:self attribute:NSLayoutAttributeWidth
                                                                multiplier:scaleFrame.size.width / self.bounds.size.width constant:0];

        _imageViewHeightConstraint = [NSLayoutConstraint constraintWithItem:_imageView
                                                                  attribute:NSLayoutAttributeHeight
                                                                  relatedBy:NSLayoutRelationEqual
                                                                     toItem:self attribute:NSLayoutAttributeHeight
                                                                 multiplier:scaleFrame.size.height / self.bounds.size.height constant:0];

        [self addConstraints:@[_imageViewLeadingConstraint, _imageViewTopConstraint, _imageViewWidthConstraint, _imageViewHeightConstraint]];

请注意,此处self是UIScrollView。使用您的滚动视图参考代替它。

scrollViewDidZoom委托方法中:

CGFloat Ws = self.frame.size.width - self.contentInset.left - self.contentInset.right;
    CGFloat Hs = self.frame.size.height - self.contentInset.top - self.contentInset.bottom;
    CGFloat W = _imageView.frame.size.width;
    CGFloat H = _imageView.frame.size.height;

    _imageViewLeadingConstraint.constant = MAX((Ws-W)/2, 0);
    _imageViewTopConstraint.constant = MAX((Hs-H)/2, 0);
    [self layoutIfNeeded];

设置适当的内容插入。