Cómo ajustar automáticamente una imagen con diseño automático para su aplicación iOS - Dummies

Porque está seguro de decidir, como todos los buenos desarrolladores de aplicaciones de iOS han decidido y continuarán decidiendo a perpetuidad, que su aplicación necesita funcionar bien en las orientaciones vertical y horizontal, deberá asegurarse de que, al rotar la vista, el carro (subvista) permanezca posicionado en la parte inferior de la pantalla.

Afortunadamente para ti, la mayor parte de ese trabajo se hace por ti: la clase UIViewConroller de la cual derivamos TestDriveController. Lo único que debe hacer es decirle al controlador de visualización exactamente cómo desea que se muevan las cosas cuando la vista cambie de orientación. Puede hacer que se den a conocer tales deseos en el guión gráfico utilizando el inspector de tallas.

Tendrá que seleccionar algunas de las vistas para administrar su autosizing. Para este proceso, asegúrese de que el contorno del documento se muestra a la izquierda del guión gráfico. La razón para esto se vuelve clara si mira el Resumen del documento. Dentro del controlador View - TestDrive, tiene una vista.

Dentro de esa vista, tiene una vista de imagen que contiene la imagen SeeTheUSA del catálogo de activos. La vista de imagen ahora tiene el mismo tamaño que su vista que contiene. Debe poder seleccionar cada uno por separado, por lo que la forma más fácil de hacerlo es en el contorno del documento.

Hay cuatro secciones de la configuración de Tamaño. De arriba a abajo, son

• Métricas: Aquí, en la parte superior del inspector de tallas, establece las coordenadas de ubicación y el tamaño de la vista. La mayoría de las veces, utilizará las herramientas de Interface Builder, pero cuando quiera tamaños específicos y precisos, debe escribirlos aquí.

• Prioridad de aceptación de contenido y resistencia a la compresión de contenido Prioridad: Estas secciones se usan principalmente para ajustar el tamaño de la vista en función de su contenido. Cada uno de estos tiene un control deslizante donde puede ajustar los valores horizontales y verticales. Esta no es una situación de encendido / apagado: en el tiempo de ejecución, los valores se pesan y los valores más altos ganan cuando hay un conflicto. Puedes establecer restricciones que son contradictorias.

  Por ejemplo, es posible que desee colocar una vista en una ubicación determinada según otra vista. Para hacer eso, la vista puede necesitar un cambio de tamaño. En tal caso, una prioridad de abrazo mayor significa que la vista se resistirá al cambio de tamaño a expensas de no cumplir la solicitud de colocarlo a 10 puntos de distancia de otra vista.

  La compresión es el otro lado de la moneda. Si la resistencia a la compresión tiene un valor más alto, se resistirá el redimensionamiento que podría truncar el contenido de la vista.

• Tamaño intrínseco: Esto está configurado por defecto, que es donde lo dejará para diseños básicos. Este es el tamaño natural de la vista que puede cambiar de tamaño o cambiar de forma.

• Restricciones: Estos son el corazón del diseño automático. Usted proporciona restricciones en cuanto a la ubicación de la vista. Estas limitaciones pueden ser contradictorias en algunos casos, pero puede asignar un peso a cada una para indicar qué restricciones son más importantes que otras. En tiempo de ejecución, Auto Layout calcula rápidamente la colección óptima de restricciones que hace tanto como sea posible de lo que desea.

Si no ve la sección Restricciones, el diseño automático puede estar desactivado para su guión gráfico. Para activarlo, seleccione el guión gráfico en el navegador del proyecto y abra el inspector de archivos. La opción Usar diseño automático es una casilla de verificación en la sección Documento de compilador de interfaz.

Para establecer las restricciones, seleccione la vista en el Esquema del documento y elija Editor → Resolver problemas de diseño automático → Restablecer las restricciones sugeridas en el controlador de visualización.

Ahora debería tener las tres restricciones. Los tres tienen la misma estructura básica. El primero especifica el espacio final desde la vista seleccionada (el objeto de la vista superior) a la vista de la imagen. El segundo especifica el espacio principal, y el tercero especifica el espacio inferior.

Puede preguntarse qué es lo que llevan y al final en este contexto. En un guión de izquierda a derecha como inglés, español, francés y similares, el espacio inicial es el espacio entre el borde izquierdo de las dos vistas y el posterior es el espacio entre los bordes derechos.

Para un idioma de derecha a izquierda como el hebreo o el árabe, el espacio principal es el espacio de la derecha y el espacio posterior es el espacio de la izquierda. Los espacios para arriba y para abajo son independientes de la dirección del idioma.

Si selecciona el primero, verá que puede hacer clic en la rueda dentada a la derecha de cada restricción para abrir más detalles. El valor predeterminado es bastante simple: el espacio entre los bordes derechos de la Vista superior y la vista de la imagen es cero puntos. Si explora más, verá que el espaciado inferior es el predeterminado, que también es cero.

Aún no ha terminado de administrar Diseño automático. Seleccione la vista de la imagen y fíjela en la parte inferior de su supervista. Use el Editor → Pin → Espacio inferior para Superview. Esto significa que tendrá el tamaño correcto cuando se gire el dispositivo.

Repita el proceso para la imagen del automóvil. Los valores predeterminados le muestran otro aspecto de las restricciones. Tendrá el espacio inferior predeterminado para supervisar de nuevo, pero tendrá una nueva restricción que alinea el centro de la imagen del automóvil con el centro de la vista de la imagen para la coordenada X (horizontal).

Aunque la aplicación no se ejecutará hasta que ingrese el código. Pero, cuando ingrese ese código, podrá rotar la aplicación en el simulador.

Este proceso es típico de usar Diseño automático. Dibuja tu diseño en la escena del guión gráfico. Algunas restricciones se crearán automáticamente para usted, y puede probar para ver qué sucede. Es posible que necesite modificar las restricciones (como fijar un objeto a una supervista).También puede optar por borrar todas las restricciones y restablecer los valores predeterminados. Otra modificación puede ser necesaria.