在启用分页的 ScrollView 中居中 ImageView - Swift

Question

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

我在 Storyboard 的主视图中创建了一个 ScrollView 并设置了这个约束（使 ScrollView 在视图中居中）：

Constraint

然后我激活了分页并禁用了 "Content layout guides" 选项。

接下来，在视图 class 中，我设置了 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;
}

}

我已经设置了图片必须和scrollview有相同的宽度和高度。但是这些在模拟器中更大（在我的 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

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

您的滚动视图已在情节提要中创建并设置了布局。确保在大小检查器中取消选中内容布局指南，并在属性检查器中检查分页。
将堆栈视图作为子视图添加到您的滚动视图（这将充当内容视图）。将 stackView 固定到 scrollView 的所有 4 个边缘。
设置高度和宽度等于滚动视图的高度和宽度。将宽度优先级设置为 250。（表示滚动视图将水平滚动）
设置stackView为横轴，填充对齐，fillEqually分布

现在，返回到 viewDidLoad 并在下面添加以下代码。 ScrollViewContentView 是作为 scrollView 的 contentView 的 stackView。请注意，由于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

在启用分页的 ScrollView 中居中 ImageView - Swift

Center ImageView in ScrollView with paging enabled - Swift

paging

scrollview

imageview

swift