Continuamos con la serie sobre WatchKit, en esta ocasión conociendo los diferentes elementos de interfaz y como conectarlos con nuestro código.
Introducción
En este artículo aprenderemos los diferentes elementos que nos ofrece Apple para crear la interfaz de nuestras apps para Apple Watch, y veremos como crear conexiones entre código e interfaz, y sus diferencias con respecto a esta misma práctica con apps de iOS.
Elementos de interfaz
En el ejemplo anterior veíamos algunos de los elementos y controles que podemos utilizar en nuestra interfaz, pero hay muchos más.
Os enumeramos algunos de los más básicos a continuación:
- Image: que nos permite incluir imagenes en nuestra interfaz
- Separator: que nos va a servir para establecer visualmente bloques funcionales en la interfaz
- Button: para permitir al usuario ejecutar acciones desde el Apple Watch
- Switch: para activar y desactivar determinados comportamientos
- Slider: para la selección precisa de valores numéricos entre un rango dado
- Label: para pintar textos en pantalla
- Date: muestra la fecha y hora del sistema
- Timer: permite establecer cuentas atrás que se muestran en pantalla
- Map: para mostrar mapas de MapKit en nuestro Apple Watch
El simulador de Apple Watch
Dado que cuando estamos escribiendo esto ni siquiera ha salido al mercado el Apple Watch, es fantástico poder contar mientras tanto con un Simulador dentro de Xcode.
Para ejecutar nuestra app en el simulador, bastante con seleccionar el scheme correspondiente y pulsar Build and run.
Como si puede comprobar el interfaz es bien simple, y dentro del simulador unicamente debemos conocer que existe la posibilidad de simular los dos tamaños de Apple Watch que Apple ha anunciado. Para ello basta con dirigirnos al menú Hardware / External displays.
El tamaño importa
Aunque ya hemos visto anteriormente de forma breve como gestionar el tamaño de los elementos que forman nuestra interfaz, en este apartado vamos a entrar en mas detalle al respecto. En WatchKit es posible especificar el tamaño de un elemento de tres formas diferentes:
- Size to fit: que lo que hará será ajustar el tamaño del componente para ocupar el máximo espacio disponible en el contenedor en el que se encuentra ubicado jerarquicamente. En este caso no hay ningún parámetro que indicar en la configuración.
- Fixed size: que nos permite especificar un tamaño concreto para una dimensión en puntos. El parámetro a configurar es el número de puntos para el ancho o alto indicado.
- Relative to container: que permite que especifiquemos el tamaño de nuestros elementos con respecto al contenedor que los contiene. En este caso podemos especificar no solo el porcentaje (en valor decimal, es decir 50% es igual a 0,5), sino que tambien podemos establecer un ajuste adiccional, para por ejemplo hacer que algo sea de un ancho correspondiente al 25% de su contenedor menos 5 puntos por ejemplo.
Estas configuraciones pueden definirse tanto para la propiedad width como height.
Conectando los elementos de interfaz con el código
Al igual que haríamos en una app normal para iOS, en WatchKit tambien utilizaremos Outlets y Actions para comunicar elementos con el código.
Los Outlets como ya sabréis asocian el elemento de interfaz en cuestión con un objeto, cuyos valores podemos consultar o modificar desde el código de nuestra app.
Las Actions nos permiten establecer bloques de código que se ejecutarán cuando el usaurio interactúe con un determinado elemento accionable de la interfaz, como por ejemplo al pulsar un botón o cambiar el valor de un switch.
En el caso de las apps con WatchKit, cuando utilizamos Outlets y Actions lo mas curioso es que nos permiten conectar el código de la extensión que corre en nuestro iPhone con la interfaz que se muestra en nuestro Apple Watch.
Vamos a hacer un pequeño ejemplo donde con un UILabel y un UIButton pongamos en práctica estos sencillos pero necesarios conceptos.
En primer lugar, eliminamos del interfaz de nuestra app todos los elementos que utilizamos anteriormente para probar los tamaños y alineaciones y creamos un UILabel con el texto “0” en la parte superior y un botón inmediamente debajo con el texto “Calcula número”.
Una vez hecho esto, y teniendo seleccionado el View Controller, pulsaremos en el botón de Assitant Editor (el que tiene dos círculos en su icono) en la parte superior derecha de la pantalla.
Pulsando sobre el UILabel, y dejando pulsado la tecla Ctrl, arrastraremos y soltaremos sobre el código. Pondremos “etiqueta” de nombre a dicho IBOutlet. A continuación haremos exactamente lo mismo con el botón, solo que al soltar sobre el código, elegiremos la opción “Action” en el desplegable “Connection”.
Como se puede ver, se generan automáticamente dos pequeños fragmentos de código. El primero de ellos, crea una propiedad denominada etiqueta que nos permitirá interactuar con el UILabel que hemos incluido en nuestro interfaz.
|
1 2 3 |
@IBOutlet weak var etiqueta: WKInterfaceLabel! |
El segundo bloque de código es un método que se ha generado al configurar la conexión como Action, donde podemos incluir la lógica que queremos que se ejecute al pulsar dicho botón.
|
1 2 3 4 5 |
@IBAction func numeroAleatorio() { } |
Como veíamos anteriormente es bastante curioso comprobar que el interfaz incluido en nuestro archivo Interface.storyboard que correrá en nuestro Apple Watch, esta ejecutando código del archivo InterfaceController.swift que correrá en nuestro iPhone.
Vamos ahora a incluir un código que haga simplemente que cuando se pulse el botón se genere un número aleatorio entre el 1 y el 1000, y se incluya como texto para el UILabel.
|
1 2 3 4 5 6 7 8 |
@IBAction func numeroAleatorio() { let aleatorio = Int(arc4random_uniform(1000)) self.etiqueta.setText("\(aleatorio)") } |
La generación del número aleatorio la haremos utilizando la función arc4random_uniform al igual que haríamos en Objective-C.
Por otro lado, habréis observado otro ligero cambio frente al uso de UILabel, ya que en este caso es un WKInterfaceLabel lo que estamos utilizando, y para poder manipular su propiedad text unicamente podemos hacerlo a través de los métodos setText y setAttributedText. No es posible utilizar etiqueta.text como haríamos en el caso de un UILabel.
Conclusión
WatchKit, junto con Swift nos abren un nuevo universo de posibilidades, que tenéis a vuestro alcance con muy poquito esfuerzo. En el siguiente artículo hablaremos de la navegación entre diferentes Interface Controllers, algo que seguro necesitaréis para cualquier proyecto que queráis comenzar para Apple Watch.
Swift
Si os hacéis un lío con el código Swift de este artículo, es porque aún no conocéis nuestro Curso Swift en español.
Podéis aprovecharos de nuestro nuevo precio con un descuento del 50% en la siguiente dirección:
https://www.udemy.com/swift-en-espanol/?couponCode=WATCHKIT
¡Disfrutarlo y nos vemos en el siguiente artículo!
