将图像调整为屏幕宽度以保持纵横比的布局约束

Question

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

我已经设置了一个滚动视图并在其中放置了一张图片，我可以滚动查看它，效果很好。问题是图像很大 - 垂直和水平。我想让图片适合屏幕的宽度，不超过。

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

这为我提供了一个填满屏幕的滚动视图（正确！），但其中的图像很大，我需要在两个轴上滚动。我希望图像调整大小以适应 scrollview/screen 宽度，同时保持其纵横比，因此用户只需要滚动 up/down.

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;

也没用

Answer 1

在情节提要中设置滚动视图（其中没有图像视图）并将其委托设置为您的 viewcontroller。然后像这样实现你的viewcontroller：

@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

希望对您有所帮助！

将图像调整为屏幕宽度以保持纵横比的布局约束

Layout constraint to resize image to screen width maintaining aspect ratio

resolution

uiscrollview

ios

autolayout

nslayoutconstraint