“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 = selectedImageAhora si queremos usar títulos grandes en nuestras apps debemos definirlo bajo el titulo en ViewController
title = "Tormentas ⛈"
navigationController?.navigationBar.prefersLargeTitles = trueAhora 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