Las propiedades frame y bounds de un UIView son ambas de tipo CGRect. Es decir, las dos tienen coordenadas x e y que definen su posición, y un tamaño definido mediante el ancho (width) y el alto (height) de la vista.
Dicho de otro modo, ambas representan un rectángulo.
A simple vista, podemos pensar que las dos propiedades son lo mismo y que las podemos utilizar indistintamente. Pero no. Tienen una sutil diferencia.
Esta pregunta es muy común en entrevistas a desarrolladores iOS, así que… ¡Empezamos!
¿Cuál es la diferencia entre frame y bounds?
La propiedad frame se refiere a las coordenadas y tamaño relativos a la vista contenedora o vista padre, mientras que la propiedad bounds se refiere a las coordenadas y tamaño relativos a la propia vista.
Pongamos cuatro diferentes ejemplos para entender esto a la perfección.
Ejemplo 1: frame y bounds coinciden
En este ejemplo, el rectángulo azul es la vista contenedora o vista padre, y el cuadrado naranja una subvista.
El cuadrado mide 200 puntos de ancho y de alto. Se coloca en la esquina superior izquierda del rectángulo azul, es decir, en la coordenada x: 0, y: 0
En
UIKit, la esquina superior izquierda es la coordenadax: 0, y: 0.
En este caso, ambas propiedades tienen el mismo valor, ya que las coordenadas relativas a la super-clase y a sí mismas coinciden.
frame:x: 0, y: 0, width: 200, height: 200bounds:x: 0, y: 0, width: 200, height: 200
Ejemplo 2: trasladamos el cuadrado azul
En este ejemplo movemos el cuadrado 100 puntos hacia la derecha y 100 puntos hacia abajo. Dicho de otro modo, movemos 100 puntos las cordenadas x e y:
Ahora las propiedades frame y bounds tienen propiedades diferentes, ya que el cuadrado naranja ha cambiado su posición respecto a su vista contenedora o vista padre:
frame:x: 100, y: 100, width: 200, height: 200bounds:x: 0, y: 0, width: 200, height: 200
Ejemplo 3: Rotamos el cuadrado azul 45º
Desde la posición inicial en el Ejemplo 1, rotamos el cuadrado 45º en dirección a las agujas del reloj.
Ahora, su frame, es decir, el rectángulo que define su posición y tamaño respecto a la vista padre, crece hasta tener un lado tan largo como la diagonal del cuadrado. En la imagen, el frame se representa mediante el cuadrado de lineas discontinuas:
Ahora los valores en este caso serán:
frame:x: 0, y: 0, width: 282, height: 282bounds:x: 0, y: 0, width: 200, height: 200
Ejemplo 4: Rotamos y trasladamos el cuadrado azul
Por último, rotamos 45º y trasladamos 100 puntos:
En este último ejemplo donde aplicas los cambios del punto 2 y 3, los valores quedan así:
frame:x: 100, y: 100, width: 282, height: 282bounds:x: 0, y: 0, width: 200, height: 200
Conclusión
Tanto framecomo bounds son propiedades que todas las UIView poseen. Ambas representan un rectángulo, definido por sus coordenadas y tamaño.
La propiedad frame representa el rectángulo relativo a la vista contenedora, mientras que bounds representa el rectángulo relativo a sí mismo.
Cuando queremos modificar la altura o anchura de una vista, lo ideal es modificar sus bounds y dejar que UIKit calcule el frame.
Con todas estas variantes espero que te hayan quedado claras las diferencias entre ambas, y en tu próxima iOS Developer interview impresiones a tus entrevistadores. Si tienes cualquier duda, no dudes en escribirme un comentario.
Y si te ha gustado el artículo, ¿me harías un favor compartiéndolo en tus redes sociales?