iOS
UIImageView

Créer un UIImageView

Pour créer un UIImageView programmation, il vous suffit de créer une instance de UIImageView :

//Swift
let imageView = UIImageView()

//Objective-C
UIImageView *imageView = [[UIImageView alloc] init];

Vous pouvez définir la taille et la position du UIImageView avec un CGRect :

//Swift
imageView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)

//Objective-C
imageView.frame = CGRectMake(0,0,200,200);

Ou vous pouvez définir la taille lors de l'initialisation:

//Swift
UIImageView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))

//Objective-C
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,200,200);

//Alternative way of defining frame for UIImageView
UIImageView *imageView = [[UIImageView alloc] init];
CGRect imageViewFrame = imageView.frame;
imageViewFrame.size.width = 200;
imageViewFrame.size.height = 200;
imageViewFrame.origin.x = 0;
imageViewFrame.origin.y = 0;
imageView.frame = imageViewFrame;

Remarque: Vous devez importer UIKit pour utiliser un UIImageView .

Assigner une image à un UIImageView

Vous pouvez affecter une image à un UIImageView lors de l'initialisation ou ultérieurement à l'aide de la propriété image :

//Swift
UIImageView(image: UIImage(named: "image1"))

UIImageView(image: UIImage(named: "image1"), highlightedImage: UIImage(named: "image2"))

imageView.image = UIImage(named: "image1") 

//Objective-C
[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image1"];

[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image1"] highlightedImage:[UIImage imageNamed:@"image2"]];

imageView.image = [UIImage imageNamed:@"image1"];

Animation d'un UIImageView

Vous pouvez animer un UIImageView en affichant rapidement les images dans une séquence en utilisant les propriétés d'animation de UIImageView :

imageView.animationImages = [UIImage(named: "image1")!,
                             UIImage(named: "image2")!,
                             UIImage(named: "image3")!,
                             UIImage(named: "image4")!,
                             UIImage(named: "image5")!,
                             UIImage(named: "image6")!,
                             UIImage(named: "image7")!,
                             UIImage(named: "image8")!] 
imageView.animationDuration = 0.3
imageView.animationRepeatCount = 1

La propriété animationImages est un Array de UIImages qui est exécuté de haut en bas lorsque l'animation est déclenchée.

La propriété animationDuration est un Double indiquant combien de secondes l'animation sera exécutée.

La propriété animationRepeatCount est un objet Int qui indique combien de fois l'animation sera exécutée.

Pour démarrer et arrêter l'animation, vous pouvez appeler les méthodes appropriées:

imageView.startAnimating()
imageView.stopAnimating()

Il existe une méthode isAnimating() qui renvoie une valeur Boolean indiquant si l'animation est en cours d'exécution ou non.

S'il vous plaît noter que ce n'est pas un moyen très efficace pour créer des animations: c'est assez lent et consommant beaucoup de ressources. Envisagez d'utiliser des calques ou des sprites pour de meilleurs résultats

Faire une image dans un cercle ou arrondi

Cet exemple montre comment créer un UIView ou un UIImageView , arrondi avec un rayon comme celui-ci:

Objectif c

someImageView.layer.cornerRadius = CGRectGetHeight(someImageView.frame) / 2;
someImageView.clipsToBounds = YES;

Rapide

someImageView.layer.cornerRadius = someImageView.frame.height/2
// this should alleviate the performance hit that adding transparency may cause - see http://stackoverflow.com/a/6254531/189804
// Be sure to check scrolling performance with Instruments if you take this approach.
someImageView.layer.shouldRasterize = true
someImageView.clipsToBounds = true // All parts of the image that are outside its bounds (the frame) are cut out (makes the rounded corners visible)

Il est suggéré que si vous utilisez autolayout que vous mettez le someImageView.layer.cornerRadius code viewDidLayoutSubviews . Cela permettra à cornerRadius l'image de se mettre à jour si l'image change de taille.

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    someImageView.layer.cornerRadius = someImageView.frame.size.width/2
    someImageView.layer.masksToBounds = true
}

UIImage masqué avec étiquette

Cela rend l'image masquée à la forme des lettres de l'étiquette:

Objectif c

self.maskImage.layer.mask = self.maskLabel.layer;
self.maskImage.layer.masksToBounds = YES;

Swift 3

maskImageView.mask = maskLabel
maskImageView.masksToBounds = true

Voici le résultat:

Changer la couleur d'une image

//Swift
imageView.tintColor = UIColor.redColor()
imageView.image = imageView.image?.imageWithRenderingMode(.AlwaysTemplate)

//Swift 3
imageView.tintColor = UIColor.red
imageView.image = imageView.image?.withRenderingMode(.alwaysTemplate)

//Objective-C
imageView.tintColor = [UIColor redColor];
imageView.image = [imageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]

Comment la propriété Mode affecte une image

La propriété mode de contenu d'une vue indique comment son contenu doit être présenté. Dans Interface Builder, les différents modes peuvent être sélectionnés dans l'inspecteur d'attributs.

Utilisons deux vues d'image pour voir comment fonctionnent les différents modes.

Echelle à remplir

Les hauteurs et les largeurs d'image sont étirées pour correspondre à la taille de UIImageView .

Aspect Fit

Le côté le plus long (hauteur ou largeur) de l'image est étiré pour correspondre à la vue. Cela rend l'image aussi grande que possible tout en affichant l'image entière sans déformer la hauteur ou la largeur. (J'ai défini le fond UIImageView sur bleu pour que sa taille soit claire.)

