web-dev-qa-db-fra.com

Comment créer une image d'arrière-plan à l'échelle de la taille de l'écran rapidement?

J'essaie de créer une image UIView pour mon arrière-plan dans Swift à l'aide d'une image de motif. Le code que je possède fonctionne bien, sauf que je veux que l’image occupe tout l’écran. Mon code ressemble à ceci: self.view.backgroundColor = UIColor(patternImage: UIImage(named: "backgroundImage")!)

Est-ce que quelqu'un sait comment faire de l’arrière-plan une image qui occupera tout l’écran, et qui pourrait changer d’échelle lorsqu’il apparaît sur différentes tailles d’écran d’iPhone?

iosswiftxcodebackground-image
23
GuiGui23

Notez que:

J'ai posté cette réponse à partir de mon ancien compte (ce qui est obsolète pour moi et je ne peux plus y accéder), ceci est ma meilleure réponse .

Vous pouvez le faire par programme au lieu de créer un IBOutlet dans chaque vue . Créez simplement un UIView extension (Fichier -> Nouveau -> Fichier -> Swift Fichier -> nommez-le comme vous voulez) et ajoutez:

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)
}}

Maintenant, vous pouvez utiliser cette méthode avec vos vues, par exemple:

override func viewDidLoad() {
    super.viewDidLoad()

    self.view.addBackground()
}
33
Ahmad Fayyas

Ajoutez simplement votre UIImageView positionné centré et avec toutes les arêtes se caler sur les arêtes. Laissez-le là et Cliquez sur le coin en bas à droite, comme indiqué ci-dessous, et continuez avec ajoutez 4 contraintes aux bords supérieur, inférieur, gauche et droit.

enter image description here

Maintenant, sélectionnez votre vue et utilisez l'inspecteur de l'IB pour sélectionner .___. vous souhaitez que votre image: remplisse ou s'adapte comme vous pouvez le voir comme suit:

enter image description here

24
Leo Dabus

Ceci est la réponse mise à jour de mon précédent .

Comme dans la même approche que dans ma réponse précédente, vous pouvez créer une extension de UIView et y ajouter la méthode addBackground(), comme suit:

Souvenez-vous: si vous l'ajoutez dans un nouveau fichier .Swift, n'oubliez pas d'ajouter import UIKit

extension UIView {
    func addBackground(imageName: String = "YOUR DEFAULT IMAGE NAME", contentMode: UIView.ContentMode = .scaleToFill) {
        // setup the UIImageView
        let backgroundImageView = UIImageView(frame: UIScreen.main.bounds)
        backgroundImageView.image = UIImage(named: imageName)
        backgroundImageView.contentMode = contentMode
        backgroundImageView.translatesAutoresizingMaskIntoConstraints = false

        addSubview(backgroundImageView)
        sendSubviewToBack(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])
    }
}

Notez que les mises à jour pour cette réponse sont:

  • Swift 4 code ????
  • Ajout de -programically- NSLayoutConstraints: c'est parce que lorsque j'applique ce que j'ai mentionné dans ma réponse précédente, cela fonctionne bien pour l'orientation actuelle du périphérique, mais pas lorsque l'application prend en charge les modes portrait/paysage, si le périphérique l’orientation a été modifiée, la taille de l’image d’image de fond sera la même (même taille) et ne s'adapte pas à la nouvelle largeur/hauteur de l’écran du périphérique; l’ajout de contraintes devrait donc résoudre ce problème.
  • Ajout de paramètres par défaut: pour plus de flexibilité, vous voudrez peut-être parfois changer l'image par défaut ou même le mode de contexte pour votre arrière-plan:

Utilisation:

En supposant que vous souhaitiez l'appeler dans 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(contentMode: .scaleAspectFit)

    // 4- this will add it with the default imageName and edited contextMode
    view.addBackground(imageName: "NEW IMAGE NAME", contextMode: .scaleAspectFit)
}
13
Ahmad F

Solution Ahmad Fayyas dans 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)
}
1
ochhii

Voici vos options pour la mise à l'échelle!

Pour la propriété .contentMode: 

ScaleToFill Ceci redimensionnera l'image à l'intérieur de la vue d'image pour remplir toutes les limites de la vue d'image.

ScaleAspectFit Ceci garantira que l’image dans la vue d’image aura le bon format d’aspect et s’intégrera dans les limites de la vue.

ScaleAspectFill Cela garantira que l'image dans la vue d'image aura le bon rapport d'aspect et remplira toutes les limites de la vue d'image. Pour que cette valeur fonctionne correctement, assurez-vous que vous avez défini la propriété clipsToBounds de la vue image sur 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)
1
MacInnis

Ceci utilise PureLayout . Vous pouvez simplement utiliser AutoLayout avec quelques lignes supplémentaires.

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

J'ai utilisé des contraintes pour rendre l'image "autoLayout". J'ai créé une vue pour afficher un indicateur d'activité (avec une image d'arrière-plan complète) pendant le chargement de la vue en séquence. Le code est comme suit.

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()
}

C'est le code de la fonction "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])
}

Dans la fonction indiquée ci-dessus, j'ai "lié" les contraintes de conteneurView aux contraintes de vue principales, rendant ainsi la vue "à la taille normale". J'ai fait la même chose pour UIImageView et ai également défini le contentMode sur AspectFill - c'est essentiel, car nous voulons que l'image remplisse le contenu sans l'étirer.

Pour supprimer la vue, après le chargement différé, utilisez simplement le code ci-dessous.

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

` 

CGRect screenRect = [[UIScreen mainScreen] bounds];

CGFloat screenWidth = screenRect.size.width;

CGFloat screenHeight = screenRect.size.height;

_imgBackGround.frame = CGRectMake(0, 0, screenWidth, screenHeight);`
0
Robert William Clancy

Pour cela, je pense que vous devrez créer un UIImageView qui sera épinglé aux vues parent haut/bas/gauche/droite. UIImageView sera alors toujours la même que la taille de l’affichage. Assurez-vous simplement que vous définissez le mode contenu de la vue image sur 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]];
0
wottle