El marco WatchKit de Apple para desarrollar aplicaciones Apple Watch proporciona varias formas para que usted, como desarrollador, presente diferentes tipos de interfaces a los usuarios de su aplicación. Esto incluye interfaces basadas en páginas, jerárquicas y modales, que pueden usar contextos para crear contenido dinámico.
En este tutorial, le mostraré cómo configurar y manipular cada tipo de interfaz, y para qué casos de uso están diseñados.
Este tutorial requiere que estés ejecutando Xcode 6.2+ y te sientas cómodo con la creación de una aplicación básica de Apple Watch. Si no es así, lea algunos de los otros tutoriales de WatchKit en Tuts + y luego vuelva a este. También deberá descargar el proyecto de inicio de GitHub..
El primer tipo de interfaz que implementará en su aplicación Apple Watch será la basada en páginas. Este tipo de interfaces funcionan de manera muy similar a la pantalla de inicio estándar en un dispositivo iOS para mostrar múltiples páginas de información en un orden establecido. Las interfaces basadas en páginas son las más adecuadas para cuando necesita mostrar varias pantallas de información relacionadas entre sí.
Abra el proyecto de inicio en Xcode y navegue hasta Interface.storyboard. El guión gráfico ya contiene seis controladores de interfaz como puede ver a continuación.
Para crear una interfaz basada en páginas, necesita crear una siguiente páginarelación segue entre los controladores de interfaz que desea vincular. presione el Controlar en su teclado y haga clic y arrastre desde un controlador de interfaz a otro. Controle y arrastre desde el primer controlador de interfaz al segundo y, si se hace correctamente, un Relación segue Aparecerá una ventana emergente. Desde este menú emergente, seleccione siguiente página opción como se muestra a continuación.
Siga estos mismos pasos para vincular el segundo controlador de interfaz al tercero. El guión gráfico debería mostrar ahora los segmentos entre los tres controladores de interfaz principales. Tenga en cuenta que el orden en el que crea estos segmentos determina el orden en que aparecerán las interfaces en su aplicación WatchKit.
Cree y ejecute su aplicación, y abra un Apple Watch como una pantalla externa en el simulador de iOS. Verás que la aplicación muestra el Primera página Controlador de interfaz y tiene tres puntos en la parte inferior, que representan las tres páginas disponibles. Puede deslizar entre las tres páginas deslizando el dedo hacia la izquierda o hacia la derecha, como lo haría en un dispositivo iOS.
Al utilizar una interfaz basada en páginas, puede especificar qué controlador de interfaz desea que aparezca en el inicio. Esto se hace usando el convertido en página actual
método. Abierto SecondPageInterfaceController.swift y agregue la siguiente línea a la awakeWithContext (_ :)
método:
anular func awakeWithContext (context: AnyObject?) super.awakeWithContext (context) self.becomeCurrentPage ()
Construya y ejecute su aplicación nuevamente, y verá que la segunda página ahora se presenta en el lanzamiento.
En el tiempo de ejecución, también puede especificar un orden explícito para mostrar las páginas de su interfaz. Esto se hace usando el reloadRootControllersWithNames (_: contexts :)
método de clase.
El primer parámetro de este método es una matriz de cadenas que contiene los identificadores del guión gráfico de los controladores de interfaz que desea cargar. El orden de los identificadores en esta matriz determina el orden en que aparecen las páginas.
El segundo parámetro es un opcional. Cualquier objeto
Tipo array que contiene los contextos para cada una de las páginas. Aprenderás sobre los contextos más adelante en este tutorial. Por ahora, solo dejará este parámetro como nulo
. Reemplace la línea que acaba de agregar a su awakeWithContext (_ :)
Método con lo siguiente:
override func awakeWithContext (context: AnyObject?) super.awakeWithContext (context) WKInterfaceController.reloadRootControllersWithNames (["Third Page", "First Page"], contextos: nil)
Cree y ejecute su aplicación, y verá que, una vez completada la carga, su aplicación mostrará la tercera página seguida de la primera página..
Además de las interfaces basadas en páginas, también puede implementar interfaces jerárquicas en una aplicación Apple Watch. Hablamos de interfaces jerárquicas cuando se realiza la transición entre controladores de interfaz utilizando un empujar transición.
El comportamiento de una interfaz jerárquica es similar al de la interfaz jerárquica. UINavigationController
clase en una aplicación de iOS. Este tipo de interfaz de Apple Watch es la más adecuada para presentar múltiples interfaces una tras otra de forma lineal.
Volver a visitar Interface.storyboard y arrastre el Punto de entrada principal flecha al Trescate controlador de interfaz como se muestra a continuación. Esto hará que el controlador de interfaz especificado aparezca primero cuando se inicie la aplicación..
A continuación, abrir TransitionInterfaceController.swift y añadir la siguiente línea en el pushButtonPressed
método:
@IBAction func pushButtonPressed () self.pushControllerWithName ("Interfaz jerárquica", contexto: nil)
Similar a reloadRootControllersWithNames (_: contexts :)
Método que usaste anteriormente, el primer parámetro de pushControllerWithName (_: context :)
es el identificador del guión gráfico del controlador de interfaz que desea insertar. El segundo parámetro es el contexto para este nuevo controlador de interfaz..
Construye y ejecuta tu aplicación. Debería ver la siguiente interfaz cuando su aplicación WatchKit haya terminado de iniciarse.
Tocando el Jerárquico El botón debe presionar la siguiente interfaz en la pantalla como se muestra a continuación..
Notará que ahora hay una pequeña flecha en la esquina superior izquierda de la pantalla. Al tocar la flecha volverá a la interfaz anterior. También es posible hacer estallar el controlador de interfaz actual en el código. En el HierarchalInterfaceController
clase, actualiza el popButtonPressed
método de la siguiente manera:
@IBAction func popButtonPressed () self.popController ()
Construye y ejecuta tu aplicación de nuevo. Tocando el Popular El botón ahora debería tener el mismo efecto que presionar la flecha hacia atrás en la parte superior izquierda.
Alternativamente, si desea volver a la primera interfaz en la jerarquía, invoque el popToRootController
método en lugar de la controlador de pop
método. Para su aplicación actual, estos métodos producirían el mismo resultado ya que solo hay dos interfaces en la jerarquía en este momento.
Las interfaces modales funcionan de manera similar a las interfaces jerárquicas. La principal diferencia entre los dos es que las interfaces modales están diseñadas para mostrar interfaces una sobre otra en lugar de hacer una transición entre ellas de una manera lineal.
Regresar a TransitionInterfaceController.swift y añadir la siguiente línea de código a la modalButtonPressed
método:
@IBAction func modalButtonPressed () self.presentControllerWithName ("Interfaz modal", contexto: nil)
Para descartar la interfaz modal, actualice el despedirBotónPrimido
método como sigue en el Control de Interfaz Modal
:
@IBAction func dismissButtonPressed () self.dismissController ()
Construye y ejecuta tu aplicación. Toque en el Modal botón para presentar una interfaz modal.
Una ventaja de las interfaces modales es que puede presentar modalmente una interfaz basada en páginas. Esto se hace usando el presentControllersWithNames (_: contexts :)
método. El primer parámetro es una matriz de identificadores de guión gráfico y el segundo parámetro es una matriz de objetos de contexto. En TransitionInterfaceController.swift, actualizar la implementación de la modalButtonPressed
método de la siguiente manera:
@IBAction func modalButtonPressed () self.presentControllerWithNames (["Modal Interface", "Hierarchal Interface"], contexts: nil)
Ejecuta tu aplicación y toca el Modal botón. Una interfaz basada en páginas debe presentarse de manera modal con las siguientes dos interfaces:
Como se ha visto en los diversos métodos utilizados en este tutorial hasta el momento, al pasar a una nueva interfaz, puede pasar a un contexto para configurar la interfaz que está a punto de ser presentada. El contexto que pase a su nueva interfaz es opcional y puede ser de cualquier tipo de datos (Cualquier objeto?
).
Esto significa que puede pasar cualquier tipo de datos entre interfaces, desde números simples hasta estructuras de datos complejas. El contexto se entrega a la nueva interfaz en el awakeWithContext (_ :)
método. La ventaja de pasar un contexto a un controlador de interfaz es configurar dinámicamente sus contenidos, es decir, en tiempo de ejecución.
Abierto TransitionInterfaceController.swift y actualizar la implementación del modalButtonPressed
método de la siguiente manera:
@IBAction func modalButtonPressed () self.presentControllerWithName ("Interfaz modal", contexto: "Texto personalizado")
En ModalInterfaceController.swift, actualizar la implementación de la awakeWithContext (_ :)
como sigue:
invalide func awakeWithContext (context: AnyObject?) super.awakeWithContext (context) si let text = context as? Cadena button.setTitle (texto)
Utilizamos un enlace opcional para ver si el contexto proporcionado se puede convertir en un Cuerda
. Si puede, fijamos el botón
el título a ese valor.
Crea y ejecuta tu aplicación y abre la interfaz modal. El título del botón debería haber cambiado a Texto personalizado.
Si está interesado en llevar su educación de WatchKit al siguiente nivel, puede echar un vistazo a nuestro curso completo sobre desarrollo de WatchKit.
En este tutorial, aprendió cómo configurar y utilizar los tres tipos de interfaz principales disponibles para las aplicaciones WatchKit, basadas en páginas, jerárquicas y modales. También aprendió a usar contextos de interfaz para configurar los controladores de interfaz en tiempo de ejecución. Ahora también sabe cuándo es mejor usar cada uno de estos tipos de interfaz en sus aplicaciones WatchKit. Puedes leer más sobre la navegación de la interfaz en la documentación de Apple..