Cómo agregar el espaciado igual y el ancho igual para el button en iOS Diseño automático

Soy nuevo en las restricciones de layout automático en Xcode. Tengo una Vista inferior como UITabBar con 6 UIButtons . Sin restricciones, alineé esos botones con relleno de 5 espacios con cada button y cada button tiene 50 de ancho. Ahora, estoy intentando hacerlo utilizando el layout automático para admitir todos los tamaños de pantalla.

En las restricciones de Storyboard, establezco el ancho igual para 6 botones y hice 60 espacios entre cada uno de los botones. Puse el primer button 0 en espacio inicial y configuré el último button 0 en restricciones de queue.

Quiero los buttons with equal width and flexible spaces entre vistas en todos los tamaños de dispositivo.

¿Alguien puede ayudarme? Buscando la ayuda Gracias por adelantado.

introduzca la descripción de la imagen aquí

verifica esta image e hizo tus restricciones como a continuación …

introduzca la descripción de la imagen aquí

RESULTADO: vista previa en diferentes tamaños

introduzca la descripción de la imagen aquí


Con Stackview (para iOS 9.0 y superior)

introduzca la descripción de la imagen aquí

NOTA: Si tiene que hacer una aplicación para iOS 9 y luego UIStackView es otra opción para usted

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

El siguiente paso a paso usa Storyboard.

  1. Cree 6 UIButton s y 5 UIView s. Alinéelos horizontalmente. Da un poco de color a tus puntos de vista.

introduzca la descripción de la imagen aquí

  1. Seleccione todas sus vistas y botones y click el button Stack . Tendrás todos tus botones y vistas de color alineados en un UIStackView .

introduzca la descripción de la imagen aquí

  1. Seleccione su vista de stack, vaya al panel Utilities y select el elemento Attributes Inspector . Allí, click el button Distribution y select "Rellenar Igualmente".

introduzca la descripción de la imagen aquí

  1. Por ahora, la altura de la vista de stack depende del tamaño de contenido intrínseco de los botones. Si está bien con eso, puede ir al paso 5. Sin embargo, si es necesario, puede darle a la vista de stack una restricción de altura. Seleccione su vista de stack, click el button Pin , verifique el button de Height , agregue el valor requerido y click el button Add 1 Constraint .

introduzca la descripción de la imagen aquí

Como alternativa, si desea que cada elemento de la vista de stack tenga su altura coincidente con su ancho, select el primer button de la vista de stack, click el button Pin , select Aspect Ratio y click el button Add 1 Constraint .

introduzca la descripción de la imagen aquí

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

introduzca la descripción de la imagen aquí

  1. Ahora, es hora de dar algunas restricciones externas a su vista de stack. Seleccione su vista de stack. Haga clic en el button de pin , asegúrese de que el button Constrain to margin no esté seleccionado y establezca las restricciones iniciales, finales y finales en cero. Asegúrese de que la restricción inferior esté relacionada con la vista del controller de vista. Luego, cambie el button Update Frames a "Todos los frameworks en contenedor". Ahora puede hacer clic en el button Add 3 Constraints .

introduzca la descripción de la imagen aquí

Tu vista de stack ahora está configurada.

introduzca la descripción de la imagen aquí

Comentario adicional:

Si no necesita el ancho de vista de color para que coincida con el ancho de los botones, puede crear una vista de stack con solo los UIButtons y simplemente agregar espacio en la vista de stack en el Attribute inspector . Sin embargo, deberá encontrar la forma de agregar un color de background detrás de la vista de stack. Apple dice al respecto en la reference de la estructura de UIKit :

UIStackView es una subclass no perteneciente a UIView. No proporciona ninguna interfaz de usuario propia. En cambio, solo gestiona la position y el tamaño de las vistas dispuestas. Como resultado, algunas properties (como backgroundColor) no tienen ningún efecto en la vista de stack.


He creado un proyecto Xcode con 4 vistas de stack diferentes:

  • una con vistas coloreadas y confiando en el tamaño de contenido intrínseco del UIButton integrado para su altura,
  • una con vistas coloreadas y con una UIButton "ancho y alto" en el UIButton ,
  • una con vistas coloreadas y con su propia restricción de altura,
  • uno sin vistas de colors pero con espacios e embedded dentro de una vista de color.

Puede encontrar este proyecto en este repository GitHub .

iOS 9 tiene una nueva class UIKit llamada UIStackView. Es muy útil en el astackmiento de vistas horizontal o vertical, de la forma que desee. Debe consultar este tutorial: Raywenderlich: UIStackView Tutorial

Seleccione todos los botones y en el menu Pin de Xcode

  1. Cree una restricción horizontal desde la vista superior izquierda hasta la vista superior derecha seleccionando la línea roja en el vecino más cercano al lado derecho de la vista seleccionada
  2. Cree una restricción horizontal desde la vista superior derecha hasta la vista superior izquierda seleccionando la línea roja en el vecino más cercano a la izquierda de la vista seleccionada
  3. Cree una restricción vertical desde la vista superior seleccionando la línea roja en el vecino más cercano de la parte superior seleccionada
  4. Seleccione la checkbox cerca de Altura, Ancho igual y click " Agregar 22 Restricciones "