Ios 在滚动视图中使用自动布局缩放图像如何居中?
我几乎完全从故事板使用自动布局完成了缩放,唯一的问题是缩放后图像不居中。其目标是使图片缩放准确,图片边界没有黑色条纹 以下是我的限制条件(它基本上是带有imageView的标准ScrollView): 下面是我为这件事所做的。第一个表我设置了Ios 在滚动视图中使用自动布局缩放图像如何居中?,ios,objective-c,uiscrollview,uiimageview,Ios,Objective C,Uiscrollview,Uiimageview,我几乎完全从故事板使用自动布局完成了缩放,唯一的问题是缩放后图像不居中。其目标是使图片缩放准确,图片边界没有黑色条纹 以下是我的限制条件(它基本上是带有imageView的标准ScrollView): 下面是我为这件事所做的。第一个表我设置了UIScrollViewDelegate方法: -(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{ return self.fullScreenImageView; }
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
做点什么,但我真的不确定我应该在那里设置什么。我可以通过对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。使用scrollview引用代替它
在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];
设置适当的内容插图。Eureka!我通过
AutoLayout
要实现这一点,需要做的是创建中心Y约束的出口,然后在缩放时对其进行修改:
-(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)中实现这一点