Crea una aplicación nativa de Apple Watch para watchOS 2

En este tutorial, aprenderá cómo aprovechar las nuevas API y la funcionalidad de watchOS 2 para crear una aplicación nativa de Apple Watch. Esto incluye elementos de la interfaz del selector, animaciones nativas y controladores de alerta.

Introducción

En WWDC 2015, Apple anunció la primera actualización importante de su plataforma Apple Watch, watchOS 2. Junto con muchas nuevas características y mejoras, el aspecto más importante de esta actualización para los desarrolladores es la capacidad de crear aplicaciones nativas de Apple Watch. Estas aplicaciones nativas se desempeñan mejor y brindan a los desarrolladores acceso a nuevas funciones, como la corona digital, el micrófono y los sensores de estado..

En este tutorial, te mostraré cómo crear una aplicación WatchKit nativa y describiré brevemente algunas de las nuevas API disponibles en watchOS 2. También te mostraré cómo actualizar una aplicación watchOS 1 no nativa existente a una aplicación watchOS 2 nativa..

Este tutorial requiere que esté ejecutando Xcode 7 en una Mac con OS X Yosemite (10.10) o posterior. Este tutorial se basa en los conceptos y las API de WatchKit disponibles en watchOS 1. Si aún no está familiarizado con el marco de WatchKit, comience con uno de nuestros tutoriales de introducción en WatchKit.

1. Configuración del proyecto

Abre Xcode y crea un nuevo proyecto. En Xcode 7, el nuevo asistente de proyecto incluye un watchOS Sección a la izquierda. Elegir la Aplicación iOS con la aplicación WatchKit plantilla de la watchOS> Aplicación sección. Hacer clic Siguiente continuar.

Complete la información como se muestra en la siguiente captura de pantalla. Desmarque las casillas de verificación en la parte inferior, porque no las necesitaremos para este tutorial.

Complete la configuración del proyecto y eche un vistazo a las carpetas que Xcode ha creado para nosotros. Debería ver tres grupos o carpetas en el Navegador de proyectos a la izquierda:

  • los Manifestación carpeta contiene los archivos de origen y los recursos de la aplicación iOS.
  • los Demo WatchKit App La carpeta contiene el guión gráfico y los recursos de la aplicación WatchKit..
  • los Demo WatchKit Extension incluye los archivos de origen y los recursos de la extensión WatchKit, los cerebros de la aplicación WatchKit por así decirlo.

Antes de que podamos comenzar a agregar cualquier cosa, necesitamos configurar Xcode para construir y ejecutar el objetivo correcto. En la parte superior izquierda de su ventana de Xcode, al lado del botón de parada gris, haga clic en el esquema activo, Manifestación, y elige la siguiente opción:

Haga clic en el botón de reproducción para construir y ejecutar su aplicación. En tu dock, deberías ver aparecer dos iconos de simulador. Uno de ellos es el simulador regular de iOS, mientras que el otro es el simulador de reloj de Apple..

Si la pantalla en blanco de su aplicación Apple Watch no aparece automáticamente en el simulador de Apple Watch, complete los siguientes pasos:

1. Navegue a la Reloj de manzana aplicación en el simulador de iOS. Puede encontrar la aplicación Apple Watch en la segunda página de la pantalla de inicio.

2. Haga clic en la Demo.Celda de vista de tabla como se muestra abajo.

3. Habilitar el Mostrar aplicación en Apple Watch cambiar como se muestra abajo.

4. En el simulador de Apple Watch, navegue a la pantalla de inicio presionando Comando + Shift + H o eligiendo Casa desde el Hardware menú del simulador de reloj de Apple.

Si esto no funciona de inmediato, encienda y apague el interruptor del simulador de iOS. También puede ayudar a salir de Xcode y ejecutar la aplicación WatchKit nuevamente..

Si todo funciona correctamente, haga clic en el icono de la aplicación Apple Watch en el simulador de Apple Watch. Debería ver una pantalla negra con la hora en la parte superior derecha.

2. Creando la interfaz de usuario

Es hora de comenzar a usar algunas de las nuevas API introducidas en watchOS 2. En Xcode, abra Interface.storyboard en el Demo WatchKit App carpeta y y agregar los siguientes componentes a la Controlador de interfaz de escena:

  • deslizador
  • recogedor
  • botón

Seleccione el control deslizante y establezca su Máximo Pasos propiedades para en el Inspector de atributos.

Haga doble clic en el botón y cambie su título a "Mostrar alerta". Abre el Editor asistente para que tengas el storyboard a la izquierda y los contenidos de InterfaceController.swift a la derecha. Cree una salida para el control deslizante arrastrando el control del control deslizante en el guión gráfico al Controlador de interfaz clase. Nombra la salida deslizador. Haz lo mismo con el selector y nombra la salida recogedor.

Control y arrastre desde el botón hasta el Controlador de interfaz a la derecha para crear una acción. Nombra la acción showAlertPressed. Esta acción se ejecutará cuando el usuario toque el botón..

Cierra el Editor asistente a la derecha y abierto InterfaceController.swift en el editor de código de Xcode.

El control deslizante y el botón que agregó a la Controlador de interfaz La clase debería ser familiar si has trabajado con el marco WatchKit. El selector, sin embargo, es uno de los nuevos elementos de interfaz disponibles en watchOS 2.

Un selector para Apple Watch está representado por el WKInterfacePicker clase. Funciona de manera similar a su contraparte iOS, UIPickerView. Los usuarios interactúan con un WKInterfacePicker instancia pulsando en él, desplazándose a través de WKPickerItem objetos con la corona digital, y luego toque de nuevo para seleccionar un elemento. UNA WKInterfacePicker Puede mostrar artículos en uno de tres estilos diferentes:

  • Lista: Este estilo muestra los elementos del selector en una lista apilada verticalmente para que el usuario se desplace. Estos artículos tienen un título y una imagen accesoria opcional. Este es el único WKInterfacePicker estilo que admite elementos basados ​​en texto y puede mostrar varios elementos a la vez.
  • Apiladas Este estilo de selector presenta una serie de imágenes como tarjetas animadas verticalmente. A medida que el usuario gira la corona digital, la tarjeta antigua se anima fuera de la pantalla y la nueva tarjeta se anima en la pantalla desde la parte inferior del selector. Los artículos para este estilo solo pueden contener imágenes..
  • Secuencia de imágenes: Este estilo muestra una secuencia de imágenes sin que se animen las transiciones. Al girar la corona, se muestra inmediatamente la imagen siguiente o anterior en la secuencia. Los elementos para este estilo de selector también pueden contener imágenes..

Para este tutorial, va a crear un selector de estilo de lista simple con elementos basados ​​en texto. Agregue el siguiente código a awakeWithContext (_ :) método de la Controlador de interfaz clase:

override func awakeWithContext (context: AnyObject?) super.awakeWithContext (context) var pickerItems: [WKPickerItem] = [] para i en 1 ... 10 let item = WKPickerItem () item.title = "Picker item \ (i)" pickerItems.append (item) self.picker.setItems (pickerItems)

Construye y ejecuta tu aplicación. Verás que los primeros tres elementos del selector son visibles.

Para interactuar con el elemento de la interfaz del selector, haga clic una vez y luego desplace el mouse o el panel táctil de su Mac como lo haría normalmente. Esto simulará la corona digital del reloj. A continuación, podrá desplazarse por los elementos del selector.

3. animacion

Junto con los nuevos elementos de la interfaz y las nuevas formas para que los usuarios interactúen con las aplicaciones Apple Watch, watchOS 2 admite animaciones nativas para los objetos de la interfaz WatchKit. Los siguientes atributos de los elementos de la interfaz se pueden animar en las aplicaciones de watchOS 2:

  • alfa (opacidad)
  • anchura y altura
  • Alineación horizontal y vertical.
  • color de fondo y tinte
  • inserciones de contenido para grupos

