布局约束将图像大小调整为屏幕宽度保持纵横比答案

【问题标题】：Layout constraint to resize image to screen width maintaining aspect ratio布局约束将图像大小调整为屏幕宽度保持纵横比
【发布时间】：2015-04-26 11:59:05
【问题描述】：

我有一个与 iPhone 屏幕宽度相同但长度更长的背景图像。我想沿 y 轴滚动图像。

我已经设置了一个滚动视图并在其中放置了一个可以正常滚动查看的图像。问题是图像很大 - 垂直和水平。我希望图像适合屏幕的宽度并且不超过。

我使用 6 plus 尺寸 (1242*2208 @ 72ppi) 模板在 Photoshop 中创建了图像 - 考虑到 iPhone 5 以后的宽高比为 16:9，所以我所要做的就是设置一个约束保持纵横比和另一个设置宽度等于滚动视图宽度。这没有任何效果，我不确定如何继续。

这给了我一个填充屏幕的滚动视图（正确！），但是里面的图像很大，我需要在两个轴上滚动。我希望图像调整大小以适应滚动视图/屏幕宽度，同时保持其纵横比，因此用户只需要向上/向下滚动。

edit 我已经调整了代码以更正宽度限制并为图像添加内容模式。还没解决

    self.background = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"newOrderBack_stg1.png"]];
self.scrollView.contentSize = self.background.bounds.size;
[self.scrollView addSubview:self.background];

NSLayoutConstraint *constraint = [NSLayoutConstraint
                                 constraintWithItem:self.background
                                 attribute:NSLayoutAttributeHeight
                                 relatedBy:NSLayoutRelationEqual
                                 toItem:self.background
                                 attribute:NSLayoutAttributeWidth
                                 multiplier:16.0/9.0
                                 constant:0.0f];
[self.background addConstraint:constraint];

NSLayoutConstraint *widthConstraint = [NSLayoutConstraint
                                       constraintWithItem:self.background
                                       attribute:NSLayoutAttributeWidth
                                       relatedBy:NSLayoutRelationEqual
                                       toItem:self.scrollView
                                       attribute:NSLayoutAttributeWidth
                                       multiplier:1
                                       constant:0];
[self.scrollView addConstraint:widthConstraint];

self.background.contentMode = UIViewContentModeScaleAspectFill;

也没有用

【问题讨论】：

我更改了图像的帧大小，这在一定程度上有所帮助，因为它显着减小了宽度，但还不够，但是现在图像在滚动视图中的开始位置比以前低了很多（当它从顶部）。

标签： ios uiscrollview autolayout resolution nslayoutconstraint

【解决方案1】：

在情节提要中设置您的滚动视图（其中不包含图像视图）并将其委托设置为您的视图控制器。然后像这样实现您的视图控制器：

@interface ViewController () <UIScrollViewDelegate>

@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (strong, nonatomic) UIImageView *imageView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"example_image"]];
    self.imageView.translatesAutoresizingMaskIntoConstraints = NO;

    [self.scrollView addSubview:self.imageView];
    [self.scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[imageView]|" options:0 metrics:nil views:@{@"imageView": self.imageView}]];
    [self.scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[imageView]|" options:0 metrics:nil views:@{@"imageView": self.imageView}]];
}

- (void)viewDidLayoutSubviews {
    CGFloat zoomScale = CGRectGetWidth(self.scrollView.frame) / self.imageView.image.size.width;

    self.scrollView.minimumZoomScale = zoomScale;
    self.scrollView.maximumZoomScale = zoomScale;
    self.scrollView.zoomScale = zoomScale;
}

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

@end

希望对你有帮助！

【讨论】：