¿Cómo creo un diseño complejo para las aplicaciones de Apple Watch?

Como el tamaño de la pantalla del Apple Watch es pequeño, los objetos como etiquetas, imágenes o controles deslizantes dentro de una aplicación se colocan uno debajo del otro. Si bien esta limitación significa que no puede colocar objetos en la ubicación exacta que desea, aún es posible crear un diseño complejo para su aplicación Watch. Sigue leyendo para saber cómo.

Antes de comenzar este tutorial, asegúrate de crear un nuevo proyecto de Xcode y agregarle el objetivo de Apple Watch. Puedes encontrar las instrucciones para esta tarea aquí.

Para crear un diseño complejo para una aplicación, usaremos un objeto de grupo. Un objeto de grupo puede contener otros objetos, y puede colocarlos vertical u horizontalmente.

1. Abra el Interface.storyboard archivo dentro de la aplicación WatchKit objetivo. En el Biblioteca de objetos, buscar Grupo, y arrastre el objeto al guión gráfico en blanco.

Inicialmente, el nuevo grupo estará vacío. Antes de agregar otros elementos al grupo, echemos un vistazo a los atributos disponibles en el Utilidades panel.

2. Un atributo notable para el grupo es su diseño. Por defecto, se establece en Horizontal, lo que significa que los objetos dentro del grupo se colocarán uno junto al otro. Puedes cambiarlo a Vertical si tu quieres.

3. Ahora, es hora de agregar algunos objetos al grupo. En este ejemplo, agregué dos etiquetas al grupo y las coloqué verticalmente. Puede ver que los dos elementos están dentro del grupo mirando el Esquema del documento.

4. Un problema común cuando se utiliza el diseño horizontal en un grupo es que puede haber espacio vacío en ese grupo porque no hay ningún objeto que ocupe el espacio. La solución para esto es seleccionar el objeto, encontrar el atributo de ancho en la sección Tamaño, cambiarlo a Relativo al contenedor y establecer el tamaño deseado.

los El tamaño del contenedor (grupo) es siempre 1., entonces un valor de 0.5 hará que la anchura del objeto seleccionado sea la mitad del tamaño del grupo. En este ejemplo, tengo dos etiquetas. Por lo tanto, un ancho de 0.5 para cada etiqueta hará que cubran todo el grupo.

Dependiendo de cuántos elementos tenga dentro de un grupo, es posible que desee establecer un tamaño diferente.

5. Es posible crear. grupos anidados como el ejemplo de abajo. Cuando desee anidar un grupo, arrástrelo debajo del grupo deseado en el perfil del documento. Como puede ver, es posible crear un diseño complejo para la aplicación incluso con la limitación del SDK. Sin embargo, dado que la pantalla del reloj es pequeña, no se recomienda crear un diseño que sea demasiado complejo porque los usuarios pueden encontrar su aplicación difícil de usar.