Alexandre Freire

Blog sobre desarrollo en Swift, iOS y Xcode

Diferencia entre Frame y Bounds en Swift

Mar 18, 2020

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 coordenada x: 0, y: 0.

por defecto

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: 200
  • bounds: 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:

traslación

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: 200
  • bounds: 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:

rotación

Ahora los valores en este caso serán:

  • frame: x: 0, y: 0, width: 282, height: 282
  • bounds: x: 0, y: 0, width: 200, height: 200

Ejemplo 4: Rotamos y trasladamos el cuadrado azul

Por último, rotamos 45º y trasladamos 100 puntos:

rotación y traslación

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: 282
  • bounds: 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?

¿Me ayudas a compartir en redes sociales?
Share on Facebook
Facebook
Pin on Pinterest
Pinterest
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Buffer this page
Buffer
Share on Reddit
Reddit

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *