调整图像的高度以适应屏幕(保持长宽比),并使其余部分可水平滚动。

问题描述 投票:0回答:1

我想将图像的高度与屏幕的高度相适应,但保持长宽比,并使其余部分可以水平滚动。你可以看到下面的代码示例。我设法使图像的高度与屏幕的高度相适应,同时保持纵横比,就像这样。在滚动视图中添加一个视图,它可以拉伸以填充可用的宽度。.

我的最后一个问题是scrollView没有滚动整个水平距离。只是滚动视图用较小的图片尺寸滚动的距离,所以我也尝试在设置contentView后重新设置滚动视图,就像这样 如何自动调整UIScrollView的大小以适应其内容? 但不幸的是,它没有工作。所以我看不到图像的边缘,但是如果我把滚动视图拉到一边并保持我的 "手指 "在上面,我就能看到图像,但是我一松手它就会弹回图像的中间部分。

我也看了一下这个。https:/developer.apple.comlibraryarchivetechnotestn2154_index.html。但我找不到解决问题的方法。

我也试过手动计算图片贴合屏幕后的比例变化,然后设置滚动视图的内容大小,但也没有用(就像这个问题的答案。如何定位背景图片上UI元素与图片的相对位置? 和这里。如何在Swift 3中根据UIImage的sizeratio调整UIImageView的大小?)

这是代码。

import UIKit

class ViewController: UIViewController, UIScrollViewDelegate {
     var scrollView: UIScrollView = {
            let scrollView = UIScrollView()
            scrollView.translatesAutoresizingMaskIntoConstraints = false
            scrollView.backgroundColor = .red
            return scrollView
        }()

        var contentView: UIView = {
            let contentView = UIView()
            contentView.translatesAutoresizingMaskIntoConstraints = false
            return contentView
        }()

        var imageView: UIImageView = {
            let imageView = UIImageView()
            let image = UIImage(named: "Erlebnispark.jpg")
            imageView.image = image
            imageView.backgroundColor = .red
            imageView.translatesAutoresizingMaskIntoConstraints = false
            imageView.contentMode = .scaleAspectFill
            return imageView
        }()

        override func viewDidLoad() {
            super.viewDidLoad()
            self.view.addSubview(scrollView)
            scrollView.addSubview(contentView)
            contentView.addSubview(imageView)
            scrollView.delegate = self
            setupLayout()
        }

        func setupLayout() {
            [
                scrollView.topAnchor.constraint(equalTo: self.view.topAnchor),
                scrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
                scrollView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
                scrollView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),

                contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
                contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
                contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
                contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
                //contentView.widthAnchor.constraint(equalTo: scrollView.contentLayoutGuide.widthAnchor),

                contentView.heightAnchor.constraint(equalTo: scrollView.frameLayoutGuide.heightAnchor),
               // contentView.widthAnchor.constraint(equalTo: scrollView.contentLayoutGuide.widthAnchor),

                imageView.topAnchor.constraint(equalTo: contentView.topAnchor),
                imageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
                imageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
                imageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
               // imageView.heightAnchor.constraint(equalTo: contentView.heightAnchor),

                ].forEach {$0.isActive = true}
        }
}

也许有人能帮我。

ios swift uiimageview autolayout scrollview
1个回答
2
投票

只是做了一些改动...

var imageView: UIImageView = {
    let imageView = UIImageView()
    let image = UIImage(named: "Erlebnispark.jpg")
    imageView.image = image
    imageView.backgroundColor = .red
    imageView.translatesAutoresizingMaskIntoConstraints = false

    // use scaleToFill
    //imageView.contentMode = .scaleAspectFill
    imageView.contentMode = .scaleToFill

    return imageView
}()

第一行 setupLayout():

func setupLayout() {
    // add this line
    guard let img = imageView.image else { return }

约束数组的最后一行。

        // add this line
        imageView.widthAnchor.constraint(equalTo: imageView.heightAnchor, multiplier: img.size.width / img.size.height),

        ].forEach {$0.isActive = true}

你完成的约束现在告诉图像视图的 宽度 自成一派 高度 倍数 img.size.width / img.size.height

其他的一切都好办了。

© www.soinside.com 2019 - 2024. All rights reserved.