如何将UIScrollView设置为水平滚动？附现有Swift实现代码

嘿，我来帮你把这个UIScrollView改成水平滚动的！看你现在的代码是垂直排列两行两列的图片，要改成水平排列其实只需要调整几个关键地方：

1. 重构子视图的约束逻辑 #

原来的代码是按两行两列垂直排列，现在要改成水平一行排列，得去掉上下排列的判断，统一让所有图片垂直方向对齐scrollView，水平方向依次衔接：

• 所有图片的垂直方向要么对齐scrollView的top和bottom，要么直接设置高度等于scrollView的高度
• 水平方向：第一个图片对齐scrollView的leading，后续每个图片的leading对齐前一个图片的trailing
• 删掉原来的isLeft、previousLeft、previousRight这些垂直排列的逻辑

2. 修改contentSize的计算逻辑 #

原来的contentSize是固定宽度、计算高度，现在要反过来：固定高度为scrollView的高度，计算总宽度为所有图片宽度之和

修改后的完整代码 #

import UIKit

class fastoClass: UIViewController {

    @IBOutlet weak var scrollHorizont: UIScrollView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewDidAppear(_ animated: Bool) {
        var constraints = [NSLayoutConstraint]()
        var i = 0
        var previousImageView: UIView? = nil // 记录前一个图片视图，用于水平排列
        let imageWidth: CGFloat = self.scrollHorizont.frame.size.width / 2.0 // 保留你原来的每个图片宽度为scrollView的一半
        let imageHeight: CGFloat = self.scrollHorizont.frame.size.height // 图片高度匹配scrollView高度
        let imageColors = [UIColor.green, UIColor.lightGray, UIColor.blue, UIColor.red]

        for color in imageColors{
            let newImage = UIImageView()
            newImage.backgroundColor = color
            newImage.translatesAutoresizingMaskIntoConstraints = false

            // 垂直约束：top对齐scrollView顶部，高度和scrollView一致
            let top = NSLayoutConstraint(item: newImage, attribute: .top, relatedBy: .equal, toItem: scrollHorizont, attribute: .top, multiplier: 1.0, constant: 0)
            let height = NSLayoutConstraint(item: newImage, attribute: .height, relatedBy: .equal, toItem: scrollHorizont, attribute: .height, multiplier: 1.0, constant: 0)

            // 水平约束：第一个图对齐scrollView左边缘，后续图衔接前一个图的右边缘
            let leading: NSLayoutConstraint
            if i == 0 {
                leading = NSLayoutConstraint(item: newImage, attribute: .leading, relatedBy: .equal, toItem: scrollHorizont, attribute: .leading, multiplier: 1.0, constant: 0)
            } else {
                leading = NSLayoutConstraint(item: newImage, attribute: .leading, relatedBy: .equal, toItem: previousImageView, attribute: .trailing, multiplier: 1.0, constant: 0)
            }

            // 宽度约束：沿用你原来的半宽设置
            let width = NSLayoutConstraint(item: newImage, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: imageWidth)

            constraints.append(top)
            constraints.append(leading)
            constraints.append(width)
            constraints.append(height)

            self.scrollHorizont.addSubview(newImage)
            previousImageView = newImage // 更新前一个视图为当前图片
            i += 1
        }

        self.scrollHorizont.addConstraints(constraints)
        self.scrollHorizont.layoutSubviews()

        // 计算水平滚动所需的contentSize：总宽度=单图宽度×数量，高度固定为scrollView高度
        let contentWidth: CGFloat = imageWidth * CGFloat(imageColors.count)
        self.scrollHorizont.contentSize = CGSize(width: contentWidth, height: self.scrollHorizont.frame.size.height)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

额外小提示 #

如果你想让每个图片的宽度等于scrollView的宽度（也就是每次滚动显示一张完整图片），只需要把imageWidth的赋值改成self.scrollHorizont.frame.size.width就可以了。

内容的提问来源于stack exchange，提问作者Enrique Espinosa