Remplissage d'aspect

Le côté le plus court (hauteur ou largeur) de l'image est étiré pour correspondre à la vue. Comme "Aspect Fit", les proportions de l'image ne sont pas déformées par rapport à leur format d'origine.

Redessiner

Redraw est uniquement pour les vues personnalisées qui doivent effectuer leur propre redimensionnement et redimensionnement. Nous n'utilisons pas de vue personnalisée, nous ne devrions donc pas utiliser Redraw. Notez qu'ici, UIImageView nous donne juste le même résultat que Scale to Fill, mais il fait plus de travail en coulisse.

À propos de Redraw, la documentation Apple indique:

Les modes de contenu permettent de recycler le contenu de votre vue, mais vous pouvez également définir le mode de contenu sur la valeur UIViewContentModeRedraw lorsque vous souhaitez que vos vues personnalisées se redessinent lors des opérations de redimensionnement et de redimensionnement. La définition du mode de contenu de votre vue sur cette valeur force le système à appeler la méthode drawRect: votre vue en réponse aux modifications de géométrie. En général, vous devriez éviter d'utiliser cette valeur autant que possible, et vous ne devriez certainement pas l'utiliser avec les vues système standard.

Centre

L'image est centrée dans la vue mais la longueur et la largeur de l'image ne sont pas étirées.

Haut

Le bord supérieur de l'image est centré horizontalement en haut de la vue et la longueur et la largeur de l'image ne sont pas étirées.

Bas

Le bord inférieur de l'image est centré horizontalement au bas de la vue et la longueur et la largeur de l'image ne sont pas étirées.

La gauche

Le bord gauche de l'image est centré verticalement à gauche de la vue et la longueur et la largeur de l'image ne sont pas étirées.

Droite

Le bord droit de l'image est centré verticalement à droite de la vue et la longueur et la largeur de l'image ne sont pas étirées.

En haut à gauche

Le coin supérieur gauche de l'image est placé dans le coin supérieur gauche de la vue. La longueur et la largeur de l'image ne sont pas étirées.

En haut à droite

Le coin supérieur droit de l'image est placé dans le coin supérieur droit de la vue. La longueur et la largeur de l'image ne sont pas étirées.

En bas à gauche

Le coin inférieur gauche de l'image est placé dans le coin inférieur gauche de la vue. La longueur et la largeur de l'image ne sont pas étirées.

En bas à droite

Le coin inférieur droit de l'image est placé dans le coin inférieur droit de la vue. La longueur et la largeur de l'image ne sont pas étirées.

Remarques

• Cet exemple vient d’ ici .

• Si le contenu (dans notre cas, l'image) a la même taille que la vue (dans notre cas, la UIImageView ), alors changer le mode de contenu ne fera aucune différence notable.

• Voir ceci et cette question pour une discussion sur les modes de contenu pour les vues autres que UIImageView .

• Dans Swift, pour définir le mode de contenu par programmation, procédez comme suit:

    imageView.contentMode = UIViewContentMode.scaleToFill
    imageView.contentMode = UIViewContentMode.scaleAspectFit
    imageView.contentMode = UIViewContentMode.scaleAspectFill
    imageView.contentMode = UIViewContentMode.redraw
    imageView.contentMode = UIViewContentMode.center
    imageView.contentMode = UIViewContentMode.top
    imageView.contentMode = UIViewContentMode.bottom
    imageView.contentMode = UIViewContentMode.left
    imageView.contentMode = UIViewContentMode.right
    imageView.contentMode = UIViewContentMode.topLeft
    imageView.contentMode = UIViewContentMode.topRight
    imageView.contentMode = UIViewContentMode.bottomLeft
    imageView.contentMode = UIViewContentMode.bottomRight