Swift:UIImageView在iPad上表现得很奇怪,但在iPhone上却完全没问题 - 如何让图像填满视图?

Swift: UIImageView behaves strange on iPad, but perfectly fine on iPhone - how to make an image fill the view?

提问人:RjC 提问时间:1/19/2018 更新时间:1/19/2018 访问量:474

问:

也许这很容易,或者我不了解 imageView 的工作方式,但是当我将 imageView 放置在具有一些约束的情节提要中时(见下文),它会显示用户选择的图像,我希望它显示的方式:填充整个 imageView(剪切图像的顶部和底部)。

当我在 iPad(Air、Pro 等)上运行相同的通用应用程序时,imageView 本身会正确显示 (1:1),用户可以选择图像,但不是填充整个视图,而是将图像显示为整体(顶部/底部黑条用于横向,右/左黑条用于纵向照片)。有没有办法告诉应用程序“始终”显示图像,填充整个视图并剪切其余部分?

这是我在故事板和代码中设置 imageView 的方式:

脚本:

在情节提要中,imageView 位于中间,紧贴前导和尾随两侧。纵横比设置为 1:1 - 因此它是一个完美的矩形(例如,在 iPhone 8 上它是 375x375),在所有模拟器上它都保持一个完美的矩形。制作的内容设置为“Aspect Fit”。

法典:

在代码中,我添加了 tapGestureRecognizer 和 UIImagePickerController:

@IBOutlet weak var imageView: UIImageView!

override func viewDidLoad() {
    addPhotoGesture = UITapGestureRecognizer(target: self, action: #selector(self.importPhoto))
        imageView.addGestureRecognizer(addPhotoGesture)
}

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {

        // get image
        guard let image = info[UIImagePickerControllerEditedImage] as? UIImage else {return}

        // save in imageView
        imageView.image = image

        addPhotoGesture.isEnabled = false

    }

同样,在所有iPhone型号上,图像都会填充整个imageView(某些部分被截断,但没关系)。在iPad上,显然屏幕空间是如此之大,以至于所有图像都完全用黑条显示,但我希望能够让它填充imageView,剪切外部的任何东西。

我该怎么做?

iOS iPhone iPad UIImiconView、 纵横比

评论

0赞 Paulw11 1/19/2018
图像视图的内容模式设置为什么?听起来你想要“纵横比填充”。
0赞 RjC 1/19/2018
这是相吻合的 - 这没关系。我一开始也考虑过纵横比填充,但图像仍然显示在 iPad 上带有黑条,可以这么说,imageView 没有“填充”。imageView 约束的纵横比为 1:1
0赞 Paulw11 1/19/2018
纵横比适合屏幕上的整个图像,保持纵横比。如果图像尺寸与屏幕尺寸不匹配,则将根据需要在顶部/底部或左侧/右侧添加空间。纵横比填充可确保在保持纵横比的同时填充整个图像视图。如果图像尺寸与屏幕尺寸不匹配,则部分图像将根据需要离开屏幕以填充图像。从您想要的行为的描述中,您需要方面填充。
0赞 RjC 1/19/2018
你是对的,但由于某种原因,整个 imageView 在 iPad 上被拉伸,而不是在 iPhone 上保持 1:1 的比例。我能做些什么?我认为这就是我决定使用宽高比贴合(在 iPhone 上运行良好)的原因。高度/宽度设置为 375,前导/尾随到上视图为 -16,与图像视图的比例为 1:1,与顶部安全区域对齐为 60。
0赞 Paulw11 1/19/2018
不应设置宽度和前导/尾随。您可以设置前导/尾随和无宽度,也可以设置宽度和前导(或尾随)。如果设置宽度和前导和尾随,则可能会收到有关冲突约束的警告,因为自动布局将无法同时满足所有这些约束。

答: 暂无答案