¿Cómo se hace una escala de image de background para el tamaño de la pantalla de manera rápida?

Estoy intentando hacer una image de UIView para mi background rápidamente utilizando la image de patrón. El código que tengo funciona bien, excepto por el hecho de que quiero que la image tome toda la pantalla. Mi código se ve así: self.view.backgroundColor = UIColor(patternImage: UIImage(named: "backgroundImage")!)

¿Alguien sabe cómo hacer que el background sea una image que ocupe toda la pantalla y que se escalaría al aparecer en diferentes tamaños de pantalla de iPhone?

Tenga en count que:

Publiqué esta respuesta desde mi antigua count (que está en desuso para mí y ya no puedo acceder a ella), esta es mi respuesta mejorada .


Puede hacerlo mediante progtwigción en lugar de crear un IBOutlet en cada vista. simplemente cree una extensión UIView (Archivo -> Nuevo -> Archivo -> Archivo Swift -> asígnele el nombre que desee) y añada:

 extension UIView { func addBackground() { // screen width and height: let width = UIScreen.mainScreen().bounds.size.width let height = UIScreen.mainScreen().bounds.size.height let imageViewBackground = UIImageView(frame: CGRectMake(0, 0, width, height)) imageViewBackground.image = UIImage(named: "YOUR IMAGE NAME GOES HERE") // you can change the content mode: imageViewBackground.contentMode = UIViewContentMode.ScaleAspectFill self.addSubview(imageViewBackground) self.sendSubviewToBack(imageViewBackground) }} 

Ahora, puede usar este método con sus vistas, por ejemplo:

 override func viewDidLoad() { super.viewDidLoad() self.view.addBackground() } 

Simplemente agregue su UIImageView posicionado centrado y con todos los bordes ajustándose a los bordes. Déjelo allí y click la esquina inferior derecha como se muestra a continuación y ahora avance y agregue 4 restricciones a los bordes superior, inferior, izquierdo y derecho.

introduzca la descripción de la imagen aquí

Ahora simplemente select la vista de su image y con el inspector de IB, select cómo desea su image: llene o ajuste como puede ver como sigue:

introduzca la descripción de la imagen aquí

Esta es la respuesta actualizada de mi anterior .

Como el mismo enfoque de mi respuesta anterior, puede crear una extensión de UIView y agregarle el método addBackground() , de la siguiente manera:

Recuerde: si lo está agregando en un file .swift nuevo, recuerde agregar la import UIKit

 extension UIView { func addBackground(imageName: String = "YOUR DEFAULT IMAGE NAME", contextMode: UIViewContentMode = .scaleToFill) { // setup the UIImageView let backgroundImageView = UIImageView(frame: UIScreen.main.bounds) backgroundImageView.image = UIImage(named: imageName) backgroundImageView.contentMode = contentMode backgroundImageView.translatesAutoresizingMaskIntoConstraints = false addSubview(backgroundImageView) sendSubview(toBack: backgroundImageView) // adding NSLayoutConstraints let leadingConstraint = NSLayoutConstraint(item: backgroundImageView, attribute: .leading, relatedBy: .equal, toItem: self, attribute: .leading, multiplier: 1.0, constant: 0.0) let trailingConstraint = NSLayoutConstraint(item: backgroundImageView, attribute: .trailing, relatedBy: .equal, toItem: self, attribute: .trailing, multiplier: 1.0, constant: 0.0) let topConstraint = NSLayoutConstraint(item: backgroundImageView, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1.0, constant: 0.0) let bottomConstraint = NSLayoutConstraint(item: backgroundImageView, attribute: .bottom, relatedBy: .equal, toItem: self, attribute: .bottom, multiplier: 1.0, constant: 0.0) NSLayoutConstraint.activate([leadingConstraint, trailingConstraint, topConstraint, bottomConstraint]) } } 

Tenga en count que las actualizaciones para esta respuesta son:

  • Código Swift 3 🙂
  • Agregar -programáticamente- NSLayoutConstraints : esto se debe a que al aplicar lo mencionado en mi respuesta anterior, funciona bien para la orientación actual del dispositivo, pero no cuando la aplicación admite los modos vertical / horizontal, si la orientación del dispositivo se ha cambiado, la image de backgroundView el tamaño será el mismo (el mismo tamaño) y no se adaptará a la nueva anchura / altura de la pantalla del dispositivo, por lo que la adición de restricciones debería resolver este problema.
  • Adición de parameters pnetworkingeterminados: para get más flexibilidad, es posible que, a veces, desee cambiar la image pnetworkingeterminada o incluso el modo de context para su background:

Uso:

Suponiendo que desea llamarlo en viewDidLoad() :

 override func viewDidLoad() { //... // you can call 4 versions of addBackground() method // 1- this will add it with the default imageName and default contextMode view.addBackground() // 2- this will add it with the edited imageName and default contextMode view.addBackground(imageName: "NEW IMAGE NAME") // 3- this will add it with the default imageName and edited contextMode view.addBackground(contextMode: .scaleAspectFit) // 4- this will add it with the default imageName and edited contextMode view.addBackground(imageName: "NEW IMAGE NAME", contextMode: .scaleAspectFit) } 

Esto usa PureLayout . Puede usar AutoLayout con algunas líneas más.

 UIImageView* imgView = UIImageView(image: myUIImage) imgView.setTranslatesAutoresizingMaskIntoConstraints(false) self.view.addSubview(imgView) self.view.addConstraints(imgView.autoPinEdgesToSuperviewEdgesWithInsets(UIEdgeInsetsMake(0,0,0,0)) 

Para esto, creo que necesitarás crear un UIImageView que esté anclado a las vistas principales superior / inferior / izquierda / derecha. Esto hará que UIImageView siempre coincida con el tamaño de la pantalla. Simplemente asegúrese de configurar el modo de contenido en la image para que sea AspectFit

 var newImgThumb : UIImageView newImgThumb = UIImageView(view.bounds) newImgThumb.contentMode = .ScaleAspectFit view.addSubview(newImgThumb) //Don't forget this line newImgThumb.setTranslatesAutoresizingMaskIntoConstraints(false) NSDictionary *views =NSDictionaryOfVariableBindings(newImgThumb); // imageview fills the width of its superview [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[newImgThumb]|" options:0 metrics:metrics views:views]]; // imageview fills the height of its superview [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[newImgThumb]|" options:0 metrics:metrics views:views]]; 

¡Estas son sus opciones para escalar!

Para la propiedad .contentMode:

ScaleToFill Esto escalará la image dentro de la vista de la image para llenar los límites completos de la vista de la image.

ScaleAspectFit Esto asegurará que la image dentro de la vista de la image tenga la relación de aspecto correcta y que se ajuste dentro de los límites de la vista de la image.

ScaleAspectFill Esto asegurará que la image dentro de la vista de la image tenga la relación de aspecto correcta y que llene los límites completos de la vista de la image. Para que este valor funcione correctamente, asegúrese de haber establecido la propiedad clipsToBounds de imageview en true.

 class SecondViewController : UIViewController { let backgroundImage = UIImage(named: "centralPark") var imageView: UIImageView! override func viewDidLoad() { super.viewDidLoad() self.thirdChoiceField.delegate = self self.datePicker.minimumDate = NSDate() imageView = UIImageView(frame: view.bounds) imageView.contentMode = .ScaleAspectFill imageView.clipsToBounds = true imageView.image = backgroundImage imageView.center = view.center view.addSubview(imageView) self.view.sendSubviewToBack(imageView) 

Utilicé restricciones para hacer que la image "autoLayout". Hice una vista para mostrar un indicador de actividad (con image de background completa), mientras se carga la vista en Segue. El código es el siguiente.

 var containerView: UIView = UIView() var actionIndicator: UIActivityIndicatorView = UIActivityIndicatorView() private func showActivityIndicator() { ///first I set the containerView and the background image containerView.translatesAutoresizingMaskIntoConstraints = false self.view.addSubview(containerView) adjustConstFullSize(containerView, parentView: self.view) let backImage = UIImageView(image: UIImage(named: "AppBackImage")) backImage.contentMode = UIViewContentMode.ScaleAspectFill backImage.translatesAutoresizingMaskIntoConstraints = false containerView.addSubview(backImage) adjustConstFullSize(backImage, parentView: containerView) ////setting the spinner (activity indicator) actionIndicator.frame = CGRectMake(0.0, 0.0, 40.0, 40.0) actionIndicator.center = CGPointMake(containerView.bounds.size.width / 2, containerView.bounds.size.height / 2) actionIndicator.hidesWhenStopped = true actionIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.WhiteLarge containerView.insertSubview(actionIndicator, aboveSubview: backImage) ///throw the container to the main view view.addSubview(containerView) actionIndicator.startAnimating() } 

Este es el código para la function "adjustConstFullSize".

 func adjustConstFullSize(adjustedView: UIView!, parentView: UIView!) { let topConstraint = NSLayoutConstraint(item: adjustedView, attribute: .Top, relatedBy: .Equal, toItem: parentView, attribute: .Top, multiplier: 1.0, constant: 0.0) let leftConstraint = NSLayoutConstraint(item: adjustedView, attribute: .Leading, relatedBy: .Equal, toItem: parentView, attribute: .Leading, multiplier: 1.0, constant: 0.0) let rightConstraint = NSLayoutConstraint(item: adjustedView, attribute: .Trailing, relatedBy: .Equal, toItem: parentView, attribute: .Trailing, multiplier: 1.0, constant: 0.0) let bottomConstraint = NSLayoutConstraint(item: adjustedView, attribute: .Bottom, relatedBy: .Equal, toItem: parentView, attribute: .Bottom, multiplier: 1.0, constant: 0.0) parentView.addConstraints([topConstraint, leftConstraint, rightConstraint, bottomConstraint]) } 

En la function que se muestra arriba, "até" las restricciones containerView a las restricciones de la vista principal, haciendo que la vista sea "de tamaño completo". Hice lo mismo para UIImageView y también configuré contentMode a AspectFill, esto es crucial, porque queremos que la image llene el contenido sin estiramientos.

Para eliminar la vista, después de la carga perezosa, simplemente use el código a continuación.

 private func hideActivityIndicator() { actionIndicator.stopAnimating() containerView.removeFromSuperview() } 

 CGRect screenRect = [[UIScreen mainScreen] bounds]; CGFloat screenWidth = screenRect.size.width; CGFloat screenHeight = screenRect.size.height; _imgBackGround.frame = CGRectMake(0, 0, screenWidth, screenHeight);` 

Solución de Ahmad Fayyas en Swift 3.0 :

 func addBackground() { let width = UIScreen.main.bounds.size.width let height = UIScreen.main.bounds.size.height let imageViewBackground = UIImageView(frame: CGRect(x:0, y:0, width: width, height: height)) imageViewBackground.image = UIImage(named: "YOUR IMAGE NAME GOES HERE") // you can change the content mode: imageViewBackground.contentMode = UIViewContentMode.scaleAspectFill self.view.addSubview(imageViewBackground) self.view.sendSubview(toBack: imageViewBackground) }