ios - por - espacio fantasma iphone

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

Question

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 relleno con cada uno de los botones y cada uno tiene 50 anchos. Ahora, estoy tratando de hacerlo mediante el diseño automático para admitir todos los tamaños de pantalla.

En las restricciones del guión gráfico, establezco el mismo ancho para 6 botones e hice 60 espacios entre cada botón. Puse el primer botón 0 en el espacio inicial y configuré el último botón 0 para limitar las restricciones.

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

¿Puede alguien por favor ayudarme? Buscando la ayuda. Gracias por adelantado.

Answer 1

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 s y 5 UIView s. Alinéelos horizontalmente. Dale algo de color a tus vistas.

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

3. Seleccione la vista de pila, vaya al panel Utilities y seleccione el elemento Attributes Inspector . Allí, haga clic en el botón Distribution y seleccione "Rellenar de igual forma".

4. Por ahora, la altura de su vista de pila se basa en el tamaño del contenido intrínseco de sus botones. Si le parece bien, puede 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 el botón Pin , 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 igual al 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 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).

5. Ahora es el momento de dar algunas restricciones externas a su vista de pila. Seleccione su vista de pila. Haga clic en el botón de pin , asegúrese de que el botón 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 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 .

Tu vista de pila ahora está configurada.

Observación adicional:

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

El UIStackView es una subclase no generada de UIView. No proporciona ninguna interfaz de usuario propia. En su lugar, 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 pila.

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

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

Puedes encontrar este proyecto en este repositorio de GitHub .

Answer 2

Revisa esta imagen e hiciste tus restricciones como abajo ...

RESULTADO: - vista previa en diferentes tamaños

Con Stackview (para iOS 9.0 y superior)

NOTA: Si tiene que crear una aplicación para iOS 9 y posterior, UIStackView es otra opción para usted.

Answer 3

Selecciona 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 más cercano al 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 lado más cercano al lado izquierdo de la vista seleccionada
3. Cree una restricción vertical desde la vista superior seleccionando la línea roja al lado más cercano del lado más cercano de la vista seleccionada
4. Seleccione la casilla de verificación cerca de Altura, Anchos iguales y haga clic en " Agregar 22 restricciones "

Answer 4

iOS 9 tiene una nueva clase de UIKit llamada UIStackView. Es muy útil para apilar vistas horizontal o verticalmente, de la manera que desee. Deberías revisar este tutorial: Raywenderlich: UIStackView Tutorial