Diseño automático de iOS: dos botones de igual ancho, uno al lado del otro


92

Actualmente tengo dificultades con AutoLayout. Estoy usando el generador de interfaces y estoy tratando de colocar dos botones de igual ancho uno al lado del otro, como se ilustra en la siguiente imagen.

diseño objetivo

De la siguiente imagen de vista previa, mi titleImage se ha restringido correctamente y se muestra correctamente, pero los botones no. He experimentado alineando el botón 1 con el borde anterior de titleImage y el botón2 con el borde posterior de titleImage; sin embargo, la distribución del ancho entre los dos botones se sesga en este punto, como se muestra a continuación.

escenario del problema

Mi objetivo es comprender qué restricciones faltan y deben aplicarse a los dos botones para mantener anchos iguales independientemente del dispositivo. Si es posible, me gustaría lograr esto a través del constructor de interfaces en lugar de código adicional.


1
La mampostería es una forma recomendada de hacer esto mediante programación. Enlace: github.com/Masonry/Masonry
Itachi

1
aquí está el enlace ... puede comprobar ... stackoverflow.com/questions/29620409/…
EI Captain v2.0

Respuestas:


246

Agregue las siguientes restricciones

  1. Asigne el mismo ancho de button1 a button2.
  2. Asigne un espacio horizontal entre ambos botones.
  3. Asigne un espacio inicial desde el botón1 a su supervista.
  4. Asignar espacio final desde el botón2 a su supervista.
  5. Asigne espacio superior a ambos botones.
    Déjame saber si te funciona.

7
Excelente, esto funcionó para mí. Específicamente el punto # 2: agregar un espaciado horizontal.
Scratcha

WoW !!! ¿A qué me refiero? Realmente funciona como un encanto, ¡y he perdido alrededor de 3 horas! :( En mi caso, tenía dos Vistas de igual ancho en la supervista dividiéndola. Sin embargo, me preguntó al final algo como "Necesita restricciones para Y o Altura". Elegí hacer "Agregar restricciones faltantes" y se resolvió.
Randika Vishman

@Abubakr: funciona solo para un tamaño de pantalla ya que ambos botones tienen el mismo ancho.
AG

1
¡También funciona para más de 2 elementos de IU adyacentes!
siege_Perilous

1
Bueno, gracias, pero encontré la solución y está mejor en el código. Dale a cualquiera de ellos una alineación central con el padre y dale la mitad constante del tamaño del contenido, puedes calcular eso en el código o si el contenido es estático, simplemente puedes actualizar los marcos y actualizar la constante. junto con eso, también agregue la mitad del espacio central entre dos botones para alinear ese centro. Y solo dale el inicio o el final al otro botón. Soluciona esto por mí. Y si su contenido es intrínseco y necesita actualizarlo, simplemente llame al método de actualizaciones de diseño y vuelva a calcular el valor constante.
Amber K

80

Siga los pasos y capturas de pantalla para una solución fácil


Paso 1)

  • Para el Botón 1: Establecer restricciones: (1) Líder, (2) Superior o inferior según su necesidad, (3) Altura


Paso 2)

  • Para el botón 2: Establezca restricciones: (1) final, (2) superior o inferior según sus necesidades, (3) altura

Paso 3)

  • Presione Ctrl + Arrastrar del botón 1 al botón 2

  • Seleccionar espaciado horizontal


Paso 4)

  • Seleccione ambos botones (usando el comando) y agregue restricciones de igual ancho


SALIDA

Espero que te ayude :)


1
La altura no debe fijarse. Deje que la vista decida la altura del botón de acuerdo con el tamaño de la pantalla.
Kunal Kumar

@KunalKumar la altura de este caso es fija. ¿Puedes decirme qué quieres?
Vvk

@Vvk ... hermano perfecto :)
Jaywant Khedkar

18

El diseño de la pila en iOS9 hará el trabajo muy bien. Agregue la vista de pila a su vista y configure de la siguiente manera:

ingrese la descripción de la imagen aquí



0

Mi solucion es

  1. Ponga una pequeña vista en medio de dos botones y hágalo centrar (Centro horizontal en contenedor y centro vertical en contener como 0).
  2. Agregue altura y ancho a la vista pequeña.
  3. Agregue botones a las restricciones y otorgue restricciones de espacio horizontal a la vista pequeña.
  4. Dale a la vista pequeña el mismo color de fondo que los botones o el color de la vista.

Nota: vea la captura de pantalla.

ingrese la descripción de la imagen aquí

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.