iOS
Diseño automático

Introducción

Sintaxis

• NSLayoutConstraint (item: Any, atributo: NSLayoutAttribute, relatedBy: NSLayoutRelation, toItem: Any, attribute: NSLayoutAttribute, multiplicador: CGFloat, constante: CGFloat) // Crear un contraint

Establecer restricciones programáticamente

Ejemplo de código repetitivo

override func viewDidLoad() {
    super.viewDidLoad()

    let myView = UIView()
    myView.backgroundColor = UIColor.blueColor()
    myView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(myView)

    // Add constraints code here
    // ...
}

En los ejemplos a continuación, el Estilo de Anclaje es el método preferido sobre el Estilo NSLayoutConstraint , sin embargo, solo está disponible desde iOS 9, por lo que si está soportando iOS 8, entonces aún debe usar el Estilo NSLayoutConstraint .

Fijación

Estilo de ancla

let margins = view.layoutMarginsGuide
myView.leadingAnchor.constraintEqualToAnchor(margins.leadingAnchor, constant: 20).active = true

• Además de leadingAnchor , también hay trailingAnchor , topAnchor y bottomAnchor .

NSLayoutConstraint Style

NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.LeadingMargin, multiplier: 1.0, constant: 20.0).active = true

• Además de .Leading también hay .Trailing , .Top y .Bottom .
• Además de .LeadingMargin también hay .TrailingMargin , .TopMargin y .BottomMargin .

Estilo de lenguaje de formato visual

NSLayoutConstraint.constraintsWithVisualFormat("H:|-20-[myViewKey]", options: [], metrics: nil, views: ["myViewKey": myView])

Anchura y altura

Estilo de ancla

myView.widthAnchor.constraintEqualToAnchor(nil, constant: 200).active = true
myView.heightAnchor.constraintEqualToAnchor(nil, constant: 100).active = true

NSLayoutConstraint Style

NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 200).active = true
NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 100).active = true

Estilo de lenguaje de formato visual

NSLayoutConstraint.constraintsWithVisualFormat("H:[myViewKey(200)]", options: [], metrics: nil, views: ["myViewKey": myView])
NSLayoutConstraint.constraintsWithVisualFormat("V:[myViewKey(100)]", options: [], metrics: nil, views: ["myViewKey": myView])

Centro en contenedor

Estilo de ancla

myView.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor).active = true
myView.centerYAnchor.constraintEqualToAnchor(view.centerYAnchor).active = true

NSLayoutConstraint Style

NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0).active = true
NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant: 0).active = true

Estilo de lenguaje de formato visual

NSLayoutConstraint.constraintsWithVisualFormat("V:[viewKey]-(<=0)-[myViewKey]", options: NSLayoutFormatOptions.AlignAllCenterX, metrics: nil, views: ["myViewKey": myView, "viewKey": view])
NSLayoutConstraint.constraintsWithVisualFormat("H:[viewKey]-(<=0)-[myViewKey]", options: NSLayoutFormatOptions.AlignAllCenterY, metrics: nil, views: ["myViewKey": myView, "viewKey": view])

Cómo usar Auto Layout

El diseño automático se utiliza para organizar las vistas para que se vean bien en cualquier dispositivo y orientación. Las restricciones son las reglas que indican cómo debe establecerse todo. Incluyen bordes de fijación, centrado y configuración de tamaños, entre otras cosas.

El diseño automático está habilitado de forma predeterminada, pero puede verificarlo dos veces. Si hace clic en Main.storyboard en el Project Navigator y luego muestra el inspector de archivos. Asegúrese de que las clases de diseño automático y tamaño estén marcadas:

Las restricciones de diseño automático se pueden establecer en el generador de interfaz o en el código. En el Creador de interfaces, encontrará las herramientas de diseño automático en la parte inferior derecha. Al hacer clic en ellos se revelarán diferentes opciones para establecer las restricciones en una vista.

Si desea tener diferentes restricciones para diferentes tamaños de dispositivos u orientaciones, puede configurarlas en todas las opciones de cualquier clase de tamaño que se encuentren en la parte inferior central.

Restricciones del centro

Seleccione su botón (o la vista que desee centrar) en el guión gráfico . Luego haga clic en el botón de alinear en la parte inferior derecha. Seleccione Horizontally in Container y Vertically in Container . Haga clic en "Añadir 2 restricciones".

