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

Question

我正在制作一个 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)
            }
        }
    }

由于板将位于不同的行和列中，具体取决于级别，因此我无法真正将其设置为 View 中的恒定位置。因此，有没有各位敏捷专家可以向我展示如何自动布局网格以使其适合所有设备？

Answer 1

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

要让您的当前代码将您的“游戏区域”居中，您可以更改这两行:

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

到(我假设上面的 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

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

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