以编程方式自动布局各种尺寸的图像数组答案

【问题标题】：Programmatically auto layout an array of images in various sizes以编程方式自动布局各种尺寸的图像数组
【发布时间】：2018-09-01 07:55:13
【问题描述】：

如果有人听说过，我正在制作一个 2d 益智游戏（网格/棋盘）推箱子，下面是代码。我正在寻找一种显示板（图像数组）的方法。

func makeLevel() {
        var cellImageView: [[UIImageView]] = []
        var floorImageView: [[UIImageView]] = []
        let cellWidth = 35
        let cellHeight = 35

        let x0 = 190 - 4 * cellWidth
        let y0 = 300 - 4 * cellHeight

        let imageForCellMarker: [Character: UIImage] = [
            ".": UIImage(named: "poopgoal30x30")!,
            "#": UIImage(named: "wall30x30")!,
            "$": UIImage(named: "box30x30")!,
            "@": UIImage(named: "cat30x30")!,
            "£": UIImage(named: "box30x30")!,
            "&": UIImage(named: "cat30x30")!,
            ]

        //Floor
        for y in 0..<rows {
            floorImageView.append([])
            for x in 0..<cols {
                let image = UIImage(named: "floor30x30")!
                let frame = CGRect(x: x0 + x * cellWidth, y: y0 + y * cellHeight,         width: cellWidth, height: cellHeight)
                let imageView = UIImageView(frame: frame)
                imageView.image = image
                floorImageView[y].append(imageView)
                view.addSubview(imageView)
            }
        }

        //Level
        for y in 0 ..< rows {
            cellImageView.append([])
            for x in 0 ..< cols {
                let image = imageForCellMarker[gameBoard[y][x]]
                let frame = CGRect(x: x0 + x * cellWidth, y: y0 + y * cellHeight, width: cellWidth, height: cellHeight)
                let imageView = UIImageView(frame: frame)
                imageView.image = image
                cellImageView[y].append(imageView)
                view.addSubview(imageView)
            }
        }
    }

由于板子将在不同的行和列中取决于级别，所以我不能真正将它设置为视图中的恒定位置。因此，有没有哪位好心的 swift 专家会告诉我如何自动布局网格以使其适合所有设备？

【问题讨论】：

您的部分问题将是方向...例如，您希望“地板”图像在 iPhone 上以纵向还是横向显示？或者，更准确地说，在紧凑宽度/常规高度与常规宽度/紧凑高度？您可以使用自动布局管理类似“网格”的功能...但您需要描述/显示您期望的结果。
imgur.com/a/zHLOS 这是目前的样子。但在横向模式下，它只停留在左侧。对于更大的级别，它看起来像这样：imgur.com/a/ao0gm 最终我想要的是无论手机尺寸、纵向还是横向，它都应该保持在中心。
谷歌 snapkit。它有助于以编程方式实现多个设备的自动布局

标签： swift uiimageview autolayout swift4 ios-autolayout

【解决方案1】：

我建议使用自动布局和约束，而不是绝对值...这样可以避免手动计算大小和位置。

要让您的当前代码使您的“游戏区域”居中，您可以更改以下两行：

    let x0 = 190 - 4 * cellWidth
    let y0 = 300 - 4 * cellHeight

to（我假设上面的4 是行数和列数）：

    let x0 = Int(view.frame.size.width) / 2 - cols * cellWidth / 2
    let y0 = Int(view.frame.size.height) / 2 - rows * cellHeight / 2

所以...

cols * cellWidth      // equals the full width of the game area
rows * cellHeight     // equals the full height of the game area

cols * cellWidth / 2    // equals one-half the width of the game area
rows * cellHeight / 2   // equals one-half the height of the game area

Int(view.frame.size.width) / 2   // equals the horizontal center of the view
Int(view.frame.size.height) / 2  // equals the vertical center of the view

要让游戏区域在视图中居中，将起始 X 设置为中心 X - 游戏区域宽度的二分之一，并将起始 Y 设置为中心 Y - 高度的二分之一游戏区。

这将使您的游戏区域居中，无论设备如何。但是，对于较大的设备，它将是整个视图中心的一个小区域......因此您需要根据屏幕/视图的大小计算 cellWidth 和 cellHeight 值。

【讨论】：