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

Soy nuevo en las restricciones de diseño automático en Xcode. Tengo una Vista Inferior como UITabBar con 6 UIButtons . Sin restricciones alineé esos botones con 5 espacios de espacio con cada botón y cada botón tiene un ancho de 50. Ahora, estoy tratando de hacerlo utilizando el diseño automático para admitir todos los tamaños de pantalla.

En Storyboard constrains, establezco el mismo ancho para 6 botones e hice 60 espacios entre cada botón. Configuré el primer botón 0 en el espacio inicial y establecí el último botón 0 en restricciones de cola.

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

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

enter image description here

mira esta imagen y haz tus restricciones como a continuación …

enter image description here

RESULTADO: – vista previa en diferentes tamaños

enter image description here


Con Stackview (para iOS 9.0 y superior)

enter image description here

NOTA: si tiene que hacer una aplicación para iOS 9 y posterior, UIStackView es otra opción para usted

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

El siguiente paso a paso usa Storyboard.

  1. Crea 6 UIButton sy 5 UIView s. Alinearlos horizontalmente. Dale un poco de color a tus puntos de vista.

enter image description here

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

enter image description here

  1. Seleccione su vista de stack, vaya al panel Utilities y seleccione el elemento Attributes Inspector . Allí, haga clic en el botón Distribution y seleccione “Llenar de manera equitativa”.

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here

  1. Ahora es el momento de dar algunas restricciones externas a su vista de stack. Seleccione su vista de stack 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 en 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 cuadros en el contenedor”. Ahora puede hacer clic en el botón Add 3 Constraints .

enter image description here

Tu vista de stack ahora está configurada.

enter image description here

Comentario adicional:

Si no necesita el ancho de sus vistas de colores para que coincida con el ancho de sus botones, puede construir una vista de stack con solo UIButtons y simplemente agregar espacio a su vista de stack en el Attribute inspector . Sin embargo, deberá encontrar una forma de agregar un color de fondo detrás de su vista de stack. Apple lo menciona en el UIKit Framework Reference :

UIStackView es una subclase nonrendering de UIView. No proporciona ninguna interfaz de usuario propia. En cambio, solo administra la posición y el tamaño de sus vistas organizadas. Como resultado, algunas propiedades (como backgroundColor) no tienen efecto en la vista de la stack.


Construí un proyecto de Xcode con 4 diferentes vistas de stack:

  • uno con vistas en color y confiando en el tamaño de contenido intrínseco de UIButton incorporado para su altura,
  • uno con vistas en color y con una UIButton “ancho y alto iguales”,
  • uno con vistas de colores y con su propia restricción de altura,
  • uno sin puntos de vista coloreados pero con espacio e incrustado dentro de una vista coloreada.

Puede encontrar este proyecto en este repository de GitHub .

iOS 9 tiene una nueva clase UIKit llamada UIStackView. Es muy útil para acumular vistas horizontal o verticalmente, de la manera que desee. Deberías echarle 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 lado derecho de la vista seleccionada más cercana
  2. Cree una restricción horizontal desde la vista superior derecha a la vista superior izquierda seleccionando la línea roja al lado izquierdo de la vista seleccionada más cercana
  3. Cree una restricción vertical desde la vista superior seleccionando la línea roja al lado más cercano al lado más cercano de la vista seleccionada
  4. Seleccione la checkbox cerca de Altura, Anchos iguales y haga clic en ” Agregar 22 restricciones