ios - español - Autolayout: el origen y el tamaño deberían cambiar según el ancho y el factor de altura

auto layout español (6)

Aquí hay un escenario que necesitaba.

He puesto un UIButton en IB (tamaño iPhone4 pulgadas) cuyo marco inicial en IB es x: 100, y: 100, w: 100, h: 100 . Quiero que los orígenes y la altura cambien según el tamaño del dispositivo. por ejemplo, el ancho y la altura de iPhone6 es 375X667, por lo tanto, el factor de ancho (375/320 = 1.1718) y el factor de altura (667/568 = 1.1742) . En esta escena, quiero cambiar mis botones origen X y ancho con multiplicar por factor de ancho (1.1718) y origen Y y altura con multiplicar por factor de altura (1.1782) . En este caso, mi botón debe aparecer en x: 100X1.1718, y: 100X1.1742, w: 100X1.1718, h: 100X1.1742 .

Lo mismo es necesario para iPhone6 +.

Puedo lograrlo fácilmente configurando Máscaras de aumento automático. ¿Cómo puedo lograr lo mismo al usar el diseño automático? ¿Qué paso debo seguir? ¿Qué restricciones debo aplicar?

Mi pregunta anterior sobre este

Estoy adjuntando algunas capturas de pantalla de lo que necesitaba usando Autolayout (Logrado con la máscara de aumento automático que se muestra en la imagen de arriba).

Mi intento: -

Paso 1: - Tome un botón de tamaño 100X100 en IB. establecer su X = 100 e y = 100. Paso 2: aplica estas restricciones.

Usa el multiplicador de las restricciones. Por lo tanto, establezca una restricción de que el ancho del botón es igual al ancho de la vista superior con un multiplicador de 100: 320 (puede usar este formato de razón para expresar el multiplicador). Establezca la constante de la restricción en 0. Haga lo mismo para la altura del botón proporcional a la altura de la vista superior (relación 100: 568). Para la posición del botón, restrinja el botón que conduce al ancho de la vista superior con una proporción de 100: 320 y la altura del botón a la vista superior con una proporción de 100: 568.

Para alto y ancho, cree una restricción de "relación de aspecto" en Interface Builder que vincula el botón a la supervista. No hay propiedad para la relación de aspecto; utilizará los valores en el momento en que se creó para establecer el multiplicador (si el ancho del iPhone es <= 5 y el enlace de la supervista con el ancho de los botones, será de 320: 100). Agregue una segunda restricción para la relación de aspecto que vincula la altura del botón a la altura de la supervista (si no desea que la altura se estire con el iPhone 5, puede vincular la relación de aspecto de los botones consigo misma).

Para el origen, no creo que haya una forma de vincular el origen de las vistas y el tamaño de las vistas. Para establecer el origen en un alto o ancho arbitrario según el tamaño de la pantalla, necesita crear una vista espaciadora. Inelegante, pero necesario. Agregue la vista y configúrelo oculto (y asígnele un nombre en el contorno del objeto a la izquierda, que cuando trabaje con autolayout en IB probablemente quiera hacer con todo para que las restricciones sean legibles, pero definitivamente aquí para que pueda encontrarlo fácilmente) . Establezca las restricciones de creación en cero, vinculándolas al botón y a la guía de diseño superior, y a cero a la vista superior y a la tecla.

Para ajustar el espaciado, puede crear restricciones de relación de aspecto, tanto para el ancho de la supervista como para la altura de la supervista, o simplemente establecerlo igual al ancho y alto del botón.

Si desea hacer esto completamente en su guión gráfico (o XIB), necesita usar una vista espaciadora.

Primero, coloque una vista espaciadora en la esquina superior izquierda de la vista raíz. Restrinja los bordes superior e izquierdo a la distancia cero desde la supervista. Restrinja su ancho para que sea 100: 320 en su ancho de superview (y asegúrese de que el primer elemento de la restricción sea el espaciador). Restrinja su altura para que sea 100: 568 a su altura de supervista. Estas restricciones de ancho y altura controlarán la posición del botón.

Ahora restrinja el borde superior del botón al borde inferior del espaciador y restrinja el borde izquierdo del botón al borde derecho del espaciador. Cree las restricciones proporcionales de ancho y altura entre el botón y la supervista.

Establezca la vista espaciadora en oculta. Las vistas ocultas no son visibles y no reciben toques, pero aún participan en el diseño.

... Si quiere hacerlo en código, simplemente use la máscara de aumento de tamaño y configure la translatesAutoresizingMaskIntoConstraints AutoresizingMaskIntoConstraints" a YES .

Posiblemente puedas hacerlo todo en IB usando 2 vistas de ayuda. Un Top helper y un Left Helper . El resto solo lo está configurando para que cada altura y ancho sea apropiadamente proporcional al tamaño de la vista. Configuré un ejemplo. Aquí hay un par de capturas de pantalla y diferentes tamaños de vista.

Como parte de su pregunta, puede establecer estas restricciones en su UIButton.

No es necesario que cambie la restricción que ha establecido para alto y ancho de UIButton.

1.) Debe establecer el espacio horizontal en Button.Leading y Superview.Trailing .

Establezca constante = 0 , Prioridad = 1000 y Multiplicador = 100: 320 como he establecido en la imagen de abajo.

2.) Debe configurar el espacio horizontal en Button.Top y Superview.Bottom .

Establezca constante = 0 , Prioridad = 1000 y Multiplicador = 100: 568 como lo he configurado en la imagen de abajo.

Resultado

Espero que esto resuelva tu problema.

Prueba esta solución

Establezca las vistas alineación superior a superviews centerY y configure el multiplicador 84: 240
Establezca las vistas alineadas a la izquierda en el centro de superviews X y configure el multiplicador 100: 160
establecer ancho proporcional con multiplicador 100: 320 y altura proporcional 100: 568

Espero que esto resuelva tu problema