UIImageView / UIScrollView强制固定的宽高比适合屏幕

Question

我正在为iPad制作一个简单的应用程序，它包含一个可以放大/缩小并导航的巨型图像。

此图像放在UIImageView ，然后放在UIScrollView 。

导航和缩放工作100％罚款; 但是，图像以固定的宽高比加载以适合屏幕，并且永远不会改变（即使在放大时）。

我有一种感觉，Interface Builder正在设置一些我不知道的属性，但我已经尝试了一些我能想到的解决这个问题的方法。

问题：

当应用程序最初加载时， UIScrollView内的内容会自动调整大小，以便通过更改其宽高比来完全适合iPad屏幕./fixed; 实际图像很大（比iPad分辨率大）。 即使放大图像，此缩放的宽高比仍然保持不变，并使图像看起来拉伸。

无论我尝试什么，我都无法阻止iPad自动重新缩放我的图片。 我只是希望应用程序以我在iPad上正常显示的图像（100％缩放）开始，当前适合iPad屏幕的部分是图像的左上角。

我试图解决它：

我尝试将界面生成器中的UIImageView's内容模式更改为“左上角”。 这似乎工作得很好，但后来我意识到UIScrollView不会让你滚动图像经过最初显示的部分（左上角）。 您可以放大左上角并滚动，但不要超过最初在屏幕上显示的内容。

码：

这是我用来设置视图的代码。 imageScrollView是UIScrollView ，和imageView是UIImageView 。 它们都是IBOutlets 。

   // Set the needed attributes of the imageView
    [imageView setImage:[UIImage imageNamed: @"TestImage.png"]];
    imageView.userInteractionEnabled = YES;

    // Set a bunch of the imageScrollView attributes.

    // calculate minimum scale to perfectly fit image width, and begin at that scale
    float minimumScale = [imageScrollView frame].size.width  / [imageView frame].size.width;
    [imageScrollView setMinimumZoomScale:minimumScale];
    [imageScrollView setZoomScale:1];
    [imageScrollView setMaximumZoomScale:10];
    [imageScrollView setContentSize:CGSizeMake(imageView.frame.size.width, imageView.frame.size.height)];
    [imageScrollView setScrollEnabled:YES];
    [imageScrollView setUserInteractionEnabled:YES];
    imageScrollView.clipsToBounds = YES;
    imageScrollView.bounces = FALSE;
    imageScrollView.bouncesZoom = FALSE;

我还有两个UIGestureRecongizers来处理tap-zoom，但我不认为它们是问题。 当我评论它们时，没有任何改变。

任何帮助将非常感激。

Answer 1

我修好了它！

对于其他任何有相同问题的人，以下是我修复代码的方法：

错误的原因是Interface Builder强制视图使用ScaleToFill contentMode 。 将ScrollView's contentMode设置为UIViewContentModeScaleAspectFit不能UIViewContentModeScaleAspectFit工作，因为imageView仍然被扭曲。

修复：

必须在UIScrollView和UIImageView的设置结束时添加以下代码（在viewDidLoad()方法内部）：

    [imageScrollView setContentMode:UIViewContentModeScaleAspectFit];
    [imageView sizeToFit];
    [imageScrollView setContentSize:CGSizeMake(imageView.frame.size.width, imageView.frame.size.height)];

说明：

首先， UIScrollView's contentMode设置为AspectFit ，就像@Mike建议的那样。 然后，sizeToFit（）被调用的imageView覆盖界面生成器的恼人的预设，并且使图像显示为正确的尺寸。

最后一行非常重要。 您必须设置contentSize后，你重新大小的为滚动型imageView 。 否则， ScrollView会认为图像仍然是iPad显示屏的大小，因此不会认为有任何可滚动的内容。 设置的大小ScrollView调整后 ImageView和改变ScrollView's contentMode使ScrollView图像的实际大小。

希望有所帮助！

感谢Mike的帮助，它让我走上正轨:)

• 亚历克斯

Answer 2

由于imageView是滚动视图的内容，请尝试更改ScrollView's内容模式UIViewContentModeScaleAspectFit 。 尝试在imageview上调用setNeedsDisplay 。

Answer 3

对于那些努力在横向模式下修复图像方面同时使用UICollectionView同时需要图像全屏的人。

在您的- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath执行以下操作：

CGFloat newWidth = self.view.bounds.size.width; //if iPad in landscape and fullscreen value is 1024
CGFloat newHeight = image.size.height / image.size.width * newWidth;

cell.clipsToBounds = YES;
cell.imageView.frame = CGRectMake(0, 0, newWidth, newHeight);
cell.imageView.contentMode = UIViewContentModeScaleAspectFill;
cell.imageView.image = image;
cell.scrollView.contentSize = cell.imageView.frame.size;

关键是要保持图像视图框的正确尺寸，同时保持正确的宽高比。

Answer 4

这段代码对我有用:(斯威夫特）

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    let imgView = UIImageView(image: UIImage(named: "MyImage"))
    imgView.contentMode = .ScaleAspectFit
    var size = imgView.frame.size
    size.height = size.height / size.width * scrollView.frame.width
    size.width = scrollView.frame.width
    imgView.frame.size = size
    scrollView.addSubview(imgView)
    scrollView.contentSize = size
}