cocoa - probabilidad - Cacao: ¿Cuál es la diferencia entre el marco y los límites?

introduccion ala probabilidad y estadistica mendenhall 13th pdf (7)

UIView y sus subclases tienen todas las propiedades de frame y bounds . ¿Cual es la diferencia?

Respuesta corta

marco = ubicación y tamaño de una vista usando el sistema de coordenadas de la vista principal

Importante para: colocar la vista en el padre.

límites = la ubicación y el tamaño de una vista utilizando su propio sistema de coordenadas

Importante para: colocar el contenido o subvistas de la vista dentro de sí mismo

Respuesta detallada

Para ayudarme a recordar el marco , pienso en un marco de imagen en una pared . El marco de imagen es como el borde de una vista. Puedo colgar la foto donde quiera en la pared. De la misma manera, puedo colocar una vista en cualquier lugar que desee dentro de una vista principal (también llamada supervisión). La vista de los padres es como la pared. El origen del sistema de coordenadas en iOS es la parte superior izquierda. Podemos poner nuestra vista en el origen de la vista supervisada configurando las coordenadas xy del marco de vista en (0, 0), que es como colgar nuestra foto en la esquina superior izquierda de la pared. Para moverlo a la derecha, aumente x, para moverlo hacia abajo aumente y.

Para ayudarme a recordar límites , pienso en una cancha de básquetbol donde a veces el baloncesto queda fuera de juego . Estás driblando el balón por toda la cancha de baloncesto, pero realmente no te importa dónde está la cancha. Puede ser en un gimnasio, o afuera en una escuela secundaria, o en frente de su casa. No importa. Sólo quieres jugar al baloncesto. De la misma manera, el sistema de coordenadas para los límites de una vista solo se preocupa por la vista en sí. No sabe nada sobre 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 balón de baloncesto a la esquina frontal izquierda de la cancha.

Ahora la confusión viene cuando intentas comparar fotogramas y límites. Aunque en realidad no es tan malo como parece al principio. Vamos a usar algunas fotos para ayudarnos a entender.

Cuadro vs límites

En la primera imagen de 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 otra vez, pero esta vez la vista principal no se muestra. Eso es porque los límites no saben acerca de 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

Así que el cuadro y los límites eran exactamente iguales en esa imagen. Veamos un ejemplo donde 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

Así que puedes ver que cambiar las coordenadas xy del marco lo mueve en la vista principal. Pero el contenido de la vista en sí se ve exactamente igual. Los límites no tienen idea de que algo es diferente.

Hasta ahora, el ancho y el alto del marco y los límites han sido exactamente iguales. Sin embargo, eso no siempre es cierto. Mira lo que pasa si giramos la vista 20 grados hacia la derecha. (La rotación se realiza mediante transformaciones. Consulte la documentation y estos ejemplos de view 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 pasado nada! Sin embargo, todos los valores del cuadro han cambiado.

Ahora es un poco más fácil ver la diferencia entre marco y límites, ¿no es así? El artículo Probablemente no entiende 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 padre, incluidas las transformaciones aplicadas a esa vista.

Es importante tener en cuenta que si transforma una vista, entonces el marco se vuelve indefinido. Así que en realidad, el marco amarillo que dibujé alrededor de los límites verdes girados en la imagen de arriba nunca existe realmente. Eso significa que si giras, escalas o haces alguna otra transformación, entonces ya no deberías usar los valores de cuadro. Aun así, puedes usar los valores de los límites. Los documentos de Apple advierten:

Importante: si la propiedad de transform 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 puedes hacer.

El estado de Apple docs:

Al modificar la propiedad de transform de su vista, todas las transformaciones se realizan en relación con el punto central de la vista.

Por lo tanto, si necesita mover una vista en el padre después de que se haya realizado una transformación, puede hacerlo cambiando las coordenadas de view.center . Como frame , el center utiliza el sistema de coordenadas de la vista principal.

Ok, deshacámonos de nuestra rotación y enfoquémonos en los límites. Hasta ahora los límites de origen siempre se han mantenido en (0, 0). Aunque no tiene que hacerlo. ¿Qué sucede si nuestra vista tiene una subvista grande que es demasiado grande para mostrarla a la vez? Lo haremos un UIImageView con una imagen grande. Esta es nuestra segunda imagen desde arriba otra vez, 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 pasa 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 vista de supervisión, 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 de un UIScrollView y sus subclases (por ejemplo, un UITableView ). Vea Entendiendo UIScrollView para más explicación.

Cuándo usar el marco y cuándo usar los límites

Dado que el frame relaciona la ubicación de una vista en su vista primaria, la usa cuando está realizando cambios hacia afuera , como cambiar su ancho o encontrar la distancia entre la vista y la parte superior de su vista primaria.

Use los bounds cuando realice cambios hacia el interior , como dibujar cosas o organizar subvistas dentro de la vista. Utilice también los límites para obtener el tamaño de la vista si ha realizado alguna modificación en ella.

Artículos para futuras investigaciones:

Apple docs

Preguntas relacionadas sobre

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. (Tengo la idea de este curso de video, 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))" } }

