imageView以scrollView为中心

Question

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

我在Xcode 5中使用故事板。主视图嵌入在导航控制器中，并且＆＃34;调整滚动视图插图＆＃34;选项在主Storyboard中启用。此主视图有一个scrollView，其大小等于主视图大小。

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

因此，层次结构如下：

- UINavigationController
- UIView
   - UIScrollView
       - UIImageView

图像可以是横向或纵向，可以是任何尺寸（在运行时加载）。这就是imageView与scrollView的大小相同的原因。

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

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

您可以在link查看屏幕截图，然后在link下载源代码。

Answer 1

我做了评论，但后来看了一下你的项目。你快到了。我按照以下步骤操作，得到了您正在寻找的结果。

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

在故事板中单击滚动视图。您有一个与视图大小相同的滚动视图。你要加上一些约束。在故事板的底部，你会看到一些图标。

第四个看起来有点像工字梁，它是按钮。选择滚动视图后，单击此按钮将弹出一个弹出菜单。

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

你会发现它们现在都是红色的。

然后点击图片查看。再次将它设置为视图的大小。再次使用pin按钮，你只需要将宽度固定为320，将高度固定为568.完成后，您将使用下一个按钮。

这是对齐按钮。选择图像视图后单击它。您将单击Container中的Horizo​​ntal Center和Container中的Vertical Center。

接下来，您需要在ViewController.m文件中添加一个方法。

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

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

希望有所帮助或帮助某人。 Autolayout和滚动视图有点难啊!!

EDIT＃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 2

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

我先给你答案，然后再解释给你。您应该首先从故事板中删除图像视图（我稍后会解释它），然后添加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放在故事板中，否则imageView的框架将由故事板修复，并且不会随图像的大小而改变。即使您选择UIViewContentModeScaleAspectFill，仍然不会更改imageView的框架。它只是在图像周围添加了一些空白区域。

2. 现在，imageView与您的图片具有相同的尺寸。如果您希望它完全显示，您需要自己计算帧。

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

您将图像视图放在scrollView中，我想您想要放大和缩小。如果是这样，请添加self.imageView = imageView;和viewDidLoad的底部。将_scrollView的委托设置为self并添加以下方法：

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

Answer 3

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

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

希望这有帮助

Answer 4

如果您想在imageview中居中使用

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,