如何在ScrollView中制作全屏背景图像并保持宽高比

Question

我在ScrollView中使用了背景图像@ 2x 7360x828px和@ 3x 11040x1242px，在所有iPhone（全屏）上看起来都不错，但是在iPad上背景图像仅占据屏幕高度的一半。

我尝试了多种变体，包括自动布局和不带有自动布局，以及不同的contentMode，但是我无法实现我的目标，要么背景图像非常拉伸，要么宽高比正确的图像小于ScrollView。

我的上一个代码：

var imageView = UIImageView(image: UIImage(named: "map.png"))
lazy var scrollView = UIScrollView(frame: view.bounds)

override func viewDidLoad() {
    super.viewDidLoad()

    makeScrollView()
}

func makeScrollView() {

    // For iPad
    scrollView.backgroundColor = UIColor.black
    scrollView.contentSize = imageView.bounds.size
    scrollView.clipsToBounds = true
    scrollView.contentMode = .scaleAspectFit

    print("Scroll size: == ")
    print(scrollView.contentSize)

    scrollView.autoresizingMask = UIViewAutoresizing.flexibleWidth
    scrollView.autoresizingMask = UIViewAutoresizing.flexibleHeight

    scrollView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(scrollView)
    scrollView.contentInsetAdjustmentBehavior = .never

    scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    scrollView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
    scrollView.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true

    imageView.translatesAutoresizingMaskIntoConstraints = false
    scrollView.addSubview(imageView)

    imageView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
    imageView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
    imageView.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true
    imageView.widthAnchor.constraint(equalToConstant: 7360 / 2).isActive = true
    imageView.contentMode = .scaleAspectFit
}

如何为iPad制作全屏背景图像并保持宽高比？

该应用程序仅在横向模式下使用。

屏幕截图：

1）contentMode = .scaleAspectFit

2）contentMode = .scaleAspectFill

3）.contentMode = .scaleToFill

4）

5）我想要达到的结果。具有正确纵横比的全屏图像。

Answer 1

我已经准备了一个示例项目，以演示如何仅使用演示图板来放置所有内容来实现此目的。正确完成设置后，iOS将为您缩放和定位所有内容。您也可以在代码中执行此操作，只需要按照本指南中有关使用宽高比的提示进行操作即可。

这是GitHub项目：https://github.com/ekscrypto/Scaled-Scroller-Demo

使用参考图像：

从UIScrollView开始，整个屏幕如下：

接下来，设置容器视图，该视图将充当UI的所有不同部分的容器，该视图将容纳整个图像，完全缩放并匹配图像的宽高比。只需将常规UIView放到滚动视图中，并将其对超视图容器的前导/尾随/顶部/底部布局约束设置为0。它将抱怨无法定位它，除非您在下一步中添加图像。

现在这是大多数魔术发生的地方。在刚刚插入的UIView中插入一个UIImageView。首先，使该UIImageView在UIView容器0的前/后/上/下布局约束。

然后，在UIView的宽度和高度之间设置长宽比约束，并确保将乘数值设置为要使用的图像的width：height。就我而言，这是1600 x 330。

纵横比非常重要，因为这将确保图像不失真，这也将迫使父视图拉伸并保持该纵横比。另一个非常重要的约束是确保此UIImageView的高度等于视图控制器的Root View。这样，无论您使用的是iPad还是iPhone，都可以确保图像从屏幕的底部到顶部。

请注意，没有将Width或Height设置为特定值，而仅将宽高比设置为。这就是一切扩展的方式。

尽管这足以回答您的问题，但我还添加了几个UI元素定位的示例，因此无论设备如何，它们始终具有相同的比例，并且始终相对于图像正确定位。本质上，对于要相对于图像定位的每个UI元素，您都可以设置一个隐藏的UIView，其纵横比等于所需位置的X和Y距离。

然后，将“定位” UIView保持隐藏状态，并将实际的UI元素（按钮等）相对于该视图的右下角放置。最终结果是在iPhone和iPad上正确缩放了界面。

尽管您的图像中已经包含了“按钮”，但您可能仍想在地图上每个“级别标记”的顶部放置一个透明按钮，以便用户可以点击它。