El marco es el rectángulo que define el UIView con respecto a su superview .

Los límites rect es el rango de valores que definen el sistema de coordenadas de NSView.

Es decir, cualquier cosa en este rectángulo realmente se mostrará en la vista UIV.

Encuadre a su relativo a su SuperView mientras que Bounds relativo a su NSView.

Ejemplo: X = 40, Y = 60.También contiene 3 Vistas. Este Diagrama le muestra una idea clara.

Las respuestas anteriores han explicado muy bien la diferencia entre los límites y los marcos.

Límites: un tamaño y ubicación de vista según su propio sistema de coordenadas.
Marco: un tamaño de vista y una ubicación en relación con su SuperView.

Entonces hay confusión de que en el caso de los límites, la X, Y siempre será "0". Lo cual no es cierto . Esto se puede entender en UIScrollView y UICollectionView también.

Cuando los límites ''x, y no son 0.
Supongamos que tenemos un UIScrollView. Hemos implementado la paginación. El UIScrollView tiene 3 páginas y el ancho de su ContentSize es tres veces el ancho de la pantalla (Suponga que el ancho de pantalla es 320). La altura es constante (supongamos 200).

scrollView.contentSize = CGSize(x:320*3, y : 200)

Agregue tres UIImageViews como subvistas y observe de cerca el valor x del marco

let imageView0 = UIImageView.init(frame: CGRect(x:0, y: 0 , width : scrollView.frame.size.width, height : scrollView.frame.size.height)) let imageView1 : UIImageView.init( frame: CGRect(x:320, y: 0 , width : scrollView.frame.size.width, height : scrollView.frame.size.height)) let imageView2 : UIImageView.init(frame: CGRect(x:640, y: 0 , width : scrollView.frame.size.width, height : scrollView.frame.size.height)) scrollView.addSubview(imageView0) scrollView.addSubview(imageView0) scrollView.addSubview(imageView0)

Página 0: cuando ScrollView está en la página 0, los límites serán (x: 0, y: 0, ancho: 320, altura: 200)
Página 1: Desplácese y vaya a la página 1.
Ahora los límites serán (x: 320, y: 0, ancho: 320, altura: 200) Recuerda que dijimos con respecto a su propio sistema de coordenadas. Así que ahora la "Parte visible" de nuestro ScrollView tiene su "x" en 320. Mira el marco de imageView1.
Página 2: Desplácese y vaya a la página 2 Límites: (x: 640, y: 0, ancho: 320, altura: 200) De nuevo, observe el marco de imageView2

Igual es el caso de UICollectionView. La forma más fácil de ver collectionView es desplazarlo, imprimir / registrar sus límites y obtendrá la idea.

