ios - translatesautoresizingmaskintoconstraints - Entendiendo el multiplicador en el diseño automático para usar posicionamiento relativo

swift constraints programmatically

Question

Estoy tratando de entender cómo se puede utilizar el diseño automático para colocar los elementos en relación con otras vistas de forma porcentual.

Por ejemplo, recientemente aprendí que puede especificar que la parte inferior de una vista debe estar un 4% más alta que la parte inferior de su vista supervisada al usar esto:

self.view.addConstraint(NSLayoutConstraint(item: label, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 0.96, constant: 0))

Esto tiene sentido para mí porque un multiplicador de 1 lo alinearía justo en la parte inferior de la vista, por lo que puede reducir esa cantidad en un 4 por ciento cambiando el multiplicador a 0.96.

Pero, ¿cómo puedes hacer lo mismo en la otra dirección? Desea especificar que la parte superior de una etiqueta debe comenzar un 4% por debajo de la parte superior de la supervisión. Si usa la misma línea pero cambia los atributos a .Top , eso significa que sería un 4% más alto que la parte superior de la vista de supervisión (pero en realidad no la mueve de la pantalla). No se puede tener un multiplicador negativo, no creo, y no creo que un valor mayor que 1 haga nada cuando la constante es 0. Entonces, ¿cómo se configura?

Tengo la misma pregunta para implementar liderar y arrastrar. Trailing es fácil. Si lo quieres un 10% de la derecha:

self.view.addConstraint(NSLayoutConstraint(item: label, attribute: .Trailing, relatedBy: .Equal, toItem: self.view, attribute: .Trailing, multiplier: 0.9, constant: 0))

Tiene sentido porque lo vuelves a marcar 0.1 o 10% en lugar de alinearlo completamente en 1.0. Pero, ¿cómo haces lo mismo para liderar? Pensé que podría establecer la ventaja de la etiqueta en relación con la vista de la vista, y luego establecer el multiplicador a 0.1. En mi opinión, eso significaría que la etiqueta comenzaría en el extremo derecho pero luego se marcaría 90%, obteniendo el 10% deseado de la izquierda. Pero ese no es el caso, no estoy seguro de por qué.

¿Puede explicar cómo funciona esto, cómo usar correctamente el multiplicador para obtener estos diseños relativos?

Para que sea más fácil, digamos que le gustaría crear una etiqueta que tenga el 10% superior e inferior de la altura de la vista de supervisión, y que se arrastre y se dirija al 10% del ancho de la vista de supervisión. En un iPhone en vertical, habrá más relleno por encima y por debajo de la etiqueta que por el lado izquierdo y derecho del mismo, así (sí, está dibujado a escala):


Pero digamos que en el iPad se mostrará en una vista que es un cuadrado perfecto. Por lo tanto, el relleno será la misma cantidad alrededor, así:


La pregunta es cómo definir estas restricciones como dinámicas en valor, en lugar de establecer un valor fijo para una constante. Ya sé cómo hacer fondo y seguir, pero arriba y líder me han dejado perplejo. Espero entender cómo usar el multiplicador para hacer diseños más avanzados, por ejemplo, especificar la parte superior de una etiqueta debe estar un 10% debajo de la parte inferior de otra etiqueta, en lugar de establecerla en una constante fija.

Answer 1

Aquí esta la

INCREÍBLEMENTE SIMPLE

forma de hacerlo

Solo agregue las vistas de ''ayudante'' o ''medida'':

Las vistas de ''ayudante de cálculo'' son amarillas en el ejemplo.

La técnica general es tan simple y obvia: no necesita ninguna explicación, puede obtenerla de la imagen.

Es uno de esos "elefantes en la habitación" sobre los que "no te enseñan" en iOS. Pero se usa constantemente en todos los diseños.

(De hecho, Apple debería haber realizado una subclase UIView especial "medidas" para este propósito exacto, y de hecho, muchos equipos grandes hacen precisamente eso, con las características obvias).

El icono de aviso # 1 está centrado en el extremo derecho de la vista de ayuda "Ver 1/4".

El ícono de aviso # 3 está centrado en el extremo izquierdo de la vista de ayuda "Ver 3/4".

Ya has terminado, tienes un Chardonnay.

Convenientemente, en las vistas de ayuda, solo establece el multiplicador en lo que quieras, dependiendo de la sensación deseada. Es increíblemente fácil cambiar los de su código, usar IBInspectable, animate , y así sucesivamente ...

Answer 2

En mi opinión, "no se puede tener un multiplicador negativo, no creo, y no creo que un valor mayor que 1 haga nada cuando la constante es 0" expuso su desviación comprensiva.

La regla debajo del capó es solo una ecuación lineal:

FirstItem.Attribute1 = (SecondItem.Attribute2 * Multiplier) + Constant

Todo medido en puntos. Como puedes ver, el multiplicador (una propiedad de NSLayoutConstraint) no es el multiplicador de la constante. Sigue la ecuación, lo que no entiendas será claro.

En cuanto a su ejemplo específico, @Archaeopterasa presentó una gran solución, otra se muestra a continuación:

Basado en el hecho de que sabes cómo hacer fondo y perdiendo, supongo que has hecho estos dos. Luego agrega otras dos restricciones, el efecto será lo que quieras:

Por último, si desea especificar la parte superior de una etiqueta 10% debajo de la parte inferior de otra etiqueta, parece que no puede implementarla sin escribir una línea de código. Debe usar el código para establecer la constante del objeto NSLayoutConstraint que conecta FirstItem y SecondItem una vez que se conoce la altura de la vista de supervisión en tiempo de ejecución.

En primer lugar, controle el arrastre de una etiqueta a otra y elija "Espaciado vertical" (O puede hacerlo de otras maneras)

En segundo lugar, se necesita una salida de referencia:

@IBOutlet weak var tenPercentOfSuperview: NSLayoutConstraint!

Luego, haz esto en un lugar apropiado (por ejemplo, en viewDidLoad ())

let heightOfSuperview = self.view.bounds.height
tenPercentOfSuperview.constant = heightOfSuperview * 0.1

Ahora todo esta bien.

Si desea saber más sobre este tema, se recomienda el documento de Apple: https://developer.apple.com/library/ios/recipes/xcode_help-IB_auto_layout/chapters/EditingConstraintAttributesintheAttributesInspector.html

Answer 3

Hay un par de maneras de hacer esto. En el caso más simple, ya casi lo tiene: si desea que los límites horizontales estén al 10% y al 90%, entonces necesita especificar ambas restricciones con respecto al borde posterior de la supervisión, por Subview.Trailing tanto, Subview.Trailing se bloquea en Superview.Trailing con un multiplicador de 0.9 , como usted dice, pero luego Subview.Leading también se bloquea en Superview.Trailing , solo con un multiplicador de 0.1 :

(y de manera similar para la parte superior / inferior)

Por otro lado, el caso que mencionas al final es un poco más complicado: "especificar la parte superior de una etiqueta debe estar un 10% debajo de la parte inferior de otra etiqueta". Para eso probablemente no podrá usar inserciones de porcentaje fijo como en el caso anterior. En su lugar, puede crear una vista de espaciador invisible entre ellos: agregue una restricción con Spacer.Height = 0.1 * Superview.Height y luego adjúntela entre las dos etiquetas. (También puede manejar el caso anterior con estas vistas espaciadoras, pero para ese caso no es realmente necesario).