UIImageView 不在 scrollView 内滚动

Question

我正在创建一个带有页面控件的滚动视图。我在视图控制器中添加了一个滚动视图，并且在滚动视图内有一个 UIImageView。但由于某种原因，我无法将其滚动到左侧或右侧。谁能帮我解决这个问题？

我的代码：

    var tutorialImages: [String] = ["1", "2", "3"]
var frame = CGRect.zero

func pageControll() {
    pageControllTutorial.numberOfPages = tutorialImages.count

    for i in 0..<tutorialImages.count {


        imageViewTutorial.frame = frame
        imageViewTutorial.image = UIImage(named: tutorialImages[i])
        scrollViewTutorial.addSubview(imageViewTutorial)
    }

    scrollViewTutorial.contentSize = CGSize(width: imageViewTutorial.frame.size.width * CGFloat(tutorialImages.count), height: imageViewTutorial.frame.size.height)

    scrollViewTutorial.delegate = self
}


func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    var pageNumber = scrollView.contentOffset.x / scrollView.frame.size.width
    pageControllTutorial.currentPage = Int(pageNumber)
}

Answer 1

始终保持

1. 滚动视图大小大于或等于 Imageview 大小。
2. 检查并保持 UIImageView userInteraction Enable。
3. 保持滚动视图内容大小与您的图像数量一样大，例如四个 然后在 scoll 视图中显示图像 (imageview.frame.size.width*4)

内容大小 = CGSize(imageview.frame.size.width*4,imageview.frame.size.height).

Answer 2

增加滚动视图的 contentSize 为（图像数量 * 图像宽度）期望所有图像大小相等。

int startPosition = 0; 设置图片origin.x

1 image1.frame.origin.x = startPosition; startPosition = startPosition + image1.frame.size.width;

2 image2.frame.origin.x = startPosition; startPosition = startPosition + image2.frame.size.width;

3 image3.frame.origin.x = startPosition; startPosition = startPosition + image3.frame.size.width;

或者你可以把它们放在一个for循环中来设置图像的帧大小。

Answer 3

使用您展示的一小段代码，您做错了很多事情。

基于这一行：

imageViewTutorial.image = UIImage(named: tutorialImages[I])

它看起来就像您有一个 UIImageView 并且您将其 .image 属性设置了 3 次，而不是创建 3 个不同的图像视图。

此外，您的代码中没有任何内容表明您如何设置图像视图的框架。

我强烈建议使用自动布局而不是显式框架 - 让事情变得更加容易。

这是一个完整的例子。它将创建一个方形（1:1 比例）滚动视图，从顶部开始 20 分，每侧有 20 分的填充，下面是 UIPageControl。然后它将水平的UIStackView 添加到滚动视图中。该堆栈视图将保存图像视图。添加图像视图后，堆栈视图将自动定义“可滚动区域”——无需计算.contentSize。

这是它的样子：

一切都在代码中完成，因此只需将空视图控制器的类分配给SlidesExampleViewController ...不需要@IBOutlet 或@IBAction 连接。

class SlidesExampleViewController: UIViewController, UIScrollViewDelegate {

    lazy var pageControl: UIPageControl = {
        let v = UIPageControl()
        v.backgroundColor = .brown
        return v
    }()

    lazy var scrollView: UIScrollView = {
        let v = UIScrollView(frame: .zero)
        v.backgroundColor = .yellow
        v.delegate = self
        return v
    }()

    lazy var stackView: UIStackView = {
        let v = UIStackView()
        v.axis = .horizontal
        v.alignment = .fill
        v.distribution = .fill
        v.spacing = 0
        return v
    }()

    let tutorialImages: [String] = ["1", "2", "3"]

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .white

        scrollView.translatesAutoresizingMaskIntoConstraints = false
        stackView.translatesAutoresizingMaskIntoConstraints = false
        pageControl.translatesAutoresizingMaskIntoConstraints = false

        view.addSubview(scrollView)
        view.addSubview(pageControl)
        scrollView.addSubview(stackView)

        let v = view.safeAreaLayoutGuide
        let g = scrollView.contentLayoutGuide

        NSLayoutConstraint.activate([

            // constrain scroll view to top, leading, trailing with 20-pts "padding"
            scrollView.topAnchor.constraint(equalTo: v.topAnchor, constant: 20.0),
            scrollView.leadingAnchor.constraint(equalTo: v.leadingAnchor, constant: 20.0),
            scrollView.trailingAnchor.constraint(equalTo: v.trailingAnchor, constant: -20.0),

            // constrain scroll view height equal to scroll view width
            scrollView.heightAnchor.constraint(equalTo: scrollView.widthAnchor),

            // constrain stack view to all 4 sides of scroll view's contentLayoutGuide
            stackView.topAnchor.constraint(equalTo: g.topAnchor),
            stackView.bottomAnchor.constraint(equalTo: g.bottomAnchor),
            stackView.leadingAnchor.constraint(equalTo: g.leadingAnchor),
            stackView.trailingAnchor.constraint(equalTo: g.trailingAnchor),

            // constrain stack view height equal to scroll view height
            stackView.heightAnchor.constraint(equalTo: scrollView.heightAnchor),

            // constrain page control width to 80% of scroll view width
            pageControl.widthAnchor.constraint(equalTo: scrollView.widthAnchor, multiplier: 0.8),

            // constrain page control top to 8-pts below scroll view bottom
            pageControl.topAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: 8.0),

            // constrain page control centerX to centerX of scroll view
            pageControl.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor, constant: 0.0),

        ])

        tutorialImages.forEach { name in
            if let img = UIImage(named: name) {
                let imgView = UIImageView(image: img)
                stackView.addArrangedSubview(imgView)
                imgView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
            }
        }

        pageControl.numberOfPages = tutorialImages.count

        scrollView.isPagingEnabled = true

    }

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let pageIndex = round(scrollView.contentOffset.x/view.frame.width)
        pageControl.currentPage = Int(pageIndex)
    }
}

Answer 4

每个 UIImageView 的 frame 都设置为 CGRect.zero，因此它们的高度和宽度都为 0，这意味着您的滚动视图 contentSize 也是 0x0。就滚动视图而言，这里没有可滚动的内容。

改为这样做：

let image = UIImage(named: tutorialImages[i])
imageViewTutorial.frame = CGRect(x: widthSoFar, y: 0, width: image.width, height: image.height)
imageViewTutorial.image = image
scrollViewTutorial.addSubview(imageViewTutorial)
widthSoFar += image.size.width

初始化widthSoFar在for循环之外为0。