Si ya no estaba perfectamente centrado, es posible que tengas que hacer una cosa más. Haga clic en el botón "Actualizar marcos" que se encuentra dos a la izquierda del botón "Incrustar en la pila" en la barra inferior.

También puede "actualizar los cuadros según sea necesario" presionando juntos ⌘ + ⌥ + = (Comando + Opción e igual) después de seleccionar la vista, esto puede ahorrar algo de tiempo.

Ahora, cuando ejecute su aplicación, debería estar centrada, independientemente del tamaño del dispositivo que esté utilizando.

Otra forma de centrar las vistas utilizando el Generador de Interfaz es mediante la tecla de control-clic-arrastrar Digamos que quieres centrar una UILabel en una vista. Abra el Document Outline del Document Outline en su guión gráfico haciendo clic en el botón de la barra lateral en la parte inferior izquierda. Haga clic y arrastre desde la etiqueta a la vista mientras mantiene presionado ctrl (control), y debería aparecer una línea azul:

Al publicarse, aparecerá un menú de opciones de restricción:

Seleccione "Centrar horizontalmente en contenedor" y "Centrar verticalmente en contenedor". Actualizar marcos según sea necesario, y ¡voilá! Una etiqueta centrada.

Alternativamente, puede agregar las restricciones programáticamente. Cree las restricciones y agréguelas a los elementos y vistas deseados de la interfaz de usuario, como se describe en el siguiente ejemplo, donde creamos un botón y lo alineamos en el centro, horizontal y verticalmente a su supervisión:

C objetivo

- (void)viewDidLoad
{
    [super viewDidLoad];
    UIButton *yourButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 18)];
    [yourButton setTitle:@"Button" forState:UIControlStateNormal];


    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:yourButton attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]]; //Align veritcally center to superView

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:yourButton attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]]; //Align horizontally center to superView

    [self.view addSubview:yourButton]; //Add button to superView
}

Rápido

override func viewDidLoad() 
{
    super.viewDidLoad()
    let yourButton: UIButton = UIButton(frame: CGRect(x: 0, y: 0, width: 100, height: 18))
    yourButton.setTitle("Button", forState: .Normal)

    let centerVertically = NSLayoutConstraint(item: yourButton,
                                   attribute: .CenterX,
                                   relatedBy: .Equal,
                                      toItem: view,
                                   attribute: .CenterX,
                                  multiplier: 1.0,
                                    constant: 0.0)
    let centerHorizontally = NSLayoutConstraint(item: yourButton,
                                   attribute: .CenterY,
                                   relatedBy: .Equal,
                                      toItem: view,
                                   attribute: .CenterY,
                                  multiplier: 1.0,
                                    constant: 0.0)
    NSLayoutConstraint.activateConstraints([centerVertically, centerHorizontally])
}

Vistas espaciales uniformemente

Es común que dos vistas estén una al lado de la otra, centradas en su supervisión. La respuesta común dada en Stack Overflow es incrustar estas dos vistas en una vista UIView y centrar la vista UIView . Esto no es necesario ni recomendado. De los documentos de UILayoutGuide :

Hay una serie de costos asociados con la adición de vistas ficticias a su jerarquía de vistas. Primero, está el costo de crear y mantener la vista en sí. En segundo lugar, la vista ficticia es un miembro completo de la jerarquía de vistas, lo que significa que agrega sobrecarga a cada tarea que realiza la jerarquía. Lo peor de todo es que la vista ficticia invisible puede interceptar mensajes destinados a otras vistas, lo que causa problemas que son muy difíciles de encontrar.

Puede usar UILayoutGuide para hacer esto, en lugar de agregar los botones a una vista UIView innecesaria. Un UILayoutGuide es esencialmente un espacio rectangular que puede interactuar con el diseño automático. Usted coloca un UILayoutGuide en los lados izquierdo y derecho de los botones y establece que sus anchos sean iguales. Esto centrará los botones. Aquí está cómo hacerlo en código:

Estilo de lenguaje de formato visual

view.addSubview(button1)
view.addSubview(button2)

let leftSpace = UILayoutGuide()
view.addLayoutGuide(leftSpace)

let rightSpace = UILayoutGuide()
view.addLayoutGuide(rightSpace)

let views = [
    "leftSpace" : leftSpace,
    "button1" : button1,
    "button2" : button2,
    "rightSpace" : rightSpace
]

// Lay the buttons and layout guides out horizontally in a line. 
// Put the layout guides on each end.
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[leftSpace][button1]-[button2][rightSpace]|", options: [], metrics: nil, views: views))

// Now set the layout guides widths equal, so that the space on the 
// left and the right of the buttons will be equal
leftSpace.widthAnchor.constraintEqualToAnchor(rightSpace.widthAnchor).active = true

Estilo de ancla

let leadingSpace = UILayoutGuide()
let trailingSpace = UILayoutGuide()
view.addLayoutGuide(leadingSpace)
view.addLayoutGuide(trailingSpace)

leadingSpace.widthAnchor.constraintEqualToAnchor(trailingSpace.widthAnchor).active = true
    
leadingSpace.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor).active = true
leadingSpace.trailingAnchor.constraintEqualToAnchor(button1.leadingAnchor).active = true
    
trailingSpace.leadingAnchor.constraintEqualToAnchor(button2.trailingAnchor).active = true
trailingSpace.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor).active = true

También deberá agregar restricciones verticales a esto, ¡pero esto centrará los botones en la vista sin agregar ninguna vista "ficticia"! Esto evitará que el sistema pierda tiempo de CPU al mostrar esas vistas "ficticias". Este ejemplo utiliza botones, pero puede intercambiar botones para cualquier vista en la que quiera poner restricciones.

Si admite iOS 8 o una versión anterior, la forma más sencilla de crear este diseño es agregar vistas ficticias ocultas. Con iOS 9 puede reemplazar las vistas ficticias con guías de diseño.

Nota: Interface Builder aún no admite guías de diseño (Xcode 7.2.1). Por lo tanto, si desea usarlos, debe crear sus restricciones en el código. Fuente

UILabel tamaño intrínseco

Tenemos que crear una vista que tendrá un prefijo de imagen a un texto. el texto puede ser de longitud variable. Tenemos que lograr un resultado en el que, en Imagen +, el texto esté siempre en el centro de la vista principal.

Paso 1: primero cree un proyecto de vista única y asígnele el nombre que prefiera y abra la primera vista del guión gráfico. Arrastre una vista con un tamaño razonable y configure el color de fondo en amarillo. He cambiado el tamaño de mi controlador de vista a 3.5 ″. La resultante La vista debería verse algo como esto.

Paso 2: Ahora agregaremos restricciones a la vista amarilla. Para comenzar, agregaremos restricciones de ancho y altura (¿Espera un minuto? ¿No dijimos que la vista tendrá un ancho dinámico? Ok, volveremos a ella más adelante) Agregar el Las siguientes restricciones, según la imagen a continuación, no molestan con el valor de ancho, cualquier valor funcionará bien para el ancho, pero manténgalo lo suficientemente grande para que podamos agregar las salidas automáticas correctamente.

Después de agregar estas dos restricciones, verá que XCode le está dando errores, como se muestra en la imagen de abajo, para verlos y comprenderlos.

Tenemos dos errores (rojo significa error) Como se explicó anteriormente, revisemos la parte de ambigüedad

Restricciones que faltan: Necesidad de restricciones para: Posición X: - Como se mencionó anteriormente, le hemos dado a la vista un ancho y una altura, por lo que se define su "RAZONES", pero no hemos dado su origen, por lo que no se define su "MARCO". Autolayout no puede determinar cuál será la posición X de nuestra vista amarilla

Restricciones que faltan: Necesidad de restricciones para: Posición Y: - Como se mencionó anteriormente, le hemos dado a la vista un ancho y una altura, por lo que se define su "RAZONES", pero no hemos dado su origen, por lo que no se define su "MARCO". Autolayout no puede determinar cuál será la posición Y de nuestra vista amarilla. Para resolver esto, tenemos que darle a Autolayout algo para resolver X e Y. Ya que no podemos establecer fotogramas, lo haremos de forma automática. Agregue las siguientes restricciones según la La imagen que figura a continuación la explicaré más adelante.

Lo que hemos hecho es: hemos agregado un "Centro vertical" y un "Centro horizontal". Estas restricciones indican a la disposición automática que nuestra vista amarilla siempre estará en el centro horizontalmente: por lo tanto, X en el mismo determinado está con restricción vertical y se determina Y. podría tener que ajustar el marco).

Paso 3: Por ahora nuestra vista base amarilla está lista. Agregaremos la imagen de prefijo como subvista de nuestra vista amarilla con las siguientes restricciones. Puede elegir cualquier imagen de su elección.

Como tenemos una dimensión fija para nuestra imagen de prefijo, tendremos una altura de ancho fija para esta vista de imagen. Agregue las restricciones y continúe con el siguiente paso.

Paso 4: agregue una UILabel como la vista secundaria de nuestra vista amarilla y agregue las siguientes restricciones

Como puede ver, solo le he dado restricciones relativas a nuestra UILabel. Es 8 puntos desde la imagen del prefijo y 0,0,0 arriba y abajo desde la vista amarilla. Ya que queremos que el ancho sea dinámico, no daremos restricciones de ancho o altura. .

P: ¿Por qué no estamos recibiendo ningún error ahora, no hemos dado ningún ancho y altura? Respuesta: - Recibimos un error o una advertencia solo cuando el diseño automático no es capaz de resolver cualquier cosa que sea necesaria para representar una vista en la pantalla. Sea de ancho o de origen. Ya que nuestra etiqueta es relativa a la vista amarilla y la imagen del prefijo y sus marcos Está bien definido. Autolayout es capaz de calcular el marco de nuestra etiqueta.

Paso 5: Ahora si recordamos, nos daremos cuenta de que hemos dado una vista fija a nuestra vista amarilla, pero queremos que sea dinámica y dependa del texto de nuestra etiqueta. Por lo tanto, modificaremos nuestra restricción de ancho de la vista amarilla. Ancho de la vista amarilla es necesario para resolver la ambigüedad, pero queremos que se anule en el tiempo de ejecución en función del contenido de UILabel. Así que seleccionaremos nuestra vista amarilla e iremos al inspector de tamaño y reduciremos la prioridad de la restricción de ancho a 1 para que quede descartada. Sigue la imagen de abajo.

Paso 6: Queremos que UILabel se expanda de acuerdo con el texto y amplíe nuestra vista amarilla. Por lo tanto, hemos reducido la prioridad del ancho de la vista amarilla. Ahora aumentaremos la prioridad de la resistencia de compresión de texto de nuestra UILabel. Queremos que nuestra vista se reduzca Bueno, así aumentaremos la prioridad de contenido de UILabel. Siga la imagen a continuación.

Como puede ver, hemos aumentado la prioridad de compatibilidad de contenido a 500 y la prioridad de resistencia a la compresión a 751, lo que superará con éxito la prioridad 1 de la restricción de ancho.

Ahora construye y ejecuta verás algo como lo siguiente.

Cómo animar con diseño automático

Sin diseño automático, la animación se realiza cambiando el marco de una vista a lo largo del tiempo. Con Auto Layout, las restricciones dictan el marco de la vista, por lo que tiene que animar las restricciones en su lugar. Esta indirección hace que la animación sea más difícil de visualizar.

Estas son las formas de animar con Auto Layout:

1. Cambie la constante de la restricción después de la creación mediante llamadas periódicas ( CADisplayLink , dispatch_source_t , dispatch_after , NSTimer ). Luego llame a layoutIfNeeded para actualizar la restricción. Ejemplo:

C objetivo:

self.someConstraint.constant = 10.0;
[UIView animateWithDuration:0.25 animations:^{
    [self.view layoutIfNeeded];
}];

Rápido:

self.someConstraint.constant = 10.0
UIView.animate(withDuration: 0.25, animations: self.view.layoutIfNeeded)

2. Cambie las restricciones y llame a [view layoutIfNeeded] dentro de un bloque de animación. Esto se interpola entre las dos posiciones haciendo caso omiso de las restricciones durante la animación.

[UIView animateWithDuration:0.5 animations:^{
    [view layoutIfNeeded];
}]

3. Cambiar la prioridad de las restricciones . Esto requiere menos CPU que agregar y eliminar restricciones.

4. Eliminar todas las restricciones y utilizar máscaras de tamaño automático . Para más adelante, debe configurar view.translatesAutoresizingMaskIntoConstraints = YES .

