Cómo agregar el mismo espaciado y el mismo ancho para el botón en el diseño automático de iOS

Con iOS 9 y Xcode 7, ahora puede tener el resultado esperado con UIStackView y solo 3 o 4 restricciones de diseño automático.

El siguiente paso a paso utiliza Storyboard.

1. Crea 6 UIButtons y 5 UIView s. Alinéalos horizontalmente. Dale un poco de color a tus puntos de vista.

1. Seleccione todas sus vistas y botones y haga clic en el botón Stack. Tendrá todos sus botones y vistas de colores alineados en un UIStackView.

1. Seleccione su vista de pila, vaya al panel Utilities y seleccione el elemento Attributes Inspector. Allí, haga clic en el botón Distribution y seleccione "Llenar por igual".

1. Por ahora, la altura de la vista de pila depende del tamaño de contenido intrínseco de los botones. Si te parece bien, puedes ir al paso 5. Sin embargo, si es necesario, puede dar a su vista de pila una restricción de altura. Seleccione su vista de pila, haga clic en Pin botón, marque el botón Height, agregue el valor requerido y haga clic en el botón Add 1 Constraint.

Como alternativa, si desea que cada elemento de su vista de pila tenga su altura que coincida con su ancho, seleccione el primer botón de su vista de pila, haga clic en el botón Pin, seleccione Aspect Ratio y haga clic en el botón Add 1 Constraint.

Puede comprobar que su restricción de relación de aspecto es correcta en su Document outline (panel izquierdo) y, si necesita, puede cambiarlo con una restricción diferente en el Attribute inspector (panel derecho).

1. Ahora, es el momento de dar algunas restricciones externas a su vista de pila. Selecciona tu vista de pila. Haga clic en el botón pin, asegúrese de que el botón Constrain to margin no esté seleccionado y establezca las restricciones inicial, final e inferior a cero. Asegúrese de que la restricción inferior esté relacionada con la vista de su controlador de vista. Luego, cambie el botón Update Frames a "Todos los marcos en el contenedor". Ahora puede hacer clic en el botón Add 3 Constraints.

Su vista de pila ahora está configurada.

Observación adicional:

Si no necesita que el ancho de sus vistas de color coincida con el ancho de sus botones, puede construir una vista de pila con solo UIButtons y simplemente agregar espaciado a su vista de pila en Attribute inspector. Sin embargo, tendrá que encontrar una manera de agregar un color de fondo detrás de su vista de pila. Apple afirma al respecto en el UIKit Referencia del marco :

El UIStackView es una subclase de UIView que no es vendedora. No proporcionar cualquier interfaz de usuario propia. En su lugar, solo gestiona el posición y tamaño de sus vistas dispuestas. Como resultado, algunas propiedades (como backgroundColor) no tienen ningún efecto en la vista de pila.

He construido un proyecto Xcode con 4 vistas de pila diferentes:

• uno con vistas coloreadas y confiando en las intrínsecas UIButtonincrustadas tamaño del contenido por su altura,
• uno con vistas coloreadas y con una restricción UIButton "igual ancho y alto",
• uno con vistas coloreadas y con su propia restricción de altura,
• uno sin vistas coloreadas pero con espaciado e incrustado dentro de una vista coloreada.

Puedes encontrar este proyecto en este repositorio de GitHub .

IOS 9 tiene una nueva clase UIKit llamada UIStackView. Es muy útil para apilar vistas horizontal o verticalmente, como desee. Deberías echar un vistazo a este tutorial: Raywenderlich: UIStackView Tutorial

Seleccione todos los botones y en el menú Pin de Xcode

1. Cree una restricción horizontal desde la vista superior izquierda a la vista superior derecha seleccionando la línea roja al vecino más cercano del lado derecho de la vista seleccionada
2. Cree una restricción horizontal desde la vista superior derecha a la vista superior izquierda seleccionando la línea roja al vecino más cercano del lado izquierdo de la vista seleccionada
3. Cree una restricción vertical desde la vista superior seleccionando la línea roja en la parte superior de la vista seleccionada lado vecino más cercano
4. Seleccione la casilla de verificación cerca de Altura, Anchos iguales y haga clic en " Agregue 22 restricciones "