在滚动视图中垂直滚动时，图像视图移到一边答案

【问题标题】：Image view moves to aside when scrolling vertically in scroll view在滚动视图中垂直滚动时，图像视图移到一边
【发布时间】：2020-01-07 03:32:49
【问题描述】：

我有一个视图控制器，它有一个 UIView (featuredStoryView)，在该视图中，我添加了一个滚动视图 (scrollView)，在滚动视图中，我添加了一个 ImageView (bookCover)，一个 on在另一个之上。以下是所有这些元素的代码：

func setupFeaturedStoryView() {

    featuredStoryView.backgroundColor = .white
    featuredStoryView.layer.cornerRadius = 12

    // Let the user tap on the featured story image view
    featuredStoryView.isUserInteractionEnabled = true
    let tapGesture = UITapGestureRecognizer(target: self, action: #selector(featuredStoryViewTapped))
    featuredStoryView.addGestureRecognizer(tapGesture)
    view.addSubview(featuredStoryView)
    addFeaturedStoryViewConstraints()

}

func setupScrollView() {

    scrollView.backgroundColor = UIColor(red: 10/255, green: 10/255, blue: 20/255, alpha: 0.5)
    scrollView.layer.cornerRadius = 15
    featuredStoryView.addSubview(scrollView)

    // Add the constraints to the scroll view
    scrollView.translatesAutoresizingMaskIntoConstraints = false
    scrollView.topAnchor.constraint(equalTo: featuredStoryView.topAnchor).isActive = true
    scrollView.leadingAnchor.constraint(equalTo: featuredStoryView.leadingAnchor).isActive = true
    scrollView.trailingAnchor.constraint(equalTo: featuredStoryView.trailingAnchor).isActive = true
    scrollView.bottomAnchor.constraint(equalTo: featuredStoryView.bottomAnchor).isActive = true
}

func setupBookCover() {

    bookCover.backgroundColor = .yellow
    bookCover.layer.cornerRadius = 15
    bookCover.contentMode = .scaleAspectFill

    scrollView.addSubview(bookCover)
    addBookCoverConstraints()

}

// Add the constraints to the featured story view
func addFeaturedStoryViewConstraints() {

    featuredStoryView.translatesAutoresizingMaskIntoConstraints = false
    featuredStoryView.topAnchor.constraint(equalTo: view.centerYAnchor, constant: -130).isActive = true
    featuredStoryView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 100).isActive = true
    featuredStoryView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -100).isActive = true
    featuredStoryView.bottomAnchor.constraint(equalTo: view.centerYAnchor, constant: 130).isActive = true

}

// Add constraints to the book cover
func addBookCoverConstraints() {

    bookCover.translatesAutoresizingMaskIntoConstraints = false
    bookCover.topAnchor.constraint(equalTo: featuredStoryView.topAnchor).isActive = true
    bookCover.leadingAnchor.constraint(equalTo: featuredStoryView.leadingAnchor).isActive = true
    bookCover.trailingAnchor.constraint(equalTo: featuredStoryView.trailingAnchor).isActive = true
    bookCover.bottomAnchor.constraint(equalTo: featuredStoryView.bottomAnchor).isActive = true
}

当您点击 featuresStoryView 时，以下代码 sn-p 运行：

@objc func featuredStoryViewTapped() {

    scrollView.contentSize.height = 1500

    let animator = UIViewPropertyAnimator(duration: 0.6, dampingRatio: 0.8) {
        self.featuredStoryView.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height)
        self.scrollView.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height)
        self.view.layoutIfNeeded()
        self.bookCover.frame = CGRect(x: self.featuredStoryView.frame.midX - (bookCoverWidth / 2), y: 90, width: bookCoverWidth, height: bookCoverHeight)
        self.view.layoutIfNeeded()
    }
    animator.startAnimation()

}

现在看看这个 Gif：

这里的问题是，当我滚动时，黄色的 imageView(bookCover) 移动到左上角，为什么会出现这种情况？它应该与滚动视图一起上升。有没有办法解决这个问题？

【问题讨论】：

这个问题几乎可以肯定是由于将自动布局/约束与明确设置框架和 contentSize 混合在一起。如果您发布完整的代码会有所帮助，这样我们就可以确切地看到正在发生的事情 - 请参阅minimal reproducible example。

标签： ios swift uiscrollview uiimageview

【解决方案1】：

你不能像self.featuredStoryView.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height) 和contentSize 这样在自动布局中直接设置框架，比如scrollView.contentSize.height = 1500。因此，请尝试根据您的要求设置约束。

【讨论】：