如何在滚动视图中填充图像以填充屏幕？

Posted 2023-03-16

【中文标题】如何在滚动视图中填充图像以填充屏幕？

【英文标题】：How can I fill image in scroll view to fill screen?

【发布时间】：2020-03-04 18:20:24

【问题描述】：

我在玩滚动视图，但遇到了一个问题。我在 Storyboard 中创建了一个视图控制器。视图控制器包含一个滚动视图，它填充整个超级视图。

然后我以编程方式将图像添加到滚动视图中。图像确实显示在滚动视图中，并且分页工作得很好。唯一的问题是滚动视图设置为填充超级视图，但保存图像的图像视图似乎停止在导航栏所在的位置上方。如何让图像视图填充滚动视图中的整个视图？

  @IBOutlet weak var scrollView: UIScrollView!
  @IBOutlet weak var pagingView: UIPageControl!
  var images = [UIImage]()
  var frame = CGRect(x: 0, y: 0,width: 0,height: 0)



 override func viewDidLoad() 
        super.viewDidLoad()
        scrollView.delegate = self
        scrollView.isPagingEnabled = true 

        images = [UIImage(named: "Slide1")!, UIImage(named: "Slide2")!, UIImage(named: "Slide3")!, UIImage(named: "Slide4")!]

        pagingView.numberOfPages = images.count

// This is where I think I'm having the height problem. 
        for i in 0..<images.count 
            let imageView = UIImageView()
            let x = self.view.frame.size.width * CGFloat(i)

            imageView.frame = CGRect(x: x, y: 0, width: self.view.frame.width, height: self.view.frame.height)
            imageView.contentMode = .scaleAspectFill
            imageView.image = images[i]

            scrollView.contentSize.width = scrollView.frame.size.width * CGFloat(i + 1)

            scrollView.addSubview(imageView)
        

    




    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) 
        let pageNumber = scrollView.contentOffset.x / scrollView.frame.size.width

        pagingView.currentPage = Int(pageNumber)
    

将导航栏设置为隐藏后，这是输出

滚动视图背景颜色为红色

【问题讨论】：

你能把结果图片发给你吗？

@Harish 当然是的

所以你想看到整个屏幕的图像？这意味着您不想看到导航栏？

一个明显的问题：viewDidLoad 为时过早。那时你不知道事情进展时self.view.frame 会是什么。请阅读programmingios.net/premature-layout。 — 当然，另一个问题是你说的是frame，而你的意思是bounds。

@Harish 是的，这正是我想要的。

【参考方案1】：

在这种情况下，您需要启用父视图 clipsToBounds。将 UIScrollview clipsToBounds 属性设置为 True。

以编程方式scrollView.clipsToBounds = true

在UIStoryBoard - 点击视图->属性检查器

如果您想查看整个屏幕，请确保添加scrollView 的topConstraint 分配superView 并将navigationBar 隐藏在viewWillAppear 中，

 override func viewWillAppear(_ animated: Bool) 
        super.viewWillAppear(animated)
        navigationController?.setNavigationBarHidden(true, animated: animated)
    

确保通过

删除状态栏

override var prefersStatusBarHidden: Bool 
   return true

更新图像的 Y 位置。

imageView.frame = CGRect(x: x, y: **self.scrollView.frame.minY**, width: self.view.frame.width, height: self.view.frame.height)

将scrollView topConstraint 更新 -20。

【讨论】：

您好，Harish，感谢您的回复。我已经在情节提要中设置了 clipsToBounds

感谢您更新您的答案，将导航栏设置为隐藏后，图像视图更接近填充视图，但现在它位于状态栏上方。我将滚动视图颜色更改为红色，以便您看得更清楚。有什么建议吗？

@Clint：现在检查。

很高兴你得到了结果。希望您投票并接受@Clint的答案。