5. Use restricciones que no interfieran con la animación deseada .

6. Utilice una vista de contenedor . Posiciona la supervisión con restricciones. Luego, agregue una subvista con restricciones que no contrarresten la animación, por ejemplo: un centro en relación con la supervisión. Esto descarga parte de las restricciones a la vista supervisada, por lo que no combaten la animación en la subvista.

7. Animar capas en lugar de vistas . Las transformaciones de capa no activan el diseño automático.

CABasicAnimation* ba = [CABasicAnimation animationWithKeyPath:@"transform"];
ba.autoreverses = YES;
ba.duration = 0.3;
ba.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.1, 1.1, 1)];
[v.layer addAnimation:ba forKey:nil];

8. Reemplazar layoutSubviews . Llame a [super layoutSubviews] y afine las restricciones.

9. Cambie el marco en viewDidLayoutSubviews . El diseño automático se aplica en layoutSubviews , así que una vez hecho, cámbielo en viewDidLayoutSubviews .

10. Optar por salir de Auto Layout y establecer vistas manualmente. Puede hacer esto anulando layoutSubviews / layout sin llamar a la implementación de la súper clase.

Sugerencia rápida: si el elemento primario de la vista animada no se está interpolando (es decir, la animación salta del estado inicial al final), llame a layoutIfNeeded() en la vista más profunda que sea el elemento primario de la vista animada (en otras palabras, , que no se ve afectado por la animación). No sé exactamente por qué funciona esto.

Resolver el conflicto de prioridad de UILabel

Problema : cuando usa muchas etiquetas dentro de una vista, quizás reciba una advertencia :

¿Cómo podemos arreglar esta advertencia ?

Solución : Calculamos y establecemos las prioridades en orden. Las prioridades deben ser diferentes de las etiquetas. Significa que lo que es importante tendrá mayor prioridad. Por ejemplo, en mi caso, establezco las prioridades verticales para que mis etiquetas se vean así:

Establecí la prioridad más alta para la primera etiqueta y la más baja para la cuarta etiqueta.

En un ViewController, creo que es difícil ver el efecto de esas prioridades. Sin embargo, está muy claro con la altura de celda estimada de UITableViewCell +.

Espero que esto ayude.

Tamaño de UILabel y Parentview según el texto en UILabel

Guía paso por paso :-

Paso 1: - Establecer restricción a UIView

1. Líder. 2) Arriba. 3) que se arrastra. (De mainview)

Paso 2: - Establecer restricción a la etiqueta 1

1. Liderando 2) Top 3) Arrastrándose (desde su supervisión)

Paso 3: - Establecer restricción en Etiqueta 2

1. Liderando 2) Top 3) arrastrando (desde su supervisión)

Paso 4: - Lo más complicado le da un fondo a UILabel desde UIView.

Paso 5: - (Opcional) Establecer restricción a UIButton

1. Líder 2) Parte inferior 3) Arrastre 4) Altura fija (desde la vista principal)

Salida: -

Nota: - Asegúrese de haber establecido el Número de líneas = 0 en la propiedad Etiqueta.

Espero que esta información sea suficiente para comprender Autoresize UIView según la altura de UILabel y Autoresize UILabel según texto.

Conceptos básicos del lenguaje de formato visual: restricciones en el código!

HVFL es un lenguaje diseñado para restringir los elementos de la interfaz de usuario de una manera simple y rápida. En general, VFL tiene una ventaja sobre la personalización de UI tradicional en el Interface Builder porque es mucho más legible, accesible y compacto.

Aquí hay un ejemplo de VFL, en el que tres UIViews están restringidas de izquierda a derecha, llenando superView.width , con aGradeView

"H:|[bgView][aGradeView(40)][bGradeView(40)]|"

Hay dos ejes en los que podemos restringir los objetos de la interfaz de usuario, horizontal y verticalmente.

Cada línea de VFL siempre comienza con H: o V: Si ninguno de los dos está presente, la opción predeterminada es H:

Continuando, tenemos una tubería. | Este símbolo, o la tubería, se refiere a la supervisión. Si observa más detenidamente el fragmento de código VFL que se encuentra arriba, observará dos de estas tuberías.

Esto significa los dos extremos horizontales de la supervisión, los límites externos y exteriores.

