Como cambiar el tamaño de un UiView y todos sus subviews en swift 5 (escalando la vista y las subvistas)
Primero tomemos en cuenta unos conceptos que son necesarios para realizar esta acción.
Las vistas son los bloques de construcción fundamentales de la interfaz de usuario en la aplicación, y la clase UIView define los comportamientos que son comunes a todas las vistas. Un objeto de vista representa contenido dentro de su rectángulo de límites y maneja cualquier interacción con ese contenido.
Entonces Debido a que los objetos de visualización son la forma principal en que la aplicación interactúa con el usuario, esta tiene una serie de trabajos que puede realizar, las cuales puede ser:
Dibujo y Animación
Las vistas dibujan contenido en su área rectangular usando UIKit o Core Graphics. Puede animar algunas propiedades de vista a nuevos valores.
Gestión de diseño y Subvista
Las vistas pueden contener cero o más subvistas.
Las vistas pueden ajustar el tamaño y la posición de sus subvistas.
Manejo de eventos
Una vista es una subclase de UIResponder y puede responder a toques y otros tipos de eventos. Las vistas pueden instalar reconocedores de gestos para manejar gestos comunes.
Nota: Una vista principal puede contener cualquier cantidad de subvistas, pero cada subvista tiene solo una supervista.
Entonces lo mas probable es que vayas a cualquiera de tus navegadores y busques algo parecido a esto "Cómo cambiar el tamaño de un UiView?" y vas a encontrar mucha información de como hacerlo, pero te darás cuenta que no funcionan correctamente o algunos ejemplos simplemente no funcionan.
Por Ejemplo podemos encontrar que un UiView se puede cambiar el tamaño de esta manera:
myView.frame = CGRect(x: 0, y: 0, width: "your width", height: "your height")
Ahora imaginemos que necesitamos cambiar el tamaño de una vista cuando la aplicación inicia, basado en el tipo de dispositivo que estamos usando actualmente. entonces tendríamos nuestro ViewController de esta manera:
class MyViewController: BaseViewController {
@IBOutlet weak var myView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
myView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
}
}
Nota: Recuerden que el tamaño del UiView lo tenemos especificado en nuestro storyboard y basado en el dispositivo queremos cambiar su tamaño.
Al ejecutar ese código y vas a tu emulador o dispositivo físico y no se ve ningún cambio en el tamaño de esa vista. Entonces investigando un poco más podrías encontrar que el manejo de un frame de una vista se lo realiza dentro de estos métodos: viewWillLayoutSubviews(), viewDidLayoutSubviews().
Y si seguimos buscando información encuentras que no es tan fácil manejar y mostrar todos los cambios que se realizan en todos los frame de las subvistas y vistas.
Entonces esta no seria la manera más eficaz de realizar esta tarea, pero entonces cual sería la mejor solución?
Primero: Tenemos que pensar en si la búsqueda de información es la correcta, porque en vez de buscar algo cómo "Como cambiar el tamaño de un UiView?" lo podemos buscar de esta manera: "Como escalar el tamaño de un UiView?"
Nota: recomiendo buscar este tipo de información en inglés, porque al buscar en español encontraremos mucha información obsoleta o aveces no encontramos nada.
Entonces al buscar la información en inglés podemos encontrar algo como esto:
myView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 2, 2)
// este es codigo antiguo.
// Podemos mejorar el código de esta manera:
myView.transform = CGAffineTransform(scaleX: 2, y: 2)
Ahora lo ideal es tratar de entender que hace el código, primero buscar la propiedad utilizada en esta información.
UiView.transform
Define las coordenadas del espacio del usuario.
Dentro de esta propiedad según la documentación de Apple, tiene varias funciones que podemos utilizar en este caso solo nos centraremos en una:
scaleBy(x: CGFloat, y: CGFloat)
Escala las operaciones de dibujo posteriores en una cantidad en cada dimensión.
Parámetro X: La cantidad a escalar en la dirección horizontal.
Parámetro Y: La cantidad a escalar en la dirección vertical.
En otras palabras cambia la escala del dibujado del UiView en cada dimensión que se le pasa como parámetro a esta función.
Entonces para resolver esta tarea simplemente nos queda tomar el tipo de dispositivo y basado en eso cambiar el tamaño de la vista requerida. Para esto usaremos un poco de código que nos ayuda a determinar que dispositivo es en el que estamos usando actualmente de este url: https://stackoverflow.com/a/26962452.
Entonces el código queda de esta manera:
class MyViewController: BaseViewController {
@IBOutlet weak var myView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
// here we handle the current device type
switch UIDevice().type {
case .iPhone11:
// this device has a big screen so we can resize the UiView to the double like this
myView.transform = CGAffineTransform(scaleX: 2, y: 2)
case .iPhoneSE:
// this device has a small screen so we can resize to the correct UiView size like this
// in this case we use the 70% of the original UiView size.
myView.transform = CGAffineTransform(scaleX: 0.7, y: 0.7)
default: break
}
}
}