Question

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

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

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

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

编辑我调整了代码以更正宽度约束并为图像添加内容模式。它尚未解决

    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

在storyboard中设置您的scrollview（不包含imageview）并将其委托设置为您的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

希望它有所帮助！

布局约束以将图像大小调整为屏幕宽度，保持宽高比

1 个答案: