Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Adaptive Design

Una introducción al diseño adaptable

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by CYC (you can also view the original English article)

Apple ha estado presionando a los desarrolladores para que creen aplicaciones universales de iOS desde hace algún tiempo. En la WWDC 12, Auto Layout se lanzó para iOS y se siguieron las mejoras para iOS 7. Y ahora con iOS 8, se ha introducido el diseño adaptable, que incluye varias API nuevas y avances de Interface Builder para promover el desarrollo de binarios universales.

En este tutorial, veremos qué significa exactamente el diseño adaptable y cómo usar algunos de sus conceptos. Al final del tutorial, podrás utilizar el diseño adaptable para crear aplicaciones universales con un flujo de trabajo intuitivo. Utilizaremos las nuevas clases de tamaño para crear una aplicación ficticia para una tienda de informática que funcione en todos los dispositivos.

1. ¿Qué es el diseño adaptable?

El diseño adaptable abarca varias ideas y técnicas nuevas en lugar de ser solo una API singular. Algunos componentes del diseño adaptable incluyen colecciones de rasgos, clases de tamaño, fuentes adaptables, diseño automático y más. En esencia, el diseño adaptable existe para ayudar a los desarrolladores a crear aplicaciones universales y localizadas fácilmente.

Si has estado desarrollando aplicaciones para iOS durante varios años, probablemente te hayas dado cuenta de primera mano de por qué el diseño adaptable puede ser útil. Las máscaras Autoreizing se deshacen rápidamente, hacer un seguimiento de las orientaciones puede ser tedioso, y el desarrollo de diferentes rutas de código basadas en el tipo de dispositivo no es escalable. El diseño adaptable tiene como objetivo abordar todos estos problemas.

Ahora que hemos identificado qué es el diseño adaptable y por qué deberíamos usarlo, descarga el proyecto de muestra para comenzar.

2. Clases de tamaño

Las clases de tamaño son la característica de marquesina del diseño adaptable. Su uso te permite eliminar el código y la lógica que abordan múltiples tamaños de pantalla, orientaciones o dispositivos específicos. También hace que sea fácil tener una sola interfaz para todos los dispositivos disponibles.

Hay dos tipos de clases de tamaño, compacto y regular. Cada clase de tamaño puede representarse horizontal y verticalmente, y cada dispositivo tiene asignada una clase de tamaño para ambas orientaciones. Un tamaño regular representa una cantidad "grande" de bienes inmuebles de pantalla, como en un iPad. También se incluyen paradigmas de interfaz que proporcionan la ilusión de un exceso de espacio, como las vistas de desplazamiento en un iPhone.

Por otro lado, un tamaño de pantalla "compacto" denota una menor cantidad de espacio disponible. Los iPhones o iPod Touch generalmente entran en esta categoría. Sin embargo, eso no es una regla. Por ejemplo, el iPhone 6 Plus admite la clase de tamaño normal de forma horizontal. La siguiente tabla enumera los dispositivos iOS y sus respectivas clases de tamaño:


Verticalmente Horizontalmente
Retrato de iPhone Regular Compacto
Paisaje de iPhone Compacto Compacto
Paisaje de iPhone 6 Plus Compacto Regular
Retrato de iPhone Regular Regular
Paisaje de iPad Regular Regular

Paso 1: elegir una clase de tamaño en el generador de interfaz

Abre Main.storyboard dentro del proyecto. Notarás que el lienzo tiene forma de rectángulo. Aunque discordante al principio, esto muestra un componente central del diseño adaptable. Mirando hacia la parte inferior del constructor de interfaz, verás un botón que dice wAny hAny.

Esto significa Cualquier Ancho, Cualquier Altura, lo que indica que cualquier cambio en la interfaz de usuario se aplica a todas las clases de tamaño. Si haces clic en el botón, aparece una cuadrícula que te permite alternar entre diferentes clases de tamaño:

En el ejemplo anterior, Ancho compacto | Altura Compacta se selecciona hay un punto verde en la cuadrícula azul.  El punto verde muestra qué clases de tamaño están representadas. En este caso, los cambios solo se aplican a iPhones de 3,5, 4 y 4,7 pulgadas en horizontal.

Ten en cuenta que hay una pequeña diferencia en la redacción, ya que Interface Builder usa los términos ancho y alto, mientras que las clases de tamaño usan los términos horizontal y vertical. El ancho corresponde a la horizontal y la altura corresponde a la vertical.

Si cambiaste la clase de tamaño seleccionada actualmente, asegúrate de volver a Anchura Cualquier | Cualquier altura.

Paso 2: agregar una imagen

Arrastra una vista de imagen en el lienzo del controlador de vista desde la Biblioteca de objetos. Con el Inspector de tamaño, establezca su posición X en 0 puntos y su posición Y en 72 puntos. Establece el ancho a 600 puntos y la altura a 218 puntos. Abra el Inspector de Atributos y cambie el modo de la vista al ajuste de aspecto y la imagen a "Laptop". Tu lienzo debería verse como la imagen a continuación:

Paso 3: Agregar una etiqueta

Abra la Biblioteca de objetos una vez más y arrastre una etiqueta al lienzo. Abre el Inspector de tamaño y establece la posición X de la etiqueta en 16 puntos y su posición Y en 312 puntos. Para el tamaño, establece su ancho en 568 puntos y su altura en 242 puntos.

En el Inspector de atributos, realiza los siguientes cambios:

  • establecer texto para "Laptop plateado"
  • cambiar el tamaño de la fuente al sistema 100.0 puntos
  • establecer la alineación al centro
  • establecer Líneas a 0

Paso 4: agregar restricciones

Ahora agregaremos restricciones para la etiqueta y la vista de la imagen. En la parte inferior de Interface Builder, haz clic en Restablecer a restricciones sugeridas en la sección Todas las vistas en View Controller. Si la opción está atenuada, asegúrate de seleccionar una de las vistas en el lienzo.

Como la vista de la imagen tiene el mismo fondo blanco que la vista que lo contiene, cambiaremos el color de fondo de la vista para que sea fácil diferenciar entre los dos. Selecciona Vista en el contorno del documento y cambia el color de fondo a Color de fondo de la Vista de tabla de grupo.

Paso 5: compilar y ejecutar

En la parte superior de Xcode, selecciona iPad Retina para usar con iOS Simulator. Crea y ejecuta la aplicación presionando Comando + R. La aplicación parece estar bien para el iPad, pero queremos asegurarnos de que se muestre correctamente en todos los dispositivos.

3. Vista previa en vivo

Crear y ejecutar tu aplicación solo para ver cómo se comporta tu interfaz de usuario puede ser una tarea tediosa. Afortunadamente, Xcode 6 ha agregado la capacidad de obtener una representación en vivo de tu interfaz de usuario en cualquier dispositivo con cualquier orientación. Esto nos ayuda a resolver cualquier problema de diseño automático mucho más rápido que ejecutar la aplicación en el simulador de iOS en todo momento.

Paso 1: Habilitar el Asistente de previsualización

En la parte superior de Xcode, haz clic en el botón del Editor Asistente.

Esto divide el editor de Xcode en dos paneles. En el panel derecho, selecciona Automático> Vista previa> Main.storyboard en la barra de salto.

Paso 2: Agregar dispositivos para vista previa

Interface Builder ahora muestra una vista previa en vivo de la interfaz de usuario en un iPhone de 4 pulgadas. Como era de esperar, la interfaz de usuario no es ideal en el iPhone. Si no ves nada en la vista previa, haz clic en el controlador de vista en el panel izquierdo para actualizarlo.

En el panel derecho, al hacer clic en el botón + en la parte inferior, puedes agregar más dispositivos a la vista previa. Adelanta y agrega el iPad para obtener una vista previa también.

Paso 3: Cambio de orientaciones

Pasa el mouse sobre el iPhone en el editor asistente hacia abajo. A la izquierda del nombre del dispositivo, hay un botón que cambia la orientación actual. Haz clic una vez para cambiar la vista previa del iPhone a la orientación horizontal.

Con la orientación en el paisaje, la interfaz de usuario se ve aún peor. La vista de la imagen no se muestra y el texto de la etiqueta es demasiado grande.

4. Instalación de restricciones específicas de clase de tamaño

Para arreglar la interfaz de usuario, agregaremos algunas restricciones que son específicas para una cierta clase de tamaño. Esta es otra ventaja del diseño adaptable. Podemos decirle a la interfaz de usuario cómo debe presentar sus vistas para ciertas clases de tamaño, utilizando el mismo guión gráfico. Antes, esto generalmente requeriría usar dos guiones gráficos diferentes y cargar el correcto en el tiempo de ejecución.

Paso 1: Agregar restricciones de base de la vista de imagen

Primero agregaremos las restricciones que deberían funcionar para la mayoría de los dispositivos y los refinaremos desde allí. Comienza eliminando las restricciones agregadas anteriormente haciendo clic en cualquier vista en el lienzo y seleccionando Editor> Resolver problemas de diseño automático> Todas las vistas en Controlador de vista - Eliminar restricciones.

Seleccione la vista de la imagen, haga clic en el botón Alinear, elija Centro horizontal en el contenedor y haga clic en Agregar restricción 1.

Abre la restricción que acabamos de agregar en Size Inspector a la derecha y haz doble clic para editarla.

La restricción tiene el centro de la supervista igual al centro de la vista de la imagen, pero queremos lo contrario. Haz clic en Segundo elemento y elije Invertir primer y segundo elemento para corregir el problema.

A continuación, presiona Control y arrastre desde la vista de la imagen hasta Ver dentro del contorno del documento a la izquierda y selecciona Alturas iguales. Selecciona la restricción en Size Inspector y cambia el multiplicador de la restricción a 0.4. Esto obligará a que la altura de la vista de la imagen sea igual a la altura de la supervista o al menos al 40 por ciento de la misma, lo que termine siendo más corto.

A continuación, haz clic en el botón Pin y elije el espaciado superior e inferior al vecino más cercano. Para el espacio inferior, ingresa 18 puntos. El espaciado superior ya debe establecerse en 0 puntos. Asegúrate de que Limitar a los márgenes esté desmarcado, ya que no queremos que se forme relleno alrededor de la vista. Haz clic en Agregar 2 restricciones en la parte inferior para agregar las restricciones.

Haz doble clic en la restricción Espacio Inferior en el Inspector de tamaño para editarlo. Cambia la relación a mayor que o igual. Para finalizar las restricciones de la vista de imagen, controla y arrastra desde la vista de la imagen hasta la etiqueta y elige Igualdad de alturas.

Las restricciones para la vista de imagen deberían verse así:

Paso 2: Agregar restricciones de la base de etiquetas

Debido a las limitaciones añadidas a la vista de imagen, la etiqueta ya tiene su altura y espaciado vertical desde la vista de imagen agregada. Selecciona la etiqueta y haz clic en el botón Pin para agregar una restricción de espaciado vertical, final y vertical, como se muestra en la imagen a continuación.

Si miras una preview de la aplicación ahora en el editor asistente, las restricciones han mejorado mucho las cosas. Sin embargo, todavía hay un problema cuando la aplicación está utilizando la clase de tamaño horizontal compacto como se puedes ver a continuación (centro).

En este caso, sería bueno tener la vista de la imagen y la etiqueta una al lado de la otra en lugar de una encima de la otra.

Paso 3: Agregar restricciones horizontales compactas

Usando el botón de alternar tamaño de clase en la parte inferior, selecciona Altura compacta | Ancho compacto. La barra se convierte en un tono azul para indicar que ahora estás editando la interfaz de usuario para una clase de tamaño específico.

Selecciona la vista de la imagen, abre el Inspector de tamaño y actualiza tu marco como se muestra en la imagen a continuación.

Después selecciona la etiqueta y actualiza tu marco en Inspector de tamaño como se muestra a continuación.

Con la etiqueta aún seleccionada y el Inspector de tamaño abierto, selecciona las restricciones de la etiqueta y elimínalas presionando Eliminar. Puedes seleccionar múltiples restricciones manteniendo presionada la tecla Shift. Esto eliminará las restricciones que hemos agregado hasta ahora, pero solo para esta clase de tamaño.

Haz lo mismo para la vista de imagen seleccionándola, abriendo el Inspector de tamaño, seleccionando sus restricciones y presionando en Eliminar. Ahora podemos agregar restricciones para garantizar que la vista de la imagen y la etiqueta estén colocadas una al lado de la otra.

Afortunadamente, Xcode puede calcular fácilmente estas restricciones para nosotros. Con la vista de imagen o la etiqueta seleccionada, selecciona Editor > Resolver problemas de diseño automático > Todas las vistas en Controlador de vista - Restablecer las restricciones sugeridas.

Paso 5: Vista previa de las restricciones actualizadas

Abre el Inspector de Tamaño para la vista de la imagen. Verás que hay varias restricciones enumeradas, pero algunas están en gris y otras no. Esto indica qué restricciones están activas para la clase de tamaño actual.

Si haces doble clic en cualquiera de ellos, la sección inferior nos muestra para qué clases de tamaño están activas las restricciones. La imagen a continuación muestra que la restricción está instalada para Ancho compacto | Altura compacta e inhabilitada para Ancho normal | Altura regular Al hacer clic en el botón x o +, se habilita o deshabilita la restricción para la clase de tamaño dada.

Abre el editor del asistente de vista previa nuevamente y agrega un iPhone de 3.5 pulgadas en modo horizontal si es todavía no hay uno. Podemos ver que hemos logrado un diseño completamente diferente para ciertos dispositivos en orientación horizontal, todo en un storyboard.

5. Texto dinámico

Lo último a tratar es el tamaño de la fuente. Mientras que los marcos reales de la vista de imagen y la etiqueta funcionan bien, la fuente a veces se puede truncar. El diseño adaptable ha agregado nuevas opciones para que los desarrolladores manejen este tipo de escenario.

Paso 1: Edita la escala de la fuente

Selecciona la etiqueta y abre el Inspector de atributos a la derecha. En Autoshrink, selecciona Escala de fuente mínima y configúralo en 0.4.

Paso 2: Agregar fuentes específicas de clase de tamaño

La edición de la escala de la fuente será suficiente para la mayoría de los casos. En nuestra aplicación, sin embargo, el contenido de la etiqueta es legible para la clase tamaño en Ancho compacto | Altura compacta, pero no es ideal. Si abres el editor del asistente de vista previa, notarás que la "p" en la palabra "Laptop" está en su propia línea.

Con la etiqueta seleccionada, haz clic en el botón + junto a Fuente en el Inspector de atributos. Esto abre un menú para seleccionar una clase de tamaño y aplicar una fuente particular. Elige Ancho compacto | Altura compacta.

Similar a las restricciones específicas de la clase tamaño, se ha agregado una fuente para la clase de tamaño que seleccionamos. Cambia el tamaño de la fuente a 50 puntos. Ahora, abre el editor del asistente de vista previa una vez más y verifica que la fuente se vea perfecta en cada dispositivo.

La capacidad de agregar fuentes adaptables es increíblemente poderosa. La localización de aplicaciones es trivial cuando se puede controlar el tamaño de fuente de forma más precisa con texto dinámico.

6. Otras tecnologías de diseño adaptativo

Si bien las clases de tamaño son ciertamente una característica principal, existen muchas otras API de diseño adaptable y avances que no he tratado en este tutorial. Por ejemplo, los controladores de vista ahora se ajustan al protocolo UITraitEnvironment. Esto significa que los controladores de vista tienen una propiedad traitCollection que realiza un seguimiento de qué clase de tamaño se muestra actualmente.

Si te gusta crear interfaces de usuario en código, la propiedad traitCollection te otorga las mismas capacidades que las clases de tamaño en Interface Builder. Puedes se notificado cuando la clase de tamaño cambie y realice las actualizaciones necesarias a tus restricciones o a la interfaz de usuario.

Otra API útil es UIPopoverController. Si ya has desarrollado una aplicación universal, estoy seguro de que has visto un código como este:

A partir de iOS 8, ya no es necesario verificar en qué dispositivo se ejecuta la aplicación cuando se usa la clase UIPopoverController. La clase UIPopoverController ahora también es compatible con iPhone y iPod Touch.

En cuanto a los assets de imagen, observa que ahora hay un tamaño @3x. Esto se debe a la pantalla Retina HD que se encuentra en el iPhone 6 Plus. Si abres el archivo Images.xcassets en el proyecto, lo verás en cualquiera de los conjuntos de imágenes suministrados.

Conclusión

El diseño adaptable es probablemente el cambio más importante en el desarrollo de iOS en varios años. Antes del diseño adaptable, las aplicaciones universales no se desarrollaban fácilmente y la escalabilidad en tales proyectos podía ser un problema. Esperamos que hayas aprendido lo suficiente de este tutorial para evitar esos problemas e incorporar el diseño adaptable en tus propias aplicaciones.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.