iphone - guide - iOS: coloque UIView en el centro de supervisión con Programación automática

swift constraints programmatically

Question

¿Cómo se configura programáticamente una UIView para estar en el centro de su supervisión con Auto Layout?

UIButton* viewObj = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[viewObj setTranslatesAutoresizingMaskIntoConstraints:NO];
[viewObj setBackgroundColor:[UIColor greenColor]];
[self.view addSubview:viewObj];

NSLayoutConstraint* cn = [NSLayoutConstraint constraintWithItem:viewObj
                                                      attribute:NSLayoutAttributeCenterX
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self.view
                                                      attribute:NSLayoutAttributeCenterX 
                                                     multiplier:1.0
                                                       constant:0];
[self.view addConstraint:cn];
cn = [NSLayoutConstraint constraintWithItem:viewObj 
                                  attribute:NSLayoutAttributeCenterY
                                  relatedBy:NSLayoutRelationEqual 
                                     toItem:self.view
                                  attribute:NSLayoutAttributeCenterY
                                 multiplier:1.0
                                   constant:0];
[self.view addConstraint:cn];

El código anterior funciona para mí para UIButton, pero tengo problemas para reemplazar la primera línea con algo que funciona para una vista UIV.

He intentado

UIView* viewObj = [UIView alloc] initWithFrame:CGRectZero];

pero la vista no aparece en el simulador.

¿Alguna sugerencia?

¡Gracias!

Answer 1

Dado que hizo esta pregunta en el contexto del uso de Auto Layout, el problema aquí es que un UIButton tiene un tamaño intrínseco (comunicado a través del método intrinsicContentSize) que proporciona al Auto Layout información sobre el ancho y la altura, pero una vista de UIV normalmente no. Así que necesitas agregar más restricciones relacionadas con el ancho y la altura.

Si desea que su UIView sea un tamaño establecido (por ejemplo, 200x200), podría agregar estas líneas:

cn = [NSLayoutConstraint constraintWithItem:viewObj 
                                  attribute:NSLayoutAttributeHeight
                                  relatedBy:NSLayoutRelationEqual 
                                     toItem:nil
                                  attribute:NSLayoutAttributeNotAnAttribute 
                                 multiplier:1
                                   constant:200];
[viewObj addConstraint:cn];

cn = [NSLayoutConstraint constraintWithItem:viewObj
                                  attribute:NSLayoutAttributeWidth
                                  relatedBy:NSLayoutRelationEqual
                                     toItem:nil
                                  attribute:NSLayoutAttributeNotAnAttribute 
                                 multiplier:1 
                                   constant:200];
[viewObj addConstraint: cn];

Tenga en cuenta que el argumento toItem: es nil y el segundo atributo es NSLayoutAttributeNotAnAttribute , porque no está especificando el ancho y el alto en relación con cualquier otra cosa. Si desea que la altura y el ancho de la subvista sean relativos a la supervisión (por ejemplo, 0.5), puede hacer esto:

cn = [NSLayoutConstraint constraintWithItem:viewObj
                                  attribute:NSLayoutAttributeHeight
                                  relatedBy:NSLayoutRelationEqual
                                     toItem:self.view
                                  attribute:NSLayoutAttributeHeight 
                                 multiplier:0.5 
                                   constant:0];
[self.view addConstraint:cn];
cn = [NSLayoutConstraint constraintWithItem:viewObj
                                  attribute:NSLayoutAttributeWidth
                                  relatedBy:NSLayoutRelationEqual
                                     toItem:self.view
                                  attribute:NSLayoutAttributeWidth
                                 multiplier:0.5
                                   constant:0];
[self.view addConstraint: cn];

Answer 2

UIButton , UIImageView , UIlabel y UITextField pueden establecer automáticamente su tamaño de acuerdo con sus propiedades de contenido. El ancho y el alto de un UIImageView están establecidos por el UIImage que puede contener. El tamaño de una UILabel dependerá de su texto. El ancho y la altura de un UIButton están definidos por el título y la imagen que tiene (puedes obtener más información al respecto con Tamaño de contenido intrínseco ).

Por lo tanto, cuando desea centrar un UIButton , un UILabel , un UITextField o un UIImageView dentro de un UIView con diseño automático, en casi todos los casos no tiene que crear restricciones para su ancho y alto. Simplemente necesita establecer restricciones horizontales y verticales para ellos.

Sin embargo, con el diseño automático, una UIView que no tiene subvistas no puede confiar en nada para establecer su tamaño a menos que le proporcione algunas restricciones arbitrarias de ancho y altura. Y de acuerdo con sus necesidades, puede resolver esto de 3 maneras diferentes.

El estilo de diseño automático puro.

Aquí, establecemos el ancho y el alto de nuestra UIView directamente como restricciones de diseño automático:

override func viewDidLoad() {
    super.viewDidLoad()

    let newView = UIView()
    newView.backgroundColor = .redColor()
    newView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(newView)

    // Auto layout code using anchors (iOS9+)
    let horizontalConstraint = newView.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor)
    let verticalConstraint = newView.centerYAnchor.constraintEqualToAnchor(view.centerYAnchor)
    let widthConstraint = newView.widthAnchor.constraintEqualToAnchor(nil, constant: 100)
    let heightConstraint = newView.heightAnchor.constraintEqualToAnchor(nil, constant: 100)
    NSLayoutConstraint.activateConstraints([horizontalConstraint, verticalConstraint, widthConstraint, heightConstraint])
}

El estilo de máscara de autorización.

Aquí, inicializamos nuestra UIView con su anchura y altura, hacemos que su centro y su centro de supervisión sean iguales y creamos algunas máscaras automáticas. Luego, le pedimos a UIKit que traduzca esas máscaras automáticas en restricciones de diseño automático:

override func viewDidLoad() {
    super.viewDidLoad()

    let newView = UIView(frame: CGRect(x: 0.0, y: 0.0, width: 100.0, height: 100.0))
    newView.backgroundColor = .redColor()

    newView.center = CGPointMake(view.bounds.midX, view.bounds.midY)
    newView.autoresizingMask = [.FlexibleLeftMargin, .FlexibleRightMargin, .FlexibleTopMargin, .FlexibleBottomMargin]

    newView.translatesAutoresizingMaskIntoConstraints = true // default is true
    view.addSubview(newView)
}

El estilo de la subclase.

Aquí, creamos una subclase de UIView y UIView su método ( declaration ) intrinsicContentSize() ) para que devuelva el tamaño deseado:

import UIKit

class CustomView: UIView {
    override func intrinsicContentSize() -> CGSize {
        return CGSize(width: 100, height: 100)
    }
}

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let newView = CustomView()
        newView.backgroundColor = .redColor()
        newView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(newView)

        let horizontalConstraint = NSLayoutConstraint(item: newView,
            attribute: .CenterX,
            relatedBy: .Equal,
            toItem: view,
            attribute: .CenterX,
            multiplier: 1,
            constant: 0)
        view.addConstraint(horizontalConstraint)
        let verticalConstraint = NSLayoutConstraint(item: newView,
            attribute: .CenterY,
            relatedBy: .Equal,
            toItem: view,
            attribute: .CenterY,
            multiplier: 1,
            constant: 0)
        view.addConstraint(verticalConstraint)
    }

}