Categories
Swift Development

100 Días de Swift Día 19 a 21

Día 19 a 21

Estas son mis notas para el curso https://www.hackingwithswift.com/100

“The world is a book, and those who do not travel read only a page.”

Saint Augustine

«El mundo es un libro, y aquellos que no viajan solo han leído una pagina»

Saint Augustine

Guess the Flag

Project 2, part one

Añadir un Navigation View Controller

En nuestro storyboard tocamos nuestro view controller y luego en Editor menu and choose Embed In > Navigation Controller.

Añadir Botones , desde la librería de objetos

Agregamos 3 botones y luego en el inspector de tamaño (Size Inspector) configuramos el tamaño en 200 x 100

y en la Y podemos ajustar la distancia entre los botones

Ahora para crear nuestras constraints esta ves debemos tocar un botón presionar ctrl y con el puntero seleccionar el area blanca de nuestro view controller

y así podemos seleccionar las constraints que queremos aplicar

Ahora importamos nuestras banderas al folder Assets

Ahora en el inspector de imágenes seleccionamos nuestro botón le quitamos el titulo y le asignamos una imagen.

Ahora repetimos nuestro proceso de constraints pero esta vez del segundo botón al primer y del tercero al segundo.

Ahora para que nuestras reglas se apliquen debemos ir al menu Editor > Resolve Autolayout Iusses > Update Frames

Ahora para conectar nuestros botones a nuestro código, tocamos un botón presionamos ctrl y lo arrastramos sobre nuestro ViewController

Making the basic game work: UIButton and CALayer

Crear un array con las banderas del juego y una variable para jugar el puntaje

class ViewController: UIViewController {
    @IBOutlet var button1: UIButton!
    @IBOutlet var button2: UIButton!
    @IBOutlet var button3: UIButton!
    
    //Aqui iran los nombres de las banderas
    var countries = [String]()
    
    //Aqui el puntaje
    var score = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //cargar los paises
        countries += ["estonia", "france", "germany", "ireland", "italy", "monaco", "nigeria", "poland", "russia", "spain", "uk", "us"]
    }


}

Ahora mostraremos 3 banderas de forma aleatoria

func askQuestion(){
        countries.shuffle()
        
        button1.setImage(UIImage(named: countries[0]), for: .normal)
        
        button2.setImage(UIImage(named: countries[1]), for: .normal)
        
        button3.setImage(UIImage(named: countries[2]), for: .normal)
    }

Ahora para mejorar la vista de nuestras banderas

        //añadir borde a los botones
        button1.layer.borderWidth = 1
        button2.layer.borderWidth = 1
        button3.layer.borderWidth = 1
        
        //añadir cambiar color de borde a los botones
        button1.layer.borderColor = UIColor.lightGray.cgColor
        button2.layer.borderColor = UIColor.lightGray.cgColor
        button3.layer.borderColor = UIColor.lightGray.cgColor

Ahora hay que crear una variable para establecer la respuesta correcta.

    //La respuesta correcta
    var correctAnswer = 0
...
   //elegir una bandera al azar
        correctAnswer = Int.random(in: 0...2)

y mostrar el nombre de esa bandera en el titulo

//Cambiar el titulo de nuestro barra de navegacion
        title = countries[correctAnswer].uppercased()

From outlets to actions: creating an IBAction

Ahora para poder hacer algo cuando se presiona el botón seleccionamos nuestros botones y lo arrastramos hasta un nuevo espacio en nuestro código, seleccionamos esta vez acción y en tipo UIButton

Para los otros botones solo arrastraremos sobre la misma función para que todos funcionen con la misma función

Ahora debemos ir al inspector de atributos y en la sección View ponerles un tag a cada botón, 0 para el primero , 1 para el segundo, 2 para el tercero.

Ahora tenemos que revisar si nuestra respuesta fue correcta y mostrar una alerta

var title: String
        //Determinar si la respuesta fue correcta
        if sender.tag == correctAnswer {
            title = "Correcto"
            score += 1
        } else {
            title = "Incorrecto"
            score -= 1
        }
        
        //Crear una alerta con el titulo de nuestra variable
        let alert = UIAlertController(title: title, message: "Tu puntaje es \(score)", preferredStyle: .alert)
        
        //añadir un boton a nuestra alerta
        alert.addAction(UIAlertAction(title: "Continuar", style: .default, handler: askQuestion))
        
        //finalmente mostramos la alerta
        present(alert, animated: true)
        
        

Hay que actualizar nuestra función askQuestion para que pueda ser utilizada en una alerta

//
//  ViewController.swift
//  Project2
//
//  Created by Francisco Misael Landero Ychante on 08/08/20.
//

import UIKit

class ViewController: UIViewController {
    @IBOutlet var button1: UIButton!
    @IBOutlet var button2: UIButton!
    @IBOutlet var button3: UIButton!
    
    //Aqui iran los nombres de las banderas
    var countries = [String]()
    
    //Aqui el puntaje
    var score = 0
    
    //La respuesta correcta
    var correctAnswer = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //cargar los paises
        countries += ["estonia", "france", "germany", "ireland", "italy", "monaco", "nigeria", "poland", "russia", "spain", "uk", "us"]
        
        //añadir borde a los botones
        button1.layer.borderWidth = 1
        button2.layer.borderWidth = 1
        button3.layer.borderWidth = 1
        
        //añadir cambiar color de borde a los botones
        button1.layer.borderColor = UIColor.lightGray.cgColor
        button2.layer.borderColor = UIColor.lightGray.cgColor
        button3.layer.borderColor = UIColor.lightGray.cgColor
        
        askQuestion(action: nil)
    }
    
    func askQuestion(action: UIAlertAction!){
        //mezclar las banderas
        countries.shuffle()
        
        //elejir una bandera al azar
        correctAnswer = Int.random(in: 0...2)
        
        
        
        button1.setImage(UIImage(named: countries[0]), for: .normal)
        
        button2.setImage(UIImage(named: countries[1]), for: .normal)
        
        button3.setImage(UIImage(named: countries[2]), for: .normal)
        
        
        //Cambiar el titulo de nuestro barra de navegacion
        title = countries[correctAnswer].uppercased()
    }
    
    @IBAction func buttonTap(_ sender: UIButton) {
        
        var title: String
        //Determinar si la respuesta fue correcta
        if sender.tag == correctAnswer {
            title = "Correcto"
            score += 1
        } else {
            title = "Incorrecto"
            score -= 1
        }
        
        //Crear una alerta con el titulo de nuestra variable
        let alert = UIAlertController(title: title, message: "Tu puntaje es \(score)", preferredStyle: .alert)
        
        //añadir un boton a nuestra alerta
        alert.addAction(UIAlertAction(title: "Continuar", style: .default, handler: askQuestion))
        
        //finalmente mostramos la alerta
        present(alert, animated: true)
        
        
    }
    
    
    

}

Así queda nuestra primera version

Referencias

https://www.hackingwithswift.com/100

https://www.hackingwithswift.com/100/19

https://www.hackingwithswift.com/100/20

https://www.hackingwithswift.com/100/21

Próximos Días

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *