Su primera aplicación WatchKit Interfaz de usuario

La semana pasada, Apple anunció la fecha de lanzamiento de Apple Watch. La compañía también lanzó Xcode 6.2, que incluye soporte para Apple Watch. Con Xcode 6.2, tiene todo lo que necesita para crear su primera aplicación para Apple Watch.

Con la fecha de lanzamiento de Apple Watch programada para abril, es hora de aprender sobre el desarrollo de Apple Watch. En este tutorial, creará su primera aplicación WatchKit. A lo largo del camino, se familiarizará con el funcionamiento interno de una aplicación WatchKit y descubrirá que existen muchas similitudes con el desarrollo de iOS..

Prerrequisitos

Debido a que este tutorial se centra en el desarrollo de Apple Watch, asumo que ya está familiarizado con los conceptos básicos del desarrollo de iOS. Si no sabe qué acciones y puntos de venta son, por ejemplo, le recomiendo que primero tome nuestro curso introductorio sobre desarrollo de iOS.

Para seguir adelante, necesita tener Xcode 6.2 o superior instalado en su máquina de desarrollo. Puede descargar Xcode desde el Centro de desarrollo de iOS o la Mac App Store. Como mencioné anteriormente, Xcode 6.2 incluye soporte para Apple Watch. Sin Xcode 6.2, no podrás seguirlo.

En este tutorial, usaré Swift como lenguaje de programación. Si no está familiarizado con Swift, entonces tiene dos opciones. Su primera opción es seguir con Objective-C. Puede crear aplicaciones de Apple Watch con Swift y Objective-C, o una combinación de las dos. Su segunda opción es detenerse aquí y leer mi serie en Swift o ver el curso de Derek Jensen sobre el desarrollo de Swift.

1. Introducción

Quizás se esté preguntando cuál es la diferencia entre una aplicación Apple Watch y una aplicación WatchKit. El año pasado, Apple anunció que habrá dos generaciones de aplicaciones Apple Watch, aplicaciones WatchKit y aplicaciones nativas Apple Watch. El termino nativo es un poco engañoso ya que las aplicaciones WatchKit también son aplicaciones nativas. La principal diferencia es la arquitectura de la aplicación. Veamos primero las aplicaciones nativas.

Aplicaciones nativas

Apple no nos ha dicho mucho acerca de las aplicaciones nativas todavía. La compañía solo anunció que las aplicaciones nativas llegarán a Apple Watch en el otoño de este año. No está claro cómo se verá el SDK y qué podrán hacer los desarrolladores con una aplicación nativa de Apple Watch. En otras palabras, no tenemos más remedio que centrarnos en las aplicaciones WatchKit por el momento.

Dicho esto, según la información de Apple, la principal diferencia será que las aplicaciones nativas podrán ejecutarse sin una extensión que se ejecute en un iPhone emparejado. Desde un punto de vista arquitectónico, la aplicación nativa se asemejará a las aplicaciones nativas de iOS en iPhone y iPad.

Aplicaciones de WatchKit

Como su nombre lo indica, una aplicación WatchKit se basa completamente en el marco WatchKit para hacer su trabajo. El marco WatchKit es una solución ingeniosa que cierra la brecha entre el Apple Watch y un iPhone emparejado.

Si bien la idea es simple, la implementación no lo es tanto. La aplicación WatchKit se ejecuta en el Apple Watch y está a cargo de dos cosas:

  • presentando la interfaz de usuario
  • respondiendo a la interacción del usuario

La lógica de negocios y el trabajo pesado están a cargo de una extensión de Apple Watch que se ejecuta en un iPhone emparejado. El siguiente diagrama visualiza el papel del marco WatchKit.

Cualquier evento desencadenado por el usuario que interactúa con la aplicación WatchKit se reenvía a la extensión que se ejecuta en el iPhone emparejado. Esto implica que la aplicación WatchKit no sirve de nada sin un iPhone emparejado. Simplemente no puede hacer su trabajo sin la extensión que se ejecuta en un iPhone.

2. Configuración del proyecto

Con esto en mente, es hora de crear su primera aplicación WatchKit. La aplicación que estamos a punto de crear le mostrará al usuario las condiciones climáticas de varios lugares del planeta. Es el equivalente de la aplicación del tiempo en iOS..

Paso 1: Crear proyecto

Inicia Xcode y selecciona Nuevo> Proyecto ... desde el Expediente menú. Selecciona el Solicitud de vista única plantilla de la lista de iOS> Aplicación plantillas. Quizás se esté preguntando por qué no estamos creando una aplicación WatchKit. Una aplicación WatchKit siempre es parte de una aplicación iOS. Esto se aclarará una vez que hayamos agregado la aplicación WatchKit al proyecto.

Nombra tu aplicación Gota de agua, conjunto Idioma Rápido, y DispositivosiPhone. Asegurarse Utilizar datos básicos está sin marcar.

Dile a Xcode dónde te gustaría guardar los archivos del proyecto y pulsa Crear. Tenga en cuenta que hemos creado un proyecto Xcode de vainilla para una aplicación iOS de vista única. Si construyes y ejecutas el Gota de agua objetivo en el simulador de iOS, verá una vista en blanco. Esto es lo que esperamos de una aplicación iOS basada en el Solicitud de vista única modelo.

Antes de continuar, eche un vistazo a la estructura del proyecto en el Navegador de proyectos y la lista de objetivos. Actualmente tenemos dos objetivos., Gota de agua, para la aplicación iOS y RainDropTests, para las pruebas de la Gota de agua objetivo. Añadamos una aplicación WatchKit a la mezcla..

Paso 2: Crear objetivos de WatchKit

Seleccionar Nuevo> Objetivo ... de Xcode's Expediente menú y elegir Aplicación WatchKit desde el iOS> Apple Watch sección a la izquierda.

Para el propósito de este tutorial, desmarque Incluir escena de notificaciónIncluir escena de Glance. No cubriremos notificaciones y miradas en este tutorial. Golpear Terminar en la esquina inferior derecha para agregar la aplicación WatchKit a su proyecto Xcode.

Cuando haces clic Terminar, Xcode creará una serie de archivos, grupos y objetivos. Xcode también creará un esquema para ejecutar la aplicación WatchKit en el simulador de iOS y le preguntará si debería activar ese esquema. Hacer clic Activar para activarlo.

3. Anatomía del proyecto.

Al agregar una aplicación WatchKit a nuestro proyecto, Xcode ha creado dos objetivos para nosotros, uno para la extensión WatchKit, Extensión RainDrop WatchKit, y uno para la aplicación WatchKit, Aplicación RainDrop WatchKit.

La extensión WatchKit se ejecutará en el iPhone emparejado con el Apple Watch. Está a cargo de la lógica de negocios de la aplicación WatchKit. La aplicación WatchKit se ejecutará en el Apple Watch y será responsable de presentar la interfaz de usuario y manejar los eventos..

Para mantener todo limpio y ordenado, Xcode ha creado dos grupos para nosotros en el Navegador de proyectos. El primer grupo, Extensión RainDrop WatchKit, contiene los archivos de origen y los recursos para la extensión WatchKit. El segundo grupo, Gota de agua Aplicación WatchKit, Contiene los activos para la aplicación WatchKit..

La arquitectura subyacente de una aplicación WatchKit es evidente en función del contenido de estos grupos. los Gota de agua Aplicación WatchKit grupo, por ejemplo, no contiene ningún archivo de origen. Solo incluye un guión gráfico y elementos para la interfaz de usuario de la aplicación WatchKit. los Gota de agua Extensión de WatchKit contiene un archivo fuente, InterfaceController.swift, pero no incluye un storyboard. Esto tiene sentido si recuerda que la extensión está a cargo de la lógica empresarial de la aplicación WatchKit, mientras que la aplicación WatchKit es responsable de la interfaz de usuario..

Apple utiliza el término aplicación para varios conceptos. Es importante que entienda que una aplicación WatchKit consta de dos partes, una extensión WatchKit que se ejecuta en un iPhone emparejado y una aplicación WatchKit que se ejecuta en el Apple Watch. Una aplicación WatchKit no puede hacer su trabajo sin su extensión. Esa es la clave para entender la arquitectura de una aplicación WatchKit..

4. Construir y ejecutar

Antes de que construyamos y ejecutemos la aplicación WatchKit, es útil entender qué sucederá cuando golpees Comando-R. Cuando Xcode haya terminado de construir la aplicación iOS, la extensión WatchKit y la aplicación WatchKit, instalará la aplicación iOS, la extensión WatchKit y la aplicación WatchKit en el simulador de iOS. A continuación, ejecutará la extensión WatchKit y la aplicación WatchKit en el simulador de iOS..

Si no está familiarizado con las extensiones, entonces se estará preguntando por qué instala la aplicación iOS en el simulador de iOS. Una extensión siempre está asociada con una aplicación de iOS, por lo que se requiere la aplicación de iOS para que se ejecute la extensión WatchKit. En la misma línea, una aplicación WatchKit solo puede ejecutarse en un Apple Watch si su contraparte, la extensión WatchKit, se ejecuta en un iPhone emparejado con el Apple Watch. Es una arquitectura bastante compleja si está acostumbrado a desarrollar aplicaciones de iOS independientes..

Cuando presionas Comando-R en su teclado o haga clic en el correr En la parte superior izquierda, Xcode construirá y ejecutará su aplicación WatchKit en el simulador de iOS. Si la aplicación WatchKit no se inicia, compruebe que está utilizando el esquema correcto.

Ejecutar la aplicación WatchKit no es muy espectacular ya que solo ves una pantalla negra con la hora actual en la parte superior derecha. Hagamos que la interfaz de usuario de nuestra aplicación WatchKit sea un poco más interesante..

5. Crear la interfaz de usuario

Ya que estás leyendo este tutorial, asumo que estás familiarizado con el desarrollo de iOS. Como usted sabe, el desarrollo moderno de iOS involucra Auto Layout y guiones gráficos. Esto es solo parcialmente cierto para el desarrollo de WatchKit. Ya descubrimos que una aplicación WatchKit usa un guión gráfico para su interfaz de usuario. Auto Layout, sin embargo, está ausente.

Abierto Interface.storyboard en el Aplicación RainDrop WatchKit grupo para descubrir cómo construir una interfaz de usuario para nuestra aplicación WatchKit.

El guión gráfico contiene una sola escena, la Controlador de interfaz de escena. En el Navegador de escenas, a la derecha de la Navegador de proyectos, puedes ver que el Controlador de interfaz de escena incluye un Controlador de interfaz y una indicación de que esta escena es el punto de entrada principal de nuestra aplicación WatchKit.

Qué es un controlador de interfaz?

Las dos preguntas que probablemente te estás preguntando son "¿Qué es un controlador de interfaz?" y "¿En qué se diferencia de un controlador de vista?" Un controlador de interfaz es una instancia de WKInterfaceController clase o una subclase de los mismos. los WKInterfaceController La clase se define en el framework WatchKit..

El nombre de esta clase alude a las diferencias con UIViewController. Como usted sabe, un controlador de vista controla una vista o jerarquía de vistas. Sin embargo, un controlador de interfaz no controla una vista, sino que controla una interfaz, es decir, una pantalla llena de contenido. Lo que esto significa se aclarará una vez que comencemos a implementar el controlador de interfaz.

Un controlador de interfaz sigue siendo un verdadero controlador porque controla el comportamiento de la interfaz de usuario. Con un controlador de interfaz, puede configurar la interfaz de usuario de su aplicación WatchKit y responder a los eventos que la aplicación WatchKit reenvía a la extensión WatchKit. Cómo funciona esto se aclarará más adelante en este tutorial.

Creando un diseño

El sistema de diseño que WatchKit nos proporciona es primitivo en comparación con la potencia y flexibilidad del diseño automático. El sistema de diseño recuerda a las páginas web con HTML y CSS.

Uno de los bloques de construcción del sistema de diseño WatchKit es el WKInterfaceGroup clase. Una instancia de esta clase no es más que un contenedor que puede contener otros elementos de la interfaz, como etiquetas, tablas, etc. Puede compararla con una

Elemento en una página web. Proporciona estructura y determina el diseño junto con otros grupos del diseño..

Desde el Biblioteca de objetos a la derecha, agregue dos grupos al controlador de interfaz como se muestra a continuación.

¿Notaste que los grupos encajan automáticamente en su lugar? El sistema de diseño se comporta de manera muy diferente al diseño automático. Otro detalle importante es que el contenedor del controlador de interfaz también es un grupo, no una vista. Esto significa que usted agregó los grupos a otro grupo. Esto está bien ya que los grupos se pueden anidar, lo que permite a los desarrolladores crear diseños bastante complejos para sus aplicaciones WatchKit.

Añadiendo elementos de interfaz

Añadir una etiqueta de la Biblioteca de objetos Al grupo superior y ver qué pasa. El tamaño del grupo disminuye para ajustarse al tamaño de la etiqueta. El contorno de un grupo vacío no es más que un marcador de posición. Un grupo siempre ajustará su tamaño al de sus contenidos..

Seleccione la etiqueta y abra el Inspector de identidad a la derecha. Tenga en cuenta que la etiqueta que agregó es de tipo WKInterfaceLabel, no UILabel. A pesar de que las aplicaciones WatchKit pueden tener muchos elementos de interfaz de usuario que se parecen a los que se encuentran en las aplicaciones de iOS, son diferentes. los WKInterfaceLabel clase, por ejemplo, hereda de WKInterfaceObject en lugar de Vista y UIResponder.

Con la etiqueta seleccionada, abra el Inspector de atributos a la derecha. Debajo tamaño, establecer ancho a Relativo al contenedor Para hacerla tan ancha como la pantalla del Apple Watch. Cambia la fuente a Titular para que se destaque un poco más y cambie el texto de la etiqueta Cupertino. Observe que no puede cambiar la familia de fuentes ni puede ajustar manualmente el tamaño de la fuente.

Ya que nuestra aplicación WatchKit mostrará las condiciones climáticas de varios lugares del planeta, también debemos agregar una etiqueta para la temperatura. También sería bueno saber la fecha y hora local de la ubicación.

Agregue una segunda etiqueta al grupo superior arrastrando una etiqueta en el Navegador de escenas. Espere. Eso no está bien. Has agregado una etiqueta al grupo correcto, pero no se muestra en la interfaz.

Por defecto, un grupo tiene un horizontal diseño. Puedes verificar esto abriendo el Inspector de atributos e inspeccionando su Diseño propiedad. Esto significa que los elementos de interfaz que contiene están dispuestos horizontalmente. La etiqueta de temperatura está presente en el grupo, pero no está visible en este momento. Cambiar el grupo de Diseño propiedad a Vertical para resolver el problema.

Agrega un Fecha Elemento de interfaz al segundo grupo. Los elementos de la interfaz de fecha son instancias de WKInterfaceDate clase. Este elemento de interfaz contiene una etiqueta y es perfecto para mostrar y formatear fechas. Comience por cambiar el ancho del elemento a Relativo al contenedor y la alineación del texto de la etiqueta a la derecha alineada.

No hay necesidad de usar el NSDateFormatter Clase para dar formato a las fechas. los WKInterfaceDate La clase maneja el formato de fecha para nosotros. Cambiar el Formato del WKInterfaceDate instancia a Personalizado y establece el formato en M / d, h: mm a. La interfaz de usuario ahora debería verse así.

Cree y ejecute la aplicación WatchKit en el simulador de iOS para ver lo que tenemos hasta ahora. La aplicación no es muy útil en este momento ya que estamos trabajando con contenido estático. Arreglaremos esto en el siguiente tutorial..

Conclusión

Hemos cubierto los conceptos básicos del desarrollo de la aplicación WatchKit en este tutorial. Estoy seguro de que está de acuerdo en que el desarrollo de aplicaciones de WatchKit resulta familiar y extraño. Podemos usar las herramientas a las que estamos acostumbrados, pero hay una serie de diferencias clave con las que tomará tiempo sentirse cómodo. En la segunda parte de este tutorial, nos centraremos en la extensión WatchKit para buscar datos meteorológicos y mostrar esos datos en la aplicación WatchKit..