La animación se realiza a través de una sola. WKInterfaceController método de instancia, animateWithDuration (_: animaciones :). Como un simple ejemplo, usted va a animar el control deslizante haciéndolo desaparecer y reducirlo hacia la parte superior de la pantalla. Agregue el siguiente código a la se activará método de la Controlador de interfaz clase:

anular func willActivate () super.willActivate () self.animateWithDuration (5) () -> Void in self.slider.setHeight (0) self.slider.setAlpha (0)

Cree y ejecute su aplicación y, una vez que la aplicación haya terminado de ejecutarse, debería ver que el control deslizante se reduce y desaparece lentamente.

En el cierre de la animación, puede animar cualquiera de las propiedades enumeradas anteriormente. Esto se aplica a cualquiera de los elementos de la interfaz en su aplicación. Esto permite otro nivel de personalización en la interfaz de su aplicación y también proporciona una forma mucho más sencilla de ocultar y mostrar elementos..

4. Alertas

watchOS 2 también permite que las aplicaciones presenten una interfaz de alerta muy similar a la de un UIAlertView o UIAlertController en iOS. Estas alertas se muestran llamando al presentAlertControllerWithTitle (_: message: preferredStyle: actions :) método en un WKInterfaceController ejemplo.

Los parámetros de título y mensaje de este método son cadenas que se muestran en la interfaz de la alerta. El tercer parámetro es un WKAlertControllerStyle enumeración

  • Alerta muestra una hoja de alerta con botones apilados y una predeterminada Cancelar botón en la parte inferior.
  • SideBySideButtonsAlert muestra dos botones uno al lado del otro.
  • Hoja de acción muestra uno o dos botones personalizados con una Cancelar botón en la esquina superior izquierda.

El cuarto parámetro es una matriz de WKAlertAction Objetos, que proporcionan detalles para los botones de alerta. Esta matriz debe contener al menos un objeto y para SideBySideButtonsAlert debe contener dos.

UNA WKAlertAction El objeto se crea con un título, estilo (WKAlertActionStyle.DefaultWKAlertActionStyle.Cancel, o WKAlertActionStyle.Destructive) y un bloque a ejecutar cuando se selecciona esa acción. Agregue el siguiente código al botón de showAlertPressed acción:

@IBAction func showAlertPressed () let cancel = WKAlertAction (título: "Cancel", estilo: WKAlertActionStyle.Cancel, handler: () -> Void in) let action = WKAlertAction (title: "Action", estilo: WKAlertActionStyle. Default, handler: () -> Void in) self.presentAlertControllerWithTitle ("Alert", mensaje: "Ejemplo de interfaz de alerta de watchOS 2", preferredStyle: WKAlertControllerStyle.SideBySideButtonsAlert, actions: [cancel, action)))

Construye y ejecuta tu aplicación. Cuando presionas el Mostrar alerta botón, verá una interfaz de alerta animada y mostrará las dos acciones que creó.

5. Actualizando a watchOS 2

Cuando abra un proyecto Xcode existente con una aplicación WatchKit en Xcode 7, aparecerá la siguiente advertencia en la Navegador de problemas a la izquierda:

Al hacer clic en la advertencia, se mostrará una lista de las configuraciones que deben cambiarse en su aplicación para hacer la transición de una aplicación WatchKit existente a watchOS 2. En la parte inferior, verá el siguiente elemento:

Si haces clic Realizar cambios, Xcode actualizará tu aplicación WatchKit existente por ti. Una vez que se completa la actualización, está listo para compilar, probar y enviar una aplicación nativa para watchOS 2.

Conclusión

Las nuevas API y características que aprendió en este tutorial son solo la punta del iceberg. Los elementos de la interfaz del selector, los controladores de alerta y las animaciones nativas son solo algunas de las nuevas características que puede aprovechar en sus aplicaciones Apple Watch en watchOS 2.

Estaremos publicando muchos más tutoriales en Tuts + en los próximos meses, que cubrirán las nuevas funciones y API disponibles en watchOS 2. Asegúrese de buscarlas y no dude en dejar cualquier comentario o pregunta que tenga en los comentarios a continuación..