ios - imageView 在 scrollView 内居中

Question

如何在 scrollView 中垂直居中图像？

我在 Xcode 5 中使用 Storyboard。主视图嵌入在导航 Controller 中，并且在主 Storyboard中启用了“调整 ScrollView 插入”选项。这个主视图有一个 scrollView，它的大小等于主视图的大小。

imageView 位于 scrollView 内部，并且与 scrollView 大小相同。内容模式设置为 AspectFit。

所以，层次结构如下:

- UINavigationController
- UIView
   - UIScrollView
       - UIImageView

图像可以是横向的或纵向的，并且可以是任意大小(它在运行时加载)。这就是 imageView 与 scrollView 大小相同的原因。

如何让图片在 scrollView 中垂直居中？

编辑:如前所述，我已将 imageView 的 contentMode 设置为 AspectFit，因为图像可能太大，所以我需要调整大小。我遇到的问题是图像不是 ScrollView 的中心。

您可以在link查看截图并在 link 下载源代码.

Answer 1

如@Douglas 所述，使用自动布局会很好。但是，如果您更喜欢传统方式，也可以让它发挥作用。

我先给你答案，再给你解释。你应该先从 Storyboard中删除 ImageView (我稍后会解释)，然后添加 viewWillAppear 方法。

    - (void)viewDidLoad
    {
        [super viewDidLoad];
        // 1. Add the image view programatically
        UIImageView * imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"portrait.jpg"]];
        [_scrollView addSubview:imageView];
        _imageView = imageView;

    }

    - (void)viewWillAppear:(BOOL)animated
    {
        // 2. calculate the size of the image view
        CGFloat scrollViewWidth = CGRectGetWidth(_scrollView.frame);
        CGFloat scrollViewHeight = CGRectGetHeight(_scrollView.frame);
        CGFloat imageViewWidth = CGRectGetWidth(_imageView.frame);
        CGFloat imageViewHeight = CGRectGetHeight(_imageView.frame);
        CGFloat widthRatio = scrollViewWidth / imageViewWidth;
        CGFloat heightRation = scrollViewHeight / imageViewHeight;
        CGFloat ratio = MIN(widthRatio, heightRation);
        CGRect newImageFrame = CGRectMake(0, 0, imageViewWidth * ratio, imageViewHeight * ratio);
        _imageView.frame = newImageFrame;

        // 3. find the position of the imageView.
        CGFloat scrollViewCenterX = CGRectGetMidX(_scrollView.bounds);
        CGFloat scrollViewCenterY = CGRectGetMidY(_scrollView.bounds) + _scrollView.contentInset.top / 2 ;
        _imageView.center = CGPointMake(scrollViewCenterX, scrollViewCenterY);
    }    

解释如下:

1. 不要将imageView放在storyboard中，否则imageView的frame会被storyboard固定，不会随着图片的大小而变化。即使您选择 UIViewContentModeScaleAspectFill，imageView 的框架仍然没有改变。它只是在图像周围添加了一些空白。

2. 现在 imageView 的大小与您的图像相同。如果你想让它完整显示，你需要自己计算框架。

3. 注意_scrollView.contentInset.top/2，这就是为什么你需要把代码放在viewWillAppear而不是viewDidLoad。 _scrollView.contentInset.top 是导航栏的高度，在 willViewAppear 之前自动为您计算。

你把你的 ImageView 放在一个 ScrollView 中，我猜你想放大和缩小。如果是这样，添加self.imageView = imageView;和viewDidLoad的底部。将_scrollView的delegate设置为self，并添加如下方法:

    - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
    {
        return _imageView;
    }