Creando las filas del rompecabezas con 'for'

Clase 33 de 40 • Curso de Swift 2017

Resumen

Ahora veremos cómo crear cada uno de los 16 Tiles, serán 4 filas y 4 columnas. Para que nuestro proyecto sea dinámico debemos definir mejor los tamaños. Empezaremos creando una variable para el ancho del Tile, considerando las dimensiones del board. Ten en cuenta que los Tiles son cuadrados, entonces solo necesitas definir el largo de uno de los lados.

Una vez creado el primer Tile podríamos copiar y pegar varias veces el mismo código, pero vamos a optimizar con un ciclo for que ya aprendimos cómo se hace en clases anteriores. Considera que el código que vas a incluir en el ciclo debes modificarlo con las posiciones dentro del board para que no se creen los Tiles uno encima del otro. En este caso identificaremos el punto central del primer Tile para que el código siga utilizando eso como referencia para crear los siguientes elementos.

En la siguiente clase veremos cómo replicar este proceso para crear las filas.

SEBASTIAN PADUANO

student•

Yo te quería preguntar qué diferencia hay entre usar self. y no usar nada cuando llamas a board.

Diego Forero

Team Platzi•

board esta definido como una variable de la clase, por lo tanto para poder acceder a ella desde algún método de la clase se debe usar la palabra reservada self que hace referencia a esa instancia de la clase.

SEBASTIAN PADUANO

student•

Ya, pero funciona igualmente sin necesidad de llamar self.

Un saludo.

Jonathan Tijerina Olvera

student•

sdfgsdfgds

Eric Eduardo Manzano Leal

student•

cuando intentas adelantarte tu solito U+1F602

Eric Eduardo Manzano Leal

student•

Como me imagino que va a quedar

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var board: UIView!
    var tileWidth : Int = 0
    var tileHeight : Int = 0
    
    var tileCenterX : Int = 0
    var tileCenterY : Int = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let boardWidth = Int(self.board.frame.width)
        self.tileWidth = boardWidth / 4
        
        let boardHeight = Int(self.board.frame.height)
        self.tileHeight = boardHeight / 4
        
        self.tileCenterX = tileWidth / 2
        self.tileCenterY = tileWidth / 2
        
        for _ in 0...3{
            for _ in 0...3{
                
                let tileFrame : CGRect = CGRect(x: 0, y: 0, width: self.tileWidth - 2, height: self.tileWidth - 2)
                let tile : UILabel = UILabel(frame: tileFrame)
                tile.backgroundColor = UIColor.red
                
                tile.center = CGPoint(x: self.tileCenterX, y: self.tileCenterY)
                self.board.addSubview(tile)
                self.tileCenterX = self.tileCenterX + self.tileWidth

            }
            
            self.tileCenterX = tileWidth / 2
            self.tileCenterY = self.tileCenterY + self.tileWidth

        }
        
    }



}

David Barreto

student•

Excelente explicación del profesor, lo felicito!

Edgar Ivan Vazquez Camargo

student•

Otra posible solución para dibujar toda la cuadricula

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        let boardWidth = Int(self.board.frame.width)
        self.tileWidth = boardWidth / 4
        
        for i in 0..<4 {
            let x = i * self.tileWidth
            for j in 0..<4 {
                let y = j * self.tileWidth
                let tileFrame : CGRect = CGRect(x: x, y: y, width: self.tileWidth, height: self.tileWidth)
                let tile : UILabel = UILabel(frame: tileFrame)
                tile.backgroundColor = UIColor.red
                tile.layer.borderColor = UIColor.blue.cgColor
                tile.layer.borderWidth = 1.0
                self.board.addSubview(tile)
            }
        }
        
    }```

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var board: UIView!
    var tileWidth : Int = 0
    var tileHeight : Int = 0
    
    var tileCenterX : Int = 0
    var tileCenterY : Int = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let boardWidth = Int(self.board.frame.width)
        self.tileWidth = boardWidth / 4
        
        let boardHeight = Int(self.board.frame.height)
        self.tileHeight = boardHeight / 4
        
        self.tileCenterX = tileWidth / 2
        self.tileCenterY = tileWidth / 2
        
        for _ in 0...3{
            for _ in 0...3{
                
                let tileFrame : CGRect = CGRect(x: 0, y: 0, width: self.tileWidth - 2, height: self.tileWidth - 2)
                let tile : UILabel = UILabel(frame: tileFrame)
                tile.backgroundColor = UIColor.red
                
                tile.center = CGPoint(x: self.tileCenterX, y: self.tileCenterY)
                self.board.addSubview(tile)
                self.tileCenterX = self.tileCenterX + self.tileWidth

            }
            
            self.tileCenterX = tileWidth / 2
            self.tileCenterY = self.tileCenterY + self.tileWidth

        }
        
    }



}

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        let boardWidth = Int(self.board.frame.width)
        self.tileWidth = boardWidth / 4
        
        for i in 0..<4 {
            let x = i * self.tileWidth
            for j in 0..<4 {
                let y = j * self.tileWidth
                let tileFrame : CGRect = CGRect(x: x, y: y, width: self.tileWidth, height: self.tileWidth)
                let tile : UILabel = UILabel(frame: tileFrame)
                tile.backgroundColor = UIColor.red
                tile.layer.borderColor = UIColor.blue.cgColor
                tile.layer.borderWidth = 1.0
                self.board.addSubview(tile)
            }
        }
        
    }```

Creando las filas del rompecabezas con 'for'

¡Espera pronto la actualización de este curso!

¡Nos estamos renovando!

Pre lanzamiento del curso

Nuevo Curso de Swift en Platzi

Introducción al Curso de Swift

Swift playgrounds

Conceptos básicos del lenguaje de Swift

Variables y constantes en Swift

Estructuras de control: if - else en Swift

Estructuras de control: while en Swift

Estructuras de control: for en Swift

Estructuras de control: switch en Swift

Colecciones: arrays en Swift

Colecciones: diccionarios en Swift

Colecciones: sets en Swift

Opcionales y Strings: Introducción, unwrapping and binding

Opcionales y Strings: Strings en Swift

Funciones en Swift

Introducción a las funciones en Swift

Function types en Swift

Introducción y ejemplos de closures

Ejemplo de implementación de closures en Swift

Clases y estructuras en Swift

Enum en Swift

Clases y objetos en Swift

Estructuras en Swift

Herencia en Swift

Polimorfismo en Swift

Extensiones y protocolos en Swift

Extensiones en Swift

Introducción a los protocolos en Swift

Protocol types

Protocol extensions

Genéricos y manejo de errores en Swift

Introducción a los genéricos

Tipos de genéricos

Control de acceso

Manejo de errores

Proyecto del Curso de Swift

Proyecto Platzzel: Un rompecabezas en Swift utilizando Xcode

Implementación del rompecabezas

Creando las filas del rompecabezas con 'for'

Creando las columnas del rompecabezas

Mezclando los tiles

Agregar un botón y capturar el evento touch

Hacer la lógica del juego

Reemplazar textos por imágenes y hacer la animación para el movimiento

Conclusiones del curso

Sesiones en vivo

Lanzamiento del curso