spec - iOS 7 Auto Layout Y Position/Height Missing Constraint

html spec

Question

Estoy tratando de diseñar una vista para una aplicación de iPhone iOS 7 usando Xcode 5.1.1. Me estoy enfocando en el puerto de vista de iPhone 4s y 5+. Aquí está mi vista:

El objetivo de esta vista es actuar como el menú principal de la aplicación. ImageView es el logotipo de la aplicación y cada botón es una opción. El problema que tengo es tratar de obtener las restricciones correctas en las vistas para que todo se reduzca en altura desde el iPhone 5 a 4s. No importa qué combinación intente, siempre termino con "Necesito restricciones para: posición Y o altura". en Restricciones faltantes y una altura incorrecta en Vistas mal ubicadas para la imagen y todos los botones.

Si trato de usar "Agregar restricciones faltantes", Xcode hace que la altura de todos los botones sea la misma, con la excepción del último botón. El último botón simplemente se reduce al texto.

¿Qué me estoy perdiendo para que esto funcione correctamente? ¡¡Gracias!!

EDITAR: Basado en la retroalimentación, hice las siguientes restricciones:

Vista de imagen: anclado a Superview superior / inferior / principal / posterior. Altura fijada Espacio inferior al botón amarillo

Todos los botones: Igual altura el uno al otro. En función de las restricciones generadas, parece que todos los otros botones se ven a la altura del botón amarillo.

Botón amarillo: vista superior de espacio a imagen, espacio de seguimiento / avance a Superview, espacio inferior a botón rojo

Botón rojo: espacio superior a botón amarillo, espacio de seguimiento / adelantamiento a Superview, espacio de fondo a botón verde

Botón verde: espacio superior a botón rojo, espacio de seguimiento / avance a supervisión, espacio de fondo a botón marrón

Botón marrón: botón superior de espacio a verde, espacio de seguimiento / líder a supervisión, botón de espacio inferior a botón naranja

Botón naranja: espacio superior a botón marrón, espacio posterior / principal / inferior a vista general

Si hago eso, todo se ve bien en el 4 "en la vista Retina. Si lo cambio a la vista de 3.5" todo se ve bien y funciona bien en el simulador. Si cambio de nuevo a la vista de 4 ", todos los botones, excepto el amarillo, se extraviarán con una altura ligeramente más pequeña:

No estoy seguro de lo que está causando eso. También puedo cargar una copia de mi proyecto Xcode si eso ayuda.

Answer 1

Parece que quieres que la altura de todos los botones sea la misma, también parece que la vista de la imagen también tiene una altura conocida. Esto debería funcionar para usted:

1: Fija todos los elementos a 0 px de la parte superior, izquierda, derecha e inferior de la vista junto a ellos. Para los botones, será el botón arriba y abajo en el eje y, y la supervista en el eje x.
2: especifique una altura para el imageView.
3: comando haga clic y seleccione todos los botones de colores y fijar sus alturas por igual. Editor -> Pin -> Alturas Igualmente.

Como Autolayout sabe dónde comienza la vista de la imagen (0 px desde la parte superior de la supervista) y conoce la altura, sabrá dónde colocar la parte superior del botón amarillo. En la parte inferior, sabe que el botón naranja debe estar fijo en la parte inferior. Lo único que queda para que Autolayout descubra es qué tan alto debe ser cada botón, lo que hará en función de la restricción de igual altura.

Editar - instrucciones más detalladas con captura de pantalla

Para el paso 1, seleccione la vista superior de la imagen y elija editor -> pin -> y luego, de a uno por vez, agregue un encabezado (generalmente a la izquierda en la mayoría de los idiomas), posterior, superior e inferior. Como se ve a continuación, o puede usar el botón en la parte inferior, o puede usar el botón de alfiler (6 de la derecha) en la parte inferior para agregarlos al por mayor. Sugiero usar el botón pin, es más rápido. haga clic en las pequeñas líneas punteadas para seleccionar esa restricción que se agregará.

El paso 3 consiste en anclar las alturas de manera equitativa, de modo que seleccione todas las vistas en color y ancle las alturas iguales. Dado que el elemento superior (Imageview) está pinado en la parte superior y tiene una altura conocida, y la parte inferior está anclada en la parte inferior de la pantalla, el resto de las vistas se convierten en pliegues de un acordeón, estirándose y contrayéndose para llenar el resto del espacio disponible. La restricción de anchos iguales asegura que se ve bien. Sin él, algunas de ellas son soluciones múltiples sobre cuán grande debería ser cada vista, por lo que es probable que termines con algunas pequeñas, grandes y otras que podrían no ser visibles.