启用分页功能的ScrollView中的ImageView居中-Swift

Question

我需要创建一个显示图像序列的分页ScrollView。

我在情节提要的主视图中创建了一个ScrollView，并设置了此约束（以使ScrollView在视图中居中：

Constraint

然后我激活了分页并禁用了“内容布局指南”选项。

接下来，在视图类中，我设置了UIScrollViewDelegate委托，并编写了以下代码来显示3张图像（它们是3个彩色正方形）：

class ViewController: UIViewController, UIScrollViewDelegate {

// Outlet
@IBOutlet weak var scrollview: UIScrollView!


override func viewDidLoad() {
    super.viewDidLoad()

    scrollview.delegate = self;

    let infoArray = ["01", "02", "03"];

    for i in 0..<infoArray.count {
        let imageView = UIImageView();
        imageView.contentMode = .scaleToFill;
        imageView.image = UIImage(named: infoArray[i]);
        let xPos = CGFloat(i) * scrollview.bounds.size.width;
        imageView.frame = CGRect(x: xPos, y: 0, width: scrollview.bounds.size.width, height: scrollview.bounds.size.height);
        imageView.layer.borderWidth = 1;

        scrollview.contentSize.width = scrollview.frame.size.width * CGFloat(i+1);
        scrollview.contentSize.height = scrollview.frame.size.height;

        scrollview.addSubview(imageView);
    }

    scrollview.layer.borderWidth = 1;
}

}

我已设置图像的宽度和高度必须与滚动视图相同。但是这些在模拟器（和我的iPhone 11）中更大，因此显示不正确。我向您展示了3个正方形的顺序：

Page 1

Page 2

Page 3

Page 4

我不明白我哪里错了。为什么3张图像都没有滚动视图的大小？为什么有4页？

感谢您的帮助

Answer 1

我认为您需要在声明imageViews x位置或宽度之前声明滚动视图的框架。

class ViewController: UIViewController, UIScrollViewDelegate {

// Outlet
    @IBOutlet weak var scrollview: UIScrollView!


    override func viewDidLoad() {
        super.viewDidLoad()

        scrollview.frame = view.frame // declared here
        scrollview.delegate = self;

        let infoArray = ["01", "02", "03"];

        for i in 0..<infoArray.count {
            let imageView = UIImageView();
            imageView.contentMode = .scaleToFill;
            imageView.image = UIImage(named: infoArray[i]);
            let xPos = CGFloat(i) * scrollview.bounds.size.width;
            imageView.frame = CGRect(x: xPos, y: 0, width: scrollview.bounds.size.width, height: scrollview.bounds.size.height);
            imageView.layer.borderWidth = 1;

            scrollview.contentSize.width = scrollview.frame.size.width * CGFloat(i+1);
            scrollview.contentSize.height = scrollview.frame.size.height;

            scrollview.addSubview(imageView);
        }

        scrollview.layer.borderWidth = 1;
    }
}

Answer 2

好的，这是您的操作方法：

1. 您的滚动视图在情节提要中创建，并且其布局已设置。确保在尺寸检查器中未选中内容布局指南，并且在属性检查器中检查了页面调度。

2. 将堆栈视图作为子视图添加到滚动视图（这将作为内容视图）。将您的stackView固定到scrollView的所有4个边缘。

3. Set Height and Width等于scrollView的高度和宽度。将“宽度”优先级设置为250。（指示滚动视图将水平滚动）

4. 将stackView设置为水平轴，填充对齐和fillEqually分布。

5. 现在，返回viewDidLoad并在下面添加以下代码。 ScrollViewContentView是stackView，它用作scrollView的contentView。请注意，由于将stackView设置为fillEqually，因此只需设置图像的宽度约束之一。

   scrollViewContentView.addArrangedSubview(image1)
   scrollViewContentView.addArrangedSubview(image2)
   scrollViewContentView.addArrangedSubview(image3)
   
   image1.translatesAutoresizingMaskIntoConstraints = false
   image2.translatesAutoresizingMaskIntoConstraints = false
   image3.translatesAutoresizingMaskIntoConstraints = false
   
   image1.backgroundColor = .blue
   image2.backgroundColor = .yellow
   image3.backgroundColor = .red
   
   image1.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true