将图像调整为屏幕宽度以保持纵横比的布局约束
Layout constraint to resize image to screen width maintaining aspect ratio
我有一张背景图片,其宽度与 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;
也没用
在情节提要中设置滚动视图(其中没有图像视图)并将其委托设置为您的 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
希望对您有所帮助!
我有一张背景图片,其宽度与 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;
也没用
在情节提要中设置滚动视图(其中没有图像视图)并将其委托设置为您的 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
希望对您有所帮助!