UIView marco, límites y centro

Me gustaría saber cómo usar estas propiedades de la manera correcta.

Según tengo entendido, framese puede usar desde el contenedor de la vista que estoy creando. Establece la posición de la vista en relación con la vista del contenedor. También establece el tamaño de esa vista.

También centerse puede usar desde el contenedor de la vista que estoy creando. Esta propiedad cambia la posición de la vista en relación con su contenedor.

Finalmente, boundses relativo a la vista en sí. Cambia el área dibujable para la vista.

¿Puedes dar más información sobre la relación entre framey bounds? ¿Qué pasa con el clipsToBoundsy las masksToBoundspropiedades?

Como la pregunta que hice se ha visto muchas veces, proporcionaré una respuesta detallada. Siéntase libre de modificarlo si desea agregar más contenido correcto.

Primero un resumen de la pregunta: marco, límites y centro y sus relaciones.

El marco de una vista frame( CGRect) es la posición de su rectángulo en el superviewsistema de coordenadas. Por defecto comienza en la esquina superior izquierda.

Límites Una vista bounds( CGRect) expresa un rectángulo de vista en su propio sistema de coordenadas.

El Centro A centerse CGPointexpresa en términos del superviewsistema de coordenadas del 's y determina la posición del punto central exacto de la vista.

Tomados de la posición UIView +, estas son las relaciones (no funcionan en código ya que son ecuaciones informales) entre las propiedades anteriores:

• frame.origin = center - (bounds.size / 2.0)

• center = frame.origin + (bounds.size / 2.0)

• frame.size = bounds.size

NOTA: Estas relaciones no se aplican si las vistas se giran. Para más información, le sugiero que eche un vistazo a la siguiente imagen tomada de The Kitchen Drawer basada en el curso Stanford CS193p . Los créditos van a @Rhubarb .

El uso de le framepermite reposicionar y / o cambiar el tamaño de una vista dentro de ella superview. Por lo general, se puede usar desde superview, por ejemplo, cuando crea una subvista específica. Por ejemplo:

// view1 will be positioned at x = 30, y = 20 starting the top left corner of [self view]
// [self view] could be the view managed by a UIViewController
UIView* view1 = [[UIView alloc] initWithFrame:CGRectMake(30.0f, 20.0f, 400.0f, 400.0f)];    
view1.backgroundColor = [UIColor redColor];

[[self view] addSubview:view1];

Cuando necesita las coordenadas para dibujar dentro de un view, generalmente se refiere bounds. Un ejemplo típico podría ser dibujar dentro de viewuna subvista como una inserción de la primera. Dibujar la subvista requiere conocer la boundsde la supervista. Por ejemplo:

UIView* view1 = [[UIView alloc] initWithFrame:CGRectMake(50.0f, 50.0f, 400.0f, 400.0f)];    
view1.backgroundColor = [UIColor redColor];

UIView* view2 = [[UIView alloc] initWithFrame:CGRectInset(view1.bounds, 20.0f, 20.0f)];    
view2.backgroundColor = [UIColor yellowColor];

[view1 addSubview:view2];

Se producen diferentes comportamientos cuando cambia la boundsvista. Por ejemplo, si cambia el bounds size, los framecambios (y viceversa). El cambio ocurre alrededor centerde la vista. Use el código a continuación y vea qué sucede:

NSLog(@"Old Frame %@", NSStringFromCGRect(view2.frame));
NSLog(@"Old Center %@", NSStringFromCGPoint(view2.center));    

CGRect frame = view2.bounds;
frame.size.height += 20.0f;
frame.size.width += 20.0f;
view2.bounds = frame;

NSLog(@"New Frame %@", NSStringFromCGRect(view2.frame));
NSLog(@"New Center %@", NSStringFromCGPoint(view2.center));

Además, si cambia bounds origin, cambia el originde su sistema de coordenadas interno. Por defecto, originestá en (0.0, 0.0)(esquina superior izquierda). Por ejemplo, si cambia el originpara view1, puede ver (comente el código anterior si lo desea) que ahora la esquina superior izquierda view2toca el view1. La motivación es bastante simple. Usted dice a view1que su esquina superior izquierda ahora está en la posición (20.0, 20.0)pero ya que view2's frame originse inicia a partir (20.0, 20.0), ellos coinciden.

CGRect frame = view1.bounds;
frame.origin.x += 20.0f;
frame.origin.y += 20.0f;
view1.bounds = frame; 

El originrepresenta la viewposición del 's dentro de su superviewpero describe la posición delbounds centro.

Finalmente, boundsy originno son conceptos relacionados. Ambos permiten derivar el framede una vista (Ver ecuaciones anteriores).

Estudio de caso de View1

Esto es lo que sucede cuando se usa el siguiente fragmento.

UIView* view1 = [[UIView alloc] initWithFrame:CGRectMake(30.0f, 20.0f, 400.0f, 400.0f)];
view1.backgroundColor = [UIColor redColor];

[[self view] addSubview:view1];

NSLog(@"view1's frame is: %@", NSStringFromCGRect([view1 frame]));
NSLog(@"view1's bounds is: %@", NSStringFromCGRect([view1 bounds]));
NSLog(@"view1's center is: %@", NSStringFromCGPoint([view1 center]));

La imagen relativa.

Esto, en cambio, es lo que sucede si cambio [self view]límites como el siguiente.

// previous code here...
CGRect rect = [[self view] bounds];
rect.origin.x += 30.0f;
rect.origin.y += 20.0f;
[[self view] setBounds:rect];

La imagen relativa.

Aquí dices [self view]que su esquina superior izquierda ahora está en la posición (30.0, 20.0) pero desdeview1 el origen del cuadro comienza desde (30.0, 20.0), coincidirán.

Referencias adicionales (para actualizar con otras referencias si lo desea)

• Geometría UIView
• Marcos y límites UIView

Acerca de clipsToBounds(fuente de Apple doc)

Establecer este valor en SÍ hace que las subvistas se recorten en los límites del receptor. Si se establece en NO, las subvistas cuyos marcos se extienden más allá de los límites visibles del receptor no se recortan. El valor predeterminado es no.

En otras palabras, si una vista framees (0, 0, 100, 100)y su subvista es (90, 90, 30, 30), solo verá una parte de esa subvista. Este último no excederá los límites de la vista principal.

masksToBoundses equivalente a clipsToBounds. En lugar de a UIView, esta propiedad se aplica a a CALayer. Debajo del capó, clipsToBoundsllamadas masksToBounds. Para más referencias eche un vistazo a ¿Cómo es la relación entre los clipsToBounds de UIView y las máscarasToBounds de CALayer? .

Esta pregunta ya tiene una buena respuesta, pero quiero complementarla con algunas fotos más. Mi respuesta completa está aquí.

Para ayudarme a recordar el marco , pienso en un marco en una pared . Al igual que una imagen se puede mover a cualquier parte de la pared, el sistema de coordenadas del marco de una vista es la supervista. (pared = supervista, marco = vista)

Para ayudarme a recordar los límites , pienso en los límites de una cancha de baloncesto . La pelota de baloncesto está en algún lugar dentro de la cancha, al igual que el sistema de coordenadas de los límites de la vista está dentro de la vista misma. (cancha = vista, baloncesto / jugadores = contenido dentro de la vista)

Al igual que el marco, view.center también está en las coordenadas de la supervista.

Frame vs Bounds - Ejemplo 1

El rectángulo amarillo representa el marco de la vista. El rectángulo verde representa los límites de la vista. El punto rojo en ambas imágenes representa el origen del marco o límites dentro de sus sistemas de coordenadas.

Frame
    origin = (0, 0)
    width = 80
    height = 130

Bounds 
    origin = (0, 0)
    width = 80
    height = 130

Ejemplo 2

Frame
    origin = (40, 60)  // That is, x=40 and y=60
    width = 80
    height = 130

Bounds 
    origin = (0, 0)
    width = 80
    height = 130

Ejemplo 3

Frame
    origin = (20, 52)  // These are just rough estimates.
    width = 118
    height = 187

Bounds 
    origin = (0, 0)
    width = 80
    height = 130

Ejemplo 4

Esto es lo mismo que en el ejemplo 2, excepto que esta vez todo el contenido de la vista se muestra como se vería si no estuviera recortado en los límites de la vista.

Frame
    origin = (40, 60)
    width = 80
    height = 130

Bounds 
    origin = (0, 0)
    width = 80
    height = 130

Ejemplo 5

Frame
    origin = (40, 60)
    width = 80
    height = 130

Bounds 
    origin = (280, 70)
    width = 80
    height = 130

Nuevamente, vea aquí mi respuesta con más detalles.

Encontré esta imagen más útil para comprender el marco, los límites, etc.

También tenga en cuenta que frame.size != bounds.sizecuando se gira la imagen.

Creo que si lo piensas desde el punto de vista CALayer, todo está más claro.

El marco no es realmente una propiedad distinta de la vista o capa, es una propiedad virtual, calculada a partir de los límites, la posición (UIView centro de ') y la transformación.

Entonces, básicamente, cómo los diseños de capa / vista realmente se deciden por estas tres propiedades (y anchorPoint), y cualquiera de estas tres propiedades no cambiará ninguna otra propiedad, como cambiar la transformación no cambia los límites.

Hay muy buenas respuestas con una explicación detallada de esta publicación. Solo me gustaría referirme a que hay otra explicación con representación visual para el significado de Frame, Bounds, Center, Transform, Bounds Origin en el video WWDC 2011 Comprensión de la representación UIKit a partir de las 4: 22 hasta las 20:10

Después de leer las respuestas anteriores, aquí agrego mis interpretaciones.

Supongamos que navega en línea, su navegador web es el frameque decide dónde y qué tan grande mostrar la página web. El desplazador del navegador es el bounds.originque decide qué parte de la página web se mostrará. bounds.originEs dificil de entender. La mejor manera de aprender es creando una aplicación de vista única, intentando modificar estos parámetros y ver cómo cambian las subvistas.

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(100.0f, 200.0f, 200.0f, 400.0f)];
[view1 setBackgroundColor:[UIColor redColor]];

UIView *view2 = [[UIView alloc] initWithFrame:CGRectInset(view1.bounds, 20.0f, 20.0f)];
[view2 setBackgroundColor:[UIColor yellowColor]];
[view1 addSubview:view2];

[[self view] addSubview:view1];

NSLog(@"Old view1 frame %@, bounds %@, center %@", NSStringFromCGRect(view1.frame), NSStringFromCGRect(view1.bounds), NSStringFromCGPoint(view1.center));
NSLog(@"Old view2 frame %@, bounds %@, center %@", NSStringFromCGRect(view2.frame), NSStringFromCGRect(view2.bounds), NSStringFromCGPoint(view2.center));

// Modify this part.
CGRect bounds = view1.bounds;
bounds.origin.x += 10.0f;
bounds.origin.y += 10.0f;

// incase you need width, height
//bounds.size.height += 20.0f;
//bounds.size.width += 20.0f;

view1.bounds = bounds;

NSLog(@"New view1 frame %@, bounds %@, center %@", NSStringFromCGRect(view1.frame), NSStringFromCGRect(view1.bounds), NSStringFromCGPoint(view1.center));
NSLog(@"New view2 frame %@, bounds %@, center %@", NSStringFromCGRect(view2.frame), NSStringFromCGRect(view2.bounds), NSStringFromCGPoint(view2.center));