Los límites de una UIView son el rectangle , expresado como una ubicación (x, y) y tamaño (ancho, alto) en relación con su propio sistema de coordenadas (0,0).

El marco de una UIView es el rectangle , expresado como una ubicación (x, y) y un tamaño (ancho, alto) en relación con la superview que contiene.

Entonces, imagine una vista que tenga un tamaño de 100x100 (ancho x alto) posicionado a 25,25 (x, y) de su supervisión. El siguiente código imprime los límites y el marco de esta vista:

// This method is in the view controller of the superview - (void)viewDidLoad { [super viewDidLoad]; NSLog(@"bounds.origin.x: %f", label.bounds.origin.x); NSLog(@"bounds.origin.y: %f", label.bounds.origin.y); NSLog(@"bounds.size.width: %f", label.bounds.size.width); NSLog(@"bounds.size.height: %f", label.bounds.size.height); NSLog(@"frame.origin.x: %f", label.frame.origin.x); NSLog(@"frame.origin.y: %f", label.frame.origin.y); NSLog(@"frame.size.width: %f", label.frame.size.width); NSLog(@"frame.size.height: %f", label.frame.size.height); }

Y la salida de este código es:

bounds.origin.x: 0 bounds.origin.y: 0 bounds.size.width: 100 bounds.size.height: 100 frame.origin.x: 25 frame.origin.y: 25 frame.size.width: 100 frame.size.height: 100

Por lo tanto, podemos ver que en ambos casos, el ancho y el alto de la vista son los mismos, independientemente de si estamos mirando los límites o el marco. Lo que es diferente es el posicionamiento x, y de la vista. En el caso de los límites, las coordenadas x e y están en 0,0, ya que estas coordenadas son relativas a la vista en sí. Sin embargo, las coordenadas del marco x e y son relativas a la posición de la vista dentro de la vista principal (que anteriormente dijimos que estaba en 25,25).

También hay una gran presentación que cubre UIViews. Vea las diapositivas 1-20 que no solo explican la diferencia entre marcos y límites, sino que también muestran ejemplos visuales.

intenta ejecutar el siguiente código

- (void)viewDidLoad { [super viewDidLoad]; UIWindow *w = [[UIApplication sharedApplication] keyWindow]; UIView *v = [w.subviews objectAtIndex:0]; NSLog(@"%@", NSStringFromCGRect(v.frame)); NSLog(@"%@", NSStringFromCGRect(v.bounds)); }

La salida de este código es:

caso de la orientación del dispositivo es retrato

{{0, 0}, {768, 1024}} {{0, 0}, {768, 1024}}

caso de la orientación del dispositivo es el paisaje

{{0, 0}, {768, 1024}} {{0, 0}, {1024, 768}}

Obviamente, puedes ver la diferencia entre marco y límites.

el marco es el origen (esquina superior izquierda) y el tamaño de la vista en el sistema de coordenadas de su súper vista, esto significa que usted traduce la vista en su súper vista cambiando el origen del marco; Sistema de coordenadas propio, por lo que por defecto el origen de los límites es (0,0).

la mayoría de las veces, el cuadro y los límites son congruentes, pero si tiene una vista del cuadro ((140,65), (200,250)) y los límites ((0,0), (200,250) por ejemplo y la vista se inclinó de modo que quede en su esquina inferior derecha, los límites seguirán siendo ((0,0), (200,250)), pero el marco no lo es.

El marco será el rectángulo más pequeño que encapsula / rodea la vista, por lo que el marco (como en la foto) será ((140,65), (320,320)).

otra diferencia es, por ejemplo, si tiene un superView cuyos límites es ((0,0), (200,200) y este superView tiene un subView cuyo marco es ((20,20), (100,100)) y cambió los límites de superView a ((20,20), (200,200)), entonces el cuadro subView será todavía ((20,20), (100,100)) pero compensado por (20,20) porque su sistema de coordenadas de supervisión fue compensado por (20, 20).

Espero que esto ayude a alguien.