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

Question

我几乎完全使用自动布局从故事板完成缩放，唯一的问题是我的图像在缩放后不居中。我们的目标是使图片缩放与没有黑色条纹的图片边界完全一致。

这里是我的约束（这基本上是滚动型标准与ImageView的）：

这里是我的顺序进行。 Firstable我设置UIScrollViewDelegate方法：

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

然后图像下载完成后更新我UIImageView的高度约束：

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

对于图像的限制就像

所以这样工作（对不起3MB GIF）：

所以它几乎都快作品，但它的奇怪进入底部，而不是中心，如何中心呢？

我想我必须做的方法-(void)scrollViewDidZoom:(UIScrollView *)scrollView但我真的不知道我应该在那里设置。

Answer 1

尤里卡！我设法与AutoLayout

完全做到这一点要做到这一点需要做的是创造出口到您的中心Ÿ约束，然后放大时进行修改：

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

就是这样。

Answer 2

我能够通过继承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]; 

设置适当的内容插图。