viernes, 5 de febrero de 2016

iOS Journey, UI en XCode

Hoy seguiremos con la serie de iOS journey que empecé a principios de año. En el post anterior tratamos un poco la sintaxi de Swift. La conclusión a la que llegué es que el lenguaje no es tan diferente a lo que estoy acostumbrado (C#, javascript, java..). En el siguiente enlace encontrarás un libro gratuito sobre Swift.

Hoy mostraré como trabajar con la UI y moverse un poco por XCode. Crearemos una aplicación vacía, añadiremos una escena, y arrastraremos 4 campos a las vista para ir viendo un poco.

En primer lugar una pequeña guía para moverse por Xcode, estos son los botones que te ayudarán a moverte por las secciones de Xcode que necesitamos ver en este mini tutorial.

Secciones principales de Xcode

Assistant editor: Divide la sección principal de Xcode diseño/código, de modo que muestra el código asociado a la pantalla en la que estamos situados.
Debug console: Muestra/Oculta la consola de depuración en la parte inferior de Xcode.
Project Navigator: Permite ver el arbol con los contenidos del proyecto.
Utility Panel: Muestra/Oculta el panel de utilidades. Dentro del panel de utilidades encontramos varias s


Apartados en Utility Panel

Identity Inspector: (sección superior) Permite modificar propiedades relacionadas con el objeto seleccionado en el story board.
Attribute Inspector: (sección superior) Permite modificar propiedades relacionadas con el objeto seleccionado en el story board.
Size Inspector: (sección superior) Permite modificar propiedades relacionadas con el objeto seleccionado en el story board.
Add File: (sección inferior) Permite añadir archivos al proyecto.
Object Library: (sección inferior) Set de componentes de UI que podemos arrastrar a los story boards.
En el post anterior ya comenté que el desarrollo iOS actual tiende hacía aplicar un pattern MVC. En iOS, tenemos los Story Boards que no dejan de ser un conjunto de escenas que representan el flujo que puede seguir el usuario cuando lanza tu aplicación. Por norma general una aplicación tiene un Story Board, pero podrías tener más de uno si la aplicación lo requiere. Por ejemplo la template de proyecto de XCode de saque viene con dos StoryBoards uno que se activa al ejecutar la aplicación (Launch) y otro para el contenido de la aplicación.

Al situarnos sobre un story board XCode nos muestra un canvas con las escenas. Sobre este editor podremos añadir nuevas escenas, añadir componentes a las escenas, controlar la navegación entre escenas…


Una escena generalmente está compuesta por una vista principal. Para añadir una escena a un Canvas has de pulsar en el botón Utility Panel para desplegar el panel de utilidades, localizar en la parte inferior el botón Object Library y arrastrar un ViewController al canvas (hay más tipos de controladores que ya veremos más adelante).



El siguiente paso será crear una clase que ejercerá el rol de controlador de la vista principal de la nueva escena que hemos creado. Vamos a File -> Add y seleccionamos un archivo de tipo File o CocoaTouchClass y lo editamos para que tenga el siguiente aspecto:
//
//  areaTICViewController.swift
//  iOS.journey
//
//  Created by Carlos Cañizares on 31/1/16.
//  Copyright © 2016 Carlos Cañizares. All rights reserved.
//

import UIKit

class areaTICViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

Para vincular la clase que acabamos de crear a la escena, hemos de situarnos en la escena y abrimos el identity panel. En el campo class informamos el nombre del controller que acabamos de crear.


El siguiente paso será situarnos en la vista y arrastrar desde el Object Library un label mismo… en el momento de arrastrar te pedirá introducir un texto por defecto.

¿Cómo podríamos interactuar con los componentes de la vista desde el controlador? La respuesta es creando un outlet. Siempre que necesitemos interactuar con un componente tendremos que previamente crear un outlet. Crearlo es sencillo, nos situamos en la vista y pulsamos en el botón Assistant Editor.

Esto hará que XCode muestre pantalla divida con la vista y con el código asociado (deberíamos ver el código controller que hemos creado). El siguiente paso es situarnos sobre el label, arrastrar con botón derecho al punto donde queremos definir el outlet en código (normalmente donde estén el resto de variables del controlador) y ya lo tendríamos.


Para modificar el valor del label una vez la vista haya cargado podríamos hacerlo del siguiente modo:

class areaTICViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    @IBOutlet weak var MainLabel: UILabel!

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
        
        MainLabel.text = "iOS Journey"
    }
}

Con esto ya podrías acceder a un objeto de la UI desde el controller. En este caso un label no tiene acciones como por ejemplo un botón… Si arrastramos un botón a la vista y luego repetimos el mismo proceso que hemos realizado para el Outlet veremos que tenemos más opciones en el contextual que aparece… podemos crear un Action que a diferencia del outlet se usa para subscribirnos a una acción del botón desde el controller.

Como prueba de concepto podríamos hacer que al pulsar el botón cambie el texto del label. Hasta aquí habríamos visto como empezar a trabajar con la UI, moverse por XCode y como asociar controladores a las vistas. Hasta aquí el articulo de hoy, recuerda que puedes seguir areaTIC en las principales redes sociales!

No hay comentarios:

Publicar un comentario