UIImageView 不在 scrollView 内滚动

Question

我正在创建带有页面控件的滚动视图。我在 viewcontroller 中添加了一个滚动视图，在滚动视图中有一个 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

每个 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。

Answer 2

使用您展示的少量代码，您做错了很多事情。

基于这条线：

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

它 看起来 就像你有一个 UIImageView 并且你正在设置它的 .image 属性 3 次，而不是创建 3 个不同的图像观看次数。

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

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

这是一个完整的例子。它将创建一个正方形（1:1 比例）滚动视图，距顶部 20 磅，每边填充 20 磅，下方为 UIPageControl。然后它向滚动视图添加一个水平 UIStackView。该堆栈视图将保存图像视图。添加图像视图后，堆栈视图将自动定义 "scrollable area" -- 无需计算 .contentSize.

这是它的样子：

一切都在代码中完成，所以只需将空视图控制器的 class 分配给 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 3

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

int 开始位置 = 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 4

始终保持

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

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

UIImageView 不在 scrollView 内滚动

UIImageView is not scrolling inside a scrollView

iphone

xcode

objective-c

scrollview

swift