imageView 在 scrollView 内居中

Question

如何在滚动视图中垂直居中图像？

我在 Xcode 5 中使用情节提要。主视图嵌入在导航控制器中，并且在主情节提要中启用了“调整滚动视图插图”选项。这个主视图有一个滚动视图，它的大小等于主视图的大小。

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

所以，层次结构如下：

- UINavigationController
- UIView
   - UIScrollView
       - UIImageView

图像可以是横向或纵向的，并且可以是任意大小（在运行时加载）。这就是为什么 imageView 和 scrollView 大小一样的原因。

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

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

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

Answer 1

使用@Douglas 提到的自动布局会很好。但是，如果您更喜欢传统方式，您也可以使用它。

我会先给你答案，然后再给你解释。您应该先从 storyboard 中删除 image view（我稍后会解释），然后添加 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的frame依然没有改变。它只是在图像周围添加一些空白区域。

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

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

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

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

Answer 2

我发表了评论，但随后查看了您的项目。你快到了。我执行了以下步骤，并得到了您正在寻找的结果。

首先，确保您已开启自动布局！！！

在故事板中单击滚动视图。您有一个与视图大小相同的滚动视图。您将施加一些限制。在故事板的底部，您会看到一些图标。

上面的第四个看起来有点像侧面的工字梁，它是别针按钮。选择滚动视图后，点击它会弹出一个弹出菜单。

对于滚动视图，请单击中间块周围的所有栏，以便将滚动视图固定到主视图的两侧。

您会注意到它们现在都是红色的。

然后去点击imageview。您再次将其设置为视图的大小。再次使用 pin 按钮，您将仅将 Width 固定为 320，将 Height 固定为 568。完成后，您将使用下一个按钮。

这是对齐按钮。选择图像视图后单击它。您将单击容器中的水平中心和容器中的垂直中心。

接下来，您需要向 ViewController.m 文件添加一种方法。

- (void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    [_scrollView setContentSize:CGSizeMake(self.view.frame.size.width, self.view.frame.size.height)];
}

启动模拟器，让她撕裂！你会得到一个警告。它说滚动视图的内容大小不明确。不过没关系，因为你会在 viewDidLayoutSubviews 上设置它。

希望能有所帮助，或帮助某人。自动布局和滚动视图有点难！

编辑#1

如果您想使图像视图可缩放，可以通过捏缩放执行以下操作。

确保您使 .h 文件遵循 UIScrollViewDelagate。

@interface ViewController : UIViewController <UIScrollViewDelegate>

这将允许滚动视图能够访问滚动视图的委托方法。您正在寻找的方法被称为..

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

然后在 .m 文件的 viewDidLoad 方法中执行以下操作。

_scrollView.minimumZoomScale = 0.5;
_scrollView.maximumZoomScale = 4.0;
_scrollView.delegate = self;

下划线和变量名同self.variable。任何一个都可以。

应该这样做。让我知道它是否有效或您有任何其他问题。尽情享受吧！

Answer 3

这些是您可以使用的，ImageView 内容显示的 3 种模式。您可以通过动态设置它们来做到这一点，或者您也可以在情节提要中设置它们，单击 ImageView 并转到属性选项卡栏并从中选择在那里，运行它们并选择你想要的输出。

imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.contentMode = UIViewContentModeScaleToFill;
imageView.contentMode = UIViewContentModeScaleAspectFill;

希望对你有帮助

Answer 4

如果您想在图像视图中居中图像，请使用

imageView.contentMode=UIViewContentModeCenter;

图像在此内容模式下保持其大小。或者，您可以根据需要使用其他内容模式。

UIViewContentModeScaleToFill,
UIViewContentModeScaleAspectFit,      // contents scaled to fit with fixed aspect. remainder is transparent
UIViewContentModeScaleAspectFill,     // contents scaled to fill with fixed aspect. some portion of content may be clipped.
UIViewContentModeRedraw,              // redraw on bounds change (calls -setNeedsDisplay)
UIViewContentModeCenter,              // contents remain same size. positioned adjusted.
UIViewContentModeTop,
UIViewContentModeBottom,
UIViewContentModeLeft,
UIViewContentModeRight,
UIViewContentModeTopLeft,
UIViewContentModeTopRight,
UIViewContentModeBottomLeft,
UIViewContentModeBottomRight,