A continuación verá algunos corchetes, dentro del primer conjunto de corchetes, tenemos bgView . Cuando tenemos corchetes, se refiere a un elemento de la interfaz de usuario, ahora puede preguntarse cómo establecemos un vínculo entre el nombre y el elemento de la interfaz de usuario real, ¿quizás una salida?

Cubriré eso al final del post.

Si observa el segundo par de corchetes [aGradeView(50)] , también tenemos algunos paréntesis encapsulados dentro, cuando está presente, define el ancho / alto según los ejes, que en este caso es 50 píxeles de ancho.

Los primeros corchetes [bgView] no tenían un ancho definido explícitamente, lo que significa que abarcaría todo lo posible.

Bien, eso es todo por lo básico, más sobre las cosas avanzadas en otro ejemplo.

por ejemplo:

    // 1. create views
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];

    // 2. forbid Autoresizing
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    redView.translatesAutoresizingMaskIntoConstraints = NO;

    // 3. make contraints
    // horizontal
    NSArray *blueH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:@{@"blueView" : blueView}];
    [self.view addConstraints:blueH];

    // vertical
    NSArray *blueVandRedV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllTrailing metrics:nil views:@{@"blueView" : blueView, @"redView" : redView}];
    [self.view addConstraints:blueVandRedV];

    NSLayoutConstraint *redW = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
    [self.view addConstraint:redW];

Uso mixto de diseño automático con diseño no automático

En ocasiones, es posible que desee realizar algunas acciones adicionales para los cálculos de Disposición automática realizados por el propio UIKit .

Ejemplo: cuando tiene una UIView que tiene un maskLayer , es posible que necesite actualizar maskLayer tan pronto como Auto Layout cambie el frame UIView

// CustomView.m
- (void)layoutSubviews {
    [super layoutSubviews];
    // now you can assume Auto Layout did its job
    // you can use view's frame in your calculations
    CALayer maskLayer = self.maskLayer;
    maskLayer.bounds = self.bounds;
    ...
}

o si desea realizar alguna acción adicional al diseño automático en ViewController

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    // now you can assume all your subviews are positioned/resized correctly
    self.customView.frame = self.containerView.frame;
}

Diseño proporcional

Restricción creada como

NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.LeadingMargin, multiplier: 1.0, constant: 20.0)

o, desde el punto de vista matemático:

view.attribute * multiplier + constant          (1)

Puede usar el multiplicador para crear un diseño proporcional para un factor de tamaño diferente.

Ejemplo:

La vista turquesa (V1) es un cuadrado con ancho de supervisión proporcional de ancho con relación 1: 1.1

Gary square (V2) es una subvista de V1. Espacio inferior establecido por constante = 60, Espacio al final establecido por multiplicador = 1.125 y constante = 0

Espacio al final establecido proporcionalmente, espacio inferior establecido como una constante.

Nota: si view.attribute es igual a 0 (por ejemplo, espacio inicial), la fórmula de restricción (1), será igual a 0. Es necesario cambiar el segundo elemento de restricción o establecer una restricción relativa al margen, para poder ver. Atributo ¡= 0.

NSLayoutConstraint: Contraints en código!

Cuando estamos trabajando en un marco, si las restricciones no son demasiado complejas, es mejor que utilicemos Interface Builder o NSLayoutConstraint en el código para hacerlo más pequeño, en lugar de importar Masonry o SnapKit.

por ejemplo:

• C objetivo

    // 1. create views
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];

    // 2. forbid Autoresizing
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    redView.translatesAutoresizingMaskIntoConstraints = NO;

    // 3. make contraints
    // 3.1 blueView
    NSLayoutConstraint *blueLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
    [self.view addConstraint:blueLeft];

    NSLayoutConstraint *blueTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:20];
    [self.view addConstraint:blueTop];

    NSLayoutConstraint *blueRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];
    [self.view addConstraint:blueRight];

    NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:50];
    [self.view addConstraint:blueHeight];

    // 3.2 redView
    NSLayoutConstraint *redTop = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1 constant:20];
    [self.view addConstraint:redTop];

    NSLayoutConstraint *redRight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];
    [self.view addConstraint:redRight];

    NSLayoutConstraint *redHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1 constant:0];
    [self.view addConstraint:redHeight];

    NSLayoutConstraint *redWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
    [self.view addConstraint:redWidth];