Categories
Swift Development

100 Días de Swift Día 16 a 18

“Of all our inventions for mass communication, pictures still speak the most universally understood language.”

Walt Disney

«De todas nuestros inventos de comunicación masiva, las imágenes siguen siendo el lenguaje universal mas entendido»

Walt Disney

Storm View Project 1, part one

Listado archivos del main Bundle

Obtener archivos del main bundle (contenedor principal de nuestra aplicación )

let fm = FileManager.default
        let path = Bundle.main.resourcePath!
        let items = try! fm.contentsOfDirectory(atPath: path)
        
        for item in items {
            if item.hasPrefix("nssl"){
                // esta es una imagen
                pictures.append(item)
            }
        }
        print(pictures)

Creando una interfaz

Crear una tabla usando UITableViewController

Así que primero debemos modificar nuestro ViewController cambiando la clase

class ViewController: UITableViewController {

Después añadir un TableViewController en nuestro story board

Ahora debemos indicarle a Xcode que este TableViewController y el de nuestro ViewController son el mismo.

Así que en el inspector de identidad seleccionamos nuestro ViewController como la clase

Ahora debemos decirle a Xcode que muestre nuestro TableViewController al iniciar la app para eso ahora elegimos el inspector de atributos y en la sección View Controller seleccionamos is inital View Controler

Ahora en el Document Outline buscamos nuestra celda dentro de la tabla del TableViewController y en el inspector de atributos le cambiamos el nombre del Identifier por Picture y el estilo Basic

Ahora lo que hacemos es ir al menu de Editor y seleccionamos Embed in -> Navigation controller

Ahora en nuestro ViewController crearemos un método que le diga Swift cuantas celdas tiene nuestra tabla

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return pictures.count
    }

Ahora creamos nuestras celdas

 override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        //crear la celda, usamos el que asignmos en el storyvoard
        //reusamos la celda
        let cell = tableView.dequeueReusableCell(withIdentifier: "Picture", for: indexPath)
        
        //le damos un texto a nuestra celda con el nombre de nuestras imagenes
        cell.textLabel?.text = pictures[indexPath.row]
        return cell
    }

Project 1, part two

Añadiendo una vista de detalles para nuestras imágenes

Para crear la vista a detalle creamos un nuevo archivo de tipo Cocoa Touch Class ademas del nombre hay que suministrar que subclase es, UIViewController en este caso

Ahora añadimos desde la biblioteca un nuevo View Controller lo ponemos a la derecha de nuestra tabla

Ahora hay que añadirle su identificacion en el inspector donde dice Storyboard ID

y en la clase como DetailViewController

Así es como nuestra interfaz de usuario queda conectada con nuestro código

Ahora añadimos UIImageView desde la biblioteca y la arrastramos a nuestro View Controller y la extendemos para que llene la pantalla

Ahora debemos añadir las constraints para que la imagen se vea bien en todos los dispositivos.

hay varias formas de hacerlo, una es en menu editor >  Resolve Auto Layout Issues > Reset To Suggested Constraints.

Ahora para conectar nuestra UIImageView a nuestro código en DetailViewController seleccionamos la UIImageView en el Storyboard y presionamos ctrl en el teclado.

Una line azul aparecerá así que ahora arrastramos hasta la linea donde queremos conectar nuestra imagen y nos aparecerá un globo

Ahora seleccionamos Strong y el nombre imageView

Creemos ahora una propiedad en DetailViewController para guardar el nombre de la imagen

var selectedImage : String?

Para que la vista de la imagen cambie al la imagen que la vamos a pasar usamos este código

if let imageToLoad = selectedImage {
            //cargar la imagen en el storyboard
            imageView.image = UIImage(named: imageToLoad)
        }

Ahora de vuelta en nuestro View Controller crearemos una función para cuando alguien toque una celda de la tabla

 //acciones al seleccionar la celda

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        //buscamos en nuestro story board nuestro detail view
        if let vc = storyboard?.instantiateViewController(withIdentifier: "Detail") as? DetailViewController {
            //en el detailview asignamos el nombre de la imagen segun la celda seleccionada
            vc.selectedImage = pictures[indexPath.row]
            //en el navigation controller empujamos la nueva vista 
            navigationController?.pushViewController(vc, animated: true)
        }
        
    }

Básicamente lo que este código hace es obtener el index de la celda, buscar el nombre de la imagen en el array y pasarlo a DetailView, luego muestra la vista de DetailView y mostrarla

Afinando los detalles finales

Ocultar la barra de navegación

Primero para hacer que nuestra imagen rellene la pantalla podemos cambiar como se muestra, para vamos al storyboard seleccionamos la Image View y en inspector de atributos seleccionamos en la sección View cómo queremos que nuestra imagen rellena la vista.

Ahora regresando a DetailViewController también podemos añadir la opción de que la barra de navegación se oculte al tocar la imagen para que veamos mejor nuestra imagen.

 
    // ocultar barra de navegacion en toque
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        navigationController?.hidesBarsOnTap = true
    }
    
    // mostrar barra de navegacion en toque
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillAppear(animated)
        navigationController?.hidesBarsOnTap = false
    }

Ahora para Mostar la flechita en nuestras celdas en el storyboard buscamos nuestro ViewController > TableViewController > Picture y en el inspector de atributos le añadimos un accesorio a la celda

Añadir un titulo

Añadir un titulo es tan fácilmente es como añadirlo bajo super.viewDidLoad()

 title = selectedImage

Ahora si queremos usar títulos grandes en nuestras apps debemos definirlo bajo el titulo en ViewController

 title = "Tormentas ⛈"
        navigationController?.navigationBar.prefersLargeTitles = true

Ahora como no queremos este estilo en nuestro DetailViewController también hay que especificarlo para evitar la herencia

title = selectedImage
navigationItem.largeTitleDisplayMode = .never

y bueno ahí esta no es gran cosa pero es trabajo Honesto

Referencias

https://www.hackingwithswift.com/100

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

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

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

Próximos Días

Deja un comentario

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