Programe automáticamente mediante programación una matriz de imágenes en varios tamaños: swift, uiimageview, autolayout, swift4, ios-autolayout

Estoy haciendo un juego de rompecabezas 2d (cuadrícula / tablero) Sokoban si alguien lo ha escuchado, a continuación se muestra el código. Estoy buscando una forma de mostrar el tablero (variedad de imágenes).

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)
}
}
}

Dado que el tablero va a estar en varias filasy las columnas dependen del nivel, por lo que realmente no puedo establecerlo en una posición constante en la vista. Por lo tanto, ¿hay algún tipo de expertos que me muestren cómo podría diseñar automáticamente la cuadrícula para que se ajuste a todos los dispositivos?

Respuestas

Recomendaría el uso de diseño automático y restricciones, en lugar de valores absolutos ... que evitarían tener que calcular manualmente los tamaños y las posiciones.

Para obtener su corriente código para centrar su "área de juego", puede cambiar estas dos líneas:

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

a (estoy asumiendo el 4 arriba está el número de filas y columnas):

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

Asi que...

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

para que el área de juego se centre en la vista, establezca la X inicial en el centro X - la mitad del ancho del área de juego, y establezca la Y inicial en el centro Y - la mitad de la altura del área de juego .

Esto centrará su área de juego, independientemente del dispositivo. Para dispositivos más grandes, sin embargo, será un área pequeña en el centro de la vista total ... por lo que necesitaría calcular el cellWidth y cellHeight Valores basados ​​en el tamaño de la pantalla / vista.