使用自动布局实现水平滚动的UIScrollView

Question

使用自动布局实现水平滚动的UIScrollView

iosobjective-cuiscrollviewautolayout

3

我已经尝试了相当长一段时间，并查看了许多SO上的帖子和一些视频教程。我想创建一个水平滚动视图，其中包含一些按钮，就像这样：

我的视图层次结构如下：

- 视图控制器 - 视图 - 滚动视图 - 视图 - 按钮

我已将顶部、前导、跟随和底部约束设置为滚动视图。我已将其宽度设置等于其父视图的宽度，并将其高度设置为200。到目前为止还不错，对于滚动视图内部的视图，我已将其前导、跟随、顶部和底部约束与其父视图即滚动视图的零点对齐。我将其宽度设置为视图控制器的视图，因为这是SO上模糊宽度问题的解决方案。它解决了该问题。现在我添加了所有按钮并设置了它们相对于其父视图的约束。现在，当我运行应用程序时，出现了如上所述的屏幕截图，但我无法滚动到最后一个元素。非常感谢您的帮助。

- Tejas K

1

你需要将ScrollView的Content视图的宽度设置为最后一个按钮的x轴坐标加上最后一个按钮的宽度。 - Gurinder Batth

1

你需要在scrollview中添加一个UIView作为其contentView，因为你需要水平滚动，所以contentView的宽度应该大于scrollview的frame，所以添加一个高度约束与scrollview的高度相同，并将宽度设置为一个大值，比如2000。现在创建一个width constraint的IBOutlet，根据你的内容进行调整。设置完containerView后，在contentView上添加所有按钮而不是在scrollview上添加。根据最后添加的按钮计算containerView的宽度，这样你的scrollview就可以工作了。 - iphonic

@dip：https://github.com/tejaskutal/HorizontalScroll 是GIT存储库的链接，请查看。 - Tejas K

当然，很快我会有时间，但简而言之，您添加了一些不必要的额外约束条件。而且，最重要的是，您错过了将最后一个按钮的尾随约束与内容视图相关联的问题。 - dip

当你有时间的时候就可以。谢谢你的帮助。 - Tejas K

显示剩余6条评论

3个回答

0

@IBOutlet weak var scrollView: UIScrollView!

    @IBOutlet weak var btnBack: UIButton!
    @IBOutlet weak var btnForward: UIButton!

let headerView = UIView()
        headerView.backgroundColor = UIColor.white

        for i in 0..<selectedRestaurant.multipleImages.count {
            let url = selectedRestaurant.multipleImages[i]

            let imgView = UIImageView()
            imgView.frame = CGRect(x: CGFloat(i) * self.view.frame.size.width, y: 0, width: self.view.frame.size.width, height: scrollView.frame.size.height)

            let task = URLSession.shared.dataTask(with: URL(string: url as! String)!, completionHandler: { (data, response, error) in

                if error == nil {
                    if data != nil {
                        imgView.contentMode = UIViewContentMode.scaleAspectFill
                        imgView.image = UIImage(data: data!)
                    }
                }



        })
                scrollView.addSubview(imgView)
scrollView.contentSize = CGSize(width: self.view.frame.size.width * CGFloat(selectedRestaurant.multipleImages.count), height: scrollView.frame.size.height)

在“返回”按钮被点击时编写代码<<<<

let index = Int(scrollView.contentOffset.x/self.view.frame.size.width) - 1
        print("\(index)")
        if index >= 0 {
            scrollView.setContentOffset(CGPoint(x: CGFloat(index) * self.view.frame.size.width, y: 0), animated: true)
        }

在“下一个”按钮被点击时编写代码 >>>>>

let index = Int(scrollView.contentOffset.x/self.view.frame.size.width) + 1
        print("\(index)")
        if index < (selectedRestaurant.multipleImages.count)  {
            scrollView.setContentOffset(CGPoint(x: CGFloat(index) * self.view.frame.size.width, y: 0), animated: true)
        }