Respuesta corta
marco = ubicación y tamaño de una vista utilizando el sistema de coordenadas de la vista principal
- Importante para: colocar la vista en el padre
límites = ubicación y tamaño de una vista usando su propio sistema de coordenadas
- Importante para: colocar el contenido o las subvistas de la vista dentro de sí mismo
Respuesta detallada
Para ayudarme a recordar el marco , pienso en un marco en una pared . El marco de la imagen es como el borde de una vista. Puedo colgar la foto en cualquier lugar que quiera en la pared. Del mismo modo, puedo poner una vista en cualquier lugar que desee dentro de una vista principal (también llamada supervista). La vista principal es como el muro. El origen del sistema de coordenadas en iOS es la esquina superior izquierda. Podemos poner nuestra vista en el origen de la supervista configurando las coordenadas xy del marco de vista en (0, 0), que es como colgar nuestra imagen en la esquina superior izquierda de la pared. Para moverlo hacia la derecha, aumente x, para moverlo hacia abajo aumente y.
Para ayudarme a recordar los límites , pienso en una cancha de baloncesto donde a veces el baloncesto queda fuera de límites . Estás botando la pelota por toda la cancha de baloncesto, pero realmente no te importa dónde está la cancha. Podría ser en un gimnasio, o afuera en una escuela secundaria, o en frente de su casa. No importa. Solo quieres jugar baloncesto. Del mismo modo, el sistema de coordenadas para los límites de una vista solo se preocupa por la vista misma. No sabe nada acerca de dónde se encuentra la vista en la vista principal. El origen de los límites (punto (0, 0) por defecto) es la esquina superior izquierda de la vista. Cualquier subvista que tenga esta vista se presenta en relación con este punto. Es como llevar el baloncesto a la esquina delantera izquierda de la cancha.
Ahora la confusión surge cuando intentas comparar marcos y límites. Sin embargo, en realidad no es tan malo como parece al principio. Usemos algunas imágenes para ayudarnos a entender.
Frame vs Bounds
En la primera imagen a la izquierda tenemos una vista que se encuentra en la parte superior izquierda de su vista principal. El rectángulo amarillo representa el marco de la vista. A la derecha vemos la vista nuevamente, pero esta vez la vista principal no se muestra. Esto se debe a que los límites no conocen la vista principal. El rectángulo verde representa los límites de la vista. El punto rojo en ambas imágenes representa el origen del marco o los límites.
Frame
origin = (0, 0)
width = 80
height = 130
Bounds
origin = (0, 0)
width = 80
height = 130
Entonces, el marco y los límites eran exactamente los mismos en esa imagen. Veamos un ejemplo en el que son diferentes.
Frame
origin = (40, 60) // That is, x=40 and y=60
width = 80
height = 130
Bounds
origin = (0, 0)
width = 80
height = 130
Entonces puede ver que al cambiar las coordenadas xy del marco se mueve en la vista principal. Pero el contenido de la vista en sí todavía se ve exactamente igual. Los límites no tienen idea de que algo es diferente.
Hasta ahora, el ancho y la altura del marco y los límites han sido exactamente los mismos. Sin embargo, eso no siempre es cierto. Mira lo que sucede si giramos la vista 20 grados en sentido horario. (La rotación se realiza mediante transformaciones. Consulte la documentación y estos ejemplos de vista y capa para obtener más información).
Frame
origin = (20, 52) // These are just rough estimates.
width = 118
height = 187
Bounds
origin = (0, 0)
width = 80
height = 130
Puedes ver que los límites siguen siendo los mismos. ¡Todavía no saben que ha sucedido nada! Sin embargo, los valores del cuadro han cambiado.
Ahora es un poco más fácil ver la diferencia entre marco y límites, ¿no? El artículo Probablemente no comprende los marcos y límites define un marco de vista como
... el cuadro delimitador más pequeño de esa vista con respecto a su sistema de coordenadas primario, incluidas las transformaciones aplicadas a esa vista.
Es importante tener en cuenta que si transforma una vista, el marco queda indefinido. Entonces, en realidad, el marco amarillo que dibujé alrededor de los límites verdes rotados en la imagen de arriba nunca existe. Eso significa que si gira, escala o realiza alguna otra transformación, ya no debería usar los valores del marco. Sin embargo, aún puede usar los valores de límites. Los documentos de Apple advierten:
Importante: Si la transformpropiedad de una vista no contiene la transformación de identidad, el marco de esa vista es indefinido y también lo son los resultados de sus comportamientos de autorización.
Más bien desafortunado sobre el autoresizing ... Sin embargo, hay algo que puede hacer.
Los documentos de Apple indican:
Al modificar la transformpropiedad de su vista, todas las transformaciones se realizan en relación con el punto central de la vista.
Entonces, si necesita mover una vista en el padre después de que se haya realizado una transformación, puede hacerlo cambiando las view.centercoordenadas. Al igual que frame, centerutiliza el sistema de coordenadas de la vista principal.
Ok, eliminemos nuestra rotación y centrémonos en los límites. Hasta ahora, el origen de los límites siempre se ha mantenido en (0, 0). Sin embargo, no tiene que hacerlo. ¿Qué pasa si nuestra vista tiene una gran subvista que es demasiado grande para mostrarla de una vez? Lo haremos UIImageViewcon una imagen grande. Aquí está nuestra segunda imagen desde arriba nuevamente, pero esta vez podemos ver cómo se vería todo el contenido de la subvista de nuestra vista.
Frame
origin = (40, 60)
width = 80
height = 130
Bounds
origin = (0, 0)
width = 80
height = 130
Solo la esquina superior izquierda de la imagen puede caber dentro de los límites de la vista. Ahora mira lo que sucede si cambiamos las coordenadas de origen de los límites.
Frame
origin = (40, 60)
width = 80
height = 130
Bounds
origin = (280, 70)
width = 80
height = 130
El marco no se ha movido en la supervista, pero el contenido dentro del marco ha cambiado porque el origen del rectángulo de límites comienza en una parte diferente de la vista. Esta es toda la idea detrás UIScrollViewde ay sus subclases (por ejemplo, a UITableView). Consulte Comprensión de UIScrollView para obtener más explicaciones.
Cuándo usar frame y cuándo usar límites
Como framerelaciona la ubicación de una vista en su vista principal, la usa cuando realiza cambios externos , como cambiar su ancho o encontrar la distancia entre la vista y la parte superior de su vista principal.
Use boundscuando realice cambios internos , como dibujar cosas u organizar subvistas dentro de la vista. También use los límites para obtener el tamaño de la vista si ha realizado alguna transfusión en ella.
Artículos para futuras investigaciones:
Documentos de Apple
Preguntas relacionadas sobre StackOverflow
Otros recursos
Practica tu mismo
Además de leer los artículos anteriores, me ayuda mucho hacer una aplicación de prueba. Es posible que desee intentar hacer algo similar. (Se me ocurrió la idea de este video curso pero desafortunadamente no es gratis).
Aquí está el código para su referencia:
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var myView: UIView!
// Labels
@IBOutlet weak var frameX: UILabel!
@IBOutlet weak var frameY: UILabel!
@IBOutlet weak var frameWidth: UILabel!
@IBOutlet weak var frameHeight: UILabel!
@IBOutlet weak var boundsX: UILabel!
@IBOutlet weak var boundsY: UILabel!
@IBOutlet weak var boundsWidth: UILabel!
@IBOutlet weak var boundsHeight: UILabel!
@IBOutlet weak var centerX: UILabel!
@IBOutlet weak var centerY: UILabel!
@IBOutlet weak var rotation: UILabel!
// Sliders
@IBOutlet weak var frameXSlider: UISlider!
@IBOutlet weak var frameYSlider: UISlider!
@IBOutlet weak var frameWidthSlider: UISlider!
@IBOutlet weak var frameHeightSlider: UISlider!
@IBOutlet weak var boundsXSlider: UISlider!
@IBOutlet weak var boundsYSlider: UISlider!
@IBOutlet weak var boundsWidthSlider: UISlider!
@IBOutlet weak var boundsHeightSlider: UISlider!
@IBOutlet weak var centerXSlider: UISlider!
@IBOutlet weak var centerYSlider: UISlider!
@IBOutlet weak var rotationSlider: UISlider!
// Slider actions
@IBAction func frameXSliderChanged(sender: AnyObject) {
myView.frame.origin.x = CGFloat(frameXSlider.value)
updateLabels()
}
@IBAction func frameYSliderChanged(sender: AnyObject) {
myView.frame.origin.y = CGFloat(frameYSlider.value)
updateLabels()
}
@IBAction func frameWidthSliderChanged(sender: AnyObject) {
myView.frame.size.width = CGFloat(frameWidthSlider.value)
updateLabels()
}
@IBAction func frameHeightSliderChanged(sender: AnyObject) {
myView.frame.size.height = CGFloat(frameHeightSlider.value)
updateLabels()
}
@IBAction func boundsXSliderChanged(sender: AnyObject) {
myView.bounds.origin.x = CGFloat(boundsXSlider.value)
updateLabels()
}
@IBAction func boundsYSliderChanged(sender: AnyObject) {
myView.bounds.origin.y = CGFloat(boundsYSlider.value)
updateLabels()
}
@IBAction func boundsWidthSliderChanged(sender: AnyObject) {
myView.bounds.size.width = CGFloat(boundsWidthSlider.value)
updateLabels()
}
@IBAction func boundsHeightSliderChanged(sender: AnyObject) {
myView.bounds.size.height = CGFloat(boundsHeightSlider.value)
updateLabels()
}
@IBAction func centerXSliderChanged(sender: AnyObject) {
myView.center.x = CGFloat(centerXSlider.value)
updateLabels()
}
@IBAction func centerYSliderChanged(sender: AnyObject) {
myView.center.y = CGFloat(centerYSlider.value)
updateLabels()
}
@IBAction func rotationSliderChanged(sender: AnyObject) {
let rotation = CGAffineTransform(rotationAngle: CGFloat(rotationSlider.value))
myView.transform = rotation
updateLabels()
}
private func updateLabels() {
frameX.text = "frame x = \(Int(myView.frame.origin.x))"
frameY.text = "frame y = \(Int(myView.frame.origin.y))"
frameWidth.text = "frame width = \(Int(myView.frame.width))"
frameHeight.text = "frame height = \(Int(myView.frame.height))"
boundsX.text = "bounds x = \(Int(myView.bounds.origin.x))"
boundsY.text = "bounds y = \(Int(myView.bounds.origin.y))"
boundsWidth.text = "bounds width = \(Int(myView.bounds.width))"
boundsHeight.text = "bounds height = \(Int(myView.bounds.height))"
centerX.text = "center x = \(Int(myView.center.x))"
centerY.text = "center y = \(Int(myView.center.y))"
rotation.text = "rotation = \((rotationSlider.value))"
}
}
