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)
}
}