Implementación de Navegación y Detalle en iOS con Swift

Segunda parte: Configuración del DetailViewController

Para continuar, necesitamos un nuevo ViewController en el Main Storyboard. Añadimos un UIImageView, tres UILabel y un botón. Cambiamos los nombres de los labels a Title, Year, Artist, etcétera. Posteriormente, creamos un controlador de tipo Cocoa Touch Class llamado DetailViewController, asegurándonos de que herede de UIViewController.

Configuración de la clase y Outlets

• Abrimos el editor en modo doble pestaña y seleccionamos la cuarta pestaña (Identity Inspector).
• En el campo Class, escribimos DetailViewController.
• Mantenemos pulsada la tecla Control y arrastramos los elementos hacia el código para crear los outlets uno a uno.
• Si surge algún error, podemos crear el outlet manualmente, cambiar el nombre y arrastrarlo al elemento correspondiente (puedes usar Command + Shift + K para limpiar el proyecto).

En el método viewDidLoad, asignamos los valores a los labels:

self.songTitle!.text = titleSong... // Repetir para el resto de elementos

Por encima de la función, declaramos las variables necesarias:

var titleSong: String?
var imageSong: UIImage?
// Añadir el resto de variables

Integración del Navigation Controller

En el Main Storyboard, pulsamos el botón + y buscamos Navigation Controller. Este componente trae dos pantallas enlazadas por defecto; eliminamos la segunda pantalla, dejando solo el Navigation Controller, y lo enlazamos al MainTableViewController.

• Desde la jerarquía de pestañas, seleccionamos el Navigation Controller, pulsamos Control y arrastramos hacia la pantalla del listado.
• Seleccionamos Relationship Segue > root view controller.
• La flecha de inicio debe apuntar al Navigation Controller. Tras esto, ejecutamos Command + Shift + K.

Navegación y paso de datos

Repetimos el proceso con el MainTableViewController: pulsamos Control y arrastramos hacia la última pantalla, seleccionando Show. Ajustamos la altura de los componentes y, en la quinta pestaña (Attributes Inspector), cambiamos el título a Songs.

Métodos en MainTableViewController

Añadimos los siguientes métodos encima de heightForRowAt:

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    self.performSegue(withIdentifier: "ViewToDetails", sender: self)
}

Añadimos manualmente la función prepare(for:sender:):

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    let selectedRow = tableView.indexPathForSelectedRow!.row
    let detailVC = segue.destination as! DetailViewController

    detailVC.titleSong = songs[selectedRow].title
    detailVC.year = songs[selectedRow].year
    detailVC.artistSong = songs[selectedRow].singer
    detailVC.imageSong = songs[selectedRow].songImage
}

Finalmente, seleccionamos la flecha que une el Main con el Details y le asignamos el identificador ViewToDetails en el inspector de atributos.