Entendiendo el sistema de diseño WatchKit

etiqueta. Puede pensar en un grupo como un contenedor para otros elementos de la interfaz. Un grupo tiene muchas propiedades que puede personalizar directamente en Interface Builder.

Paso 1: Defina el diseño de su aplicación

Es importante planificar el diseño en detalle antes de comenzar el desarrollo. Esto le ahorrará horas y horas de dolores de cabeza si, en algún momento, se da cuenta de que la característica realmente interesante que deseaba construir no es posible o no se ve bien en un dispositivo físico. Asegúrese de haber leído las Directrices de la interfaz humana de Apple Watch.

Para este ejemplo, le enseñaré cómo crear un diseño para una aplicación de hotel en la que pueda encontrar hoteles cerca de su ubicación actual. Diseño la pantalla que mostrará los detalles de un hotel en particular. Como mencioné en la introducción, no escribiré ningún código. En su lugar, me centraré en comprender el mecanismo del nuevo sistema de diseño..

Dejando fuera mis habilidades de dibujo, esto es lo que tengo en mente para mi diseño. los nombre del hotel estará en la parte superior de la pantalla y debajo habrá algunas iconos de estrellas mostrando la calificación del hotel. Entonces quiero añadir un imagen junto con su dirección y dos botones.

Paso 2: Agregar un grupo

Nuestro controlador de interfaz está vacío en este momento y no hay un grupo base. Para agregar nuevos elementos, arrástrelos y suéltelos desde la Biblioteca de objetos a la derecha en el Controlador de interfaz. los Navegador de escenas a la izquierda es útil para comprobar si los elementos están posicionados correctamente. Lo primero que debe hacer es agregar un grupo, que nos permitirá desplazarnos verticalmente si el contenido no se ajusta a la pantalla. Arrastre un grupo desde el Biblioteca de objetos y suéltalo en el Controlador de interfaz Como se muestra abajo.

Ahora que tiene un grupo en su controlador de interfaz, puede ver sus atributos en el Inspector de atributos a la derecha. Veamos algunos de ellos con más detalle..

• Diseño: El diseño determina si los elementos del grupo están dispuestos horizontalmente o verticalmente. Cuando agregue un elemento, se colocará al lado o debajo del anterior..
• Inserciones: Este atributo determina las inserciones superior, inferior, izquierda y derecha del grupo..
• Espaciado: Como su nombre lo indica, determina el espaciado entre los elementos dentro del grupo..
• Fondo: Puede establecer una imagen como fondo del grupo y animarla nombrando las imágenes de forma secuencial.
• Posición: El atributo de posición determina la posición horizontal (izquierda, central, derecha) y vertical (superior, central, inferior) del grupo.
• Tamaño: El atributo de tamaño determina el ancho y la altura del elemento. Hay tres valores, Tamaño para ajustar el contenido (Se ajusta automáticamente en función del contenido), Relativo al contenedor (toma el tamaño del contenedor y lo multiplica por el valor definido), Fijo (valor constante).

Tenga en cuenta que Apple Watch viene en dos tamaños. Debe usar el mismo diseño en ambos casos, pero puede encontrar algunas pequeñas diferencias. Al hacer clic en el icono más a la izquierda de un atributo, puede establecer un atributo que solo se aplicará cuando la aplicación se ejecute en el dispositivo especificado.

Sigamos construyendo nuestro layout. Cambiar el Disposición del grupo a Vertical para que el contenido se desplace verticalmente cuando agrego más elementos. Selecciona el Horizontal posición para Centrar Para que el contenido quede centrado. Finalmente, establece el Anchura atribuir a Ancho relativo al contenedor con el multiplicador puesto a 1. Esto expandirá el grupo para llenar todo el ancho de la pantalla..

Paso 3: Agregar una etiqueta

Ahora que hemos configurado las propiedades principales para nuestro grupo de contenedores, agreguemos una etiqueta al grupo. Desde el Biblioteca de objetos, Agrega una etiqueta al grupo que agregaste hace un momento. Si selecciona la etiqueta, verá cómo su ancho no ocupa todo el espacio disponible. Vamos a arreglar eso cambiando su atributo de ancho a Relativo al contenedor. Para centrar la etiqueta, cambie la Horizontal atribuir a Centrar y establecer Alineación del texto a Centrar.

¿Qué pasa si el nombre del hotel es demasiado largo? Quiero que se expanda y crezca verticalmente. Para hacer eso, cambia el Líneas atributode la etiqueta a 0. Esto significa que el nombre del hotel abarcará varias líneas si es necesario. Cambia el texto de la etiqueta para ver el resultado por ti mismo. El resultado debe verse como la captura de pantalla de abajo.

Paso 4: Añadiendo estrellas

También queremos mostrar la calificación del hotel. La idea es tener un grupo justo debajo del nombre del hotel con el número de estrellas del hotel. Agregue otro grupo al grupo que ya tenemos. En otras palabras, el nuevo grupo está anidado dentro del primer grupo.. 

Quiero que las cinco estrellas estén en la misma línea y centradas. Como mencioné anteriormente, no puedo agregar o eliminar objetos en tiempo de ejecución, pero puedo ocultar y mostrar objetos. Añadiré cinco imágenes al grupo. Si el hotel tiene menos estrellas, las esconderé en tiempo de ejecución..

Arrastre cinco imágenes al grupo anidado y establezca el ancho de cada estrella Relativo al contenedor. Cambia el multiplicador de 1 a 0.2. La razón para elegir 0.2 Como el multiplicador es simple. Si quiero que cinco imágenes se ajusten al espacio disponible en la misma línea, quiero que cada imagen tenga el 20% del ancho del grupo. Cambiar el Horizontal posición para Centrar para que siempre estén centrados, no importa cuántas estrellas haya.

A continuación, asignemos una imagen genial a cada imagen. Puedes encontrar las imágenes que uso en los archivos de origen de este tutorial. Selecciona el Imagen atribuir a star.png y cambia el modo a Ajuste de aspecto Para garantizar que se respeta la relación de aspecto..

El resultado debe ser similar a la imagen animada a continuación. Incluso puedes intentar comprobar el Oculto propiedad de una de las imágenes en el Inspector de atributos Y ver cómo las estrellas están siempre centradas..

Paso 5: Agregando la imagen del hotel

Comience descargando la imagen de ejemplo de un hotel desde freeimages. Quiero agregar una imagen del hotel para mostrar al usuario cómo se ve el hotel. Añadir una nueva imagen de la Biblioteca de objetos Como hiciste antes por las estrellas. Cambiar el Imagen atribuir a la imagen que descargó y establecer la Modo a Ajuste de aspecto.

Cambiar el Horizontal posición para Centrar y el Anchura a Relativo al contenedor. Siempre asegúrese de agregar la imagen como un elemento anidado del grupo principal al verificar la jerarquía de capas en la Navegador de escenas a la izquierda. Conjunto Altura ser Tamaño para ajustar el contenido para cambiar automáticamente el tamaño de la imagen en función de las dimensiones de la imagen.

Paso 6: Agregar la dirección

Debajo de la imagen, me gustaría añadir una etiqueta de dirección. También podríamos agregar un mapa, pero usemos una etiqueta para este ejemplo. Arrastre una etiqueta de la Biblioteca de objetos y posicionarlo debajo de la imagen del hotel. Conjunto Líneas a 0 y Anchura a Relativo al contenedor. Cambia el texto para que sea una dirección aleatoria de tu elección..

Como habrás notado, el controlador de interfaz ahora es más alto. Se redimensiona automáticamente en el guión gráfico para que pueda ver su contenido..

Paso 7: Agregar botones

El controlador de interfaz debe tener dos botones en la parte inferior. Quiero que los botones tengan la mitad del ancho de la pantalla y se coloquen uno al lado del otro. Debido a que nuestro grupo principal tiene un diseño vertical, necesitamos agregar un grupo anidado para que los botones se posicionen horizontalmente en lugar de verticalmente.

Agregue un nuevo grupo como se muestra a continuación y agregue dos botones a él. Establecer su Anchura atribuir a Relativo al contenedor y pon el multiplicador a 0.5. Selecciona el Vertical posición de los dos botones para Centrar para centrarlos verticalmente.

Ajuste el texto del primer botón a "Desde $ 99" y el color de fondo a un bonito rojo. Ajuste el texto del segundo botón a "Ver más" y el color de fondo a azul. El controlador de interfaz ahora debería verse así:

Asegúrate de haber seleccionado el esquema correcto y presiona Comando-R para ejecutar la aplicación WatchKit.

Cuando se abre el simulador de iOS, hay una cosa más que debes hacer. Selecciona el simulador de iOS y elige Hardware> Pantallas externas> Apple Watch 42 mm. El simulador de Apple Watch aparecerá junto a tu simulador de iPhone. Ahora puede ver su diseño de trabajo en acción. Vea el resultado en el video a continuación..

Conclusión

En este tutorial, te mostré las principales características y conceptos para construir diseños complejos en WatchKit. Exploramos la adición y el posicionamiento de elementos de la interfaz de usuario y algunas de las mejores prácticas. Ahora puedes convertir tus ideas de la aplicación Apple Watch en realidad. Espero que disfrutes este tutorial.