iOS
UIView

Syntaxe

1. // Objectif c

2. [UIView new] // Récupère un objet de vue alloué et initialisé

3. [[UIView alloc] initWithFrame: (Pass CGRect)] // Récupère la vue allouée et initialisée avec un cadre

4. [[UIView alloc] init] // Récupère un objet de vue alloué et initialisé

5. // Rapide

6. UIView () // Crée une instance UIView avec le cadre CGRect.zero

7. UIView (frame: CGRect) // Crée une instance UIView spécifiant le cadre

8. UIView.addSubview (UIView) // Ajout d'une autre instance UIView en tant que sous-vue

9. UIView.hidden // Récupère ou définit la visibilité de la vue

10. UIView.alpha // Récupère ou définit l'opacité de la vue

11. UIView.setNeedsLayout () // Force la vue à mettre à jour sa disposition

Remarques

Créer un UIView

Objectif c

CGRect myFrame = CGRectMake(0, 0, 320, 35)
UIView *view = [[UIView alloc] initWithFrame:myFrame];

//Alternative way of defining the frame
UIView *view = [[UIView alloc] init];
CGRect myFrame = view.frame;
myFrame.size.width = 320;
myFrame.size.height = 35;
myFrame.origin.x = 0;
myFrame.origin.y = 0;
view.frame = myFrame;

Rapide

let myFrame = CGRect(x: 0, y: 0, width: 320, height: 35)
let view = UIView(frame: myFrame)

Faire la vue arrondie

Pour un arrondi UIView , spécifiez un cornerRadius pour la vue de layer .

Cela applique également toute classe qui hérite de UIView , telle que UIImageView .

Par programme

Code rapide

someImageView.layoutIfNeeded()
someImageView.clipsToBounds = true
someImageView.layer.cornerRadius = 10

Code Objective-C

[someImageView layoutIfNeeded];
someImageView.clipsToBounds = YES;
someImageView.layer.cornerRadius = 10;

Exemple

//Swift code
topImageView.layoutIfNeeded()
bottomImageView.layoutIfNeeded()
topImageView.clipsToBounds = true
topImageView.layer.cornerRadius = 10
bottomImageView.clipsToBounds = true
bottomImageView.layer.cornerRadius = bottomImageView.frame.width / 2

//Objective-C code
[topImageView layoutIfNeeded]
[bottomImageView layoutIfNeeded];
topImageView.clipsToBounds = YES;
topImageView.layer.cornerRadius = 10;
bottomImageView.clipsToBounds = YES;
bottomImageView.cornerRadius = CGRectGetWidth(bottomImageView.frame) / 2;

Voici le résultat, montrant l'effet de la vue arrondie en utilisant le rayon de coin spécifié:

Remarque

Pour ce faire, vous devez inclure le framework QuartzCore.

 #import <QuartzCore/QuartzCore.h>

Configuration de storyboard

Un effet de vue arrondi peut également être obtenu de manière non-programmatically en définissant les propriétés correspondantes dans Storyboard .

Les propriétés des layer n'étant pas exposées dans Storyboard, vous devez modifier l'attribut cornerRadius via la section Attributs d'exécution définis par l'utilisateur.

Extension rapide

Vous pouvez utiliser cette extension pratique pour appliquer une vue arrondie tant qu'elle a la même largeur et la même hauteur.

extension UIView {
    @discardableResult
    public func setAsCircle() -> Self {
        self.clipsToBounds = true
        let frameSize = self.frame.size
        self.layer.cornerRadius = min(frameSize.width, frameSize.height) / 2.0
        return self
    }
}

Pour l'utiliser:

yourView.setAsCircle()

Prendre un instantané

Vous pouvez prendre un instantané d'un UIView comme ceci:

Rapide

let snapshot = view.snapshotView(afterScreenUpdates: true)

Objectif c

UIView *snapshot = [view snapshotViewAfterScreenUpdates: YES];

Utilisation de IBInspectable et IBDesignable

IBInspectable propriétés IBDesignable et IBDesignable UIView sont une (ou deux) des nouvelles fonctionnalités les plus intéressantes des versions récentes de Xcode. Celles-ci n'ont rien à voir avec les fonctionnalités de votre application mais ont un impact sur l'expérience des développeurs dans Xcode. L'objectif est de pouvoir inspecter visuellement les vues personnalisées de votre application iOS sans l'exécuter. Supposons donc que vous ayez une vue personnalisée nommée CustomView qui hérite de UIView . Dans cette vue personnalisée, il affichera une chaîne de texte avec une couleur désignée. Vous pouvez également choisir de ne pas afficher de texte. Nous aurons besoin de trois propriétés:

var textColor: UIColor = UIColor.blackColor()
var text: String?
var showText: Bool = true

Nous pouvons alors remplacer la fonction drawRect dans la classe:

if showText {
    if let text = text {
        let s = NSString(string: text)
        s.drawInRect(rect,
            withAttributes: [
                NSForegroundColorAttributeName: textColor,
                NSFontAttributeName: UIFont(name: "Helvetica Neue", size: 18)!
            ])
    }
}

En supposant que la propriété text est définie, cela dessine une chaîne dans le coin supérieur gauche de la vue lorsque l'application est exécutée. Le problème est que nous ne saurons pas à quoi cela ressemble sans exécuter l'application. C'est là IBInspectable et IBDesignable . IBInspectable nous permet de définir visuellement les valeurs de propriété de la vue dans Xcode, comme avec les contrôles intégrés. IBDesignable nous montrera un aperçu visuel dans le storyboard. Voici comment la classe devrait ressembler:

@IBDesignable
class CustomView: UIView {
    @IBInspectable var textColor: UIColor = UIColor.blackColor()
    @IBInspectable var text: String?
    @IBInspectable var showText: Bool = true

    override func drawRect(rect: CGRect) {
        // ...
    }
}

Ou dans l'objectif C:

IB_DESIGNABLE
@interface CustomView: UIView

@property (nonatomic, strong) IBInspectable UIColor* textColor;
@property (nonatomic, strong) IBInspectable NSString* text;
@property (nonatomic, assign) IBInspectable BOOL showText;

@end

@implementation CustomView

- (instancetype)init {
    if(self = [super init]) {
        self.textColor = [UIColor blackColor];
        self.showText = YES;
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    //...
}

@end

Les prochaines captures d'écran montrent ce qui se passe dans Xcode. Le premier est ce qui se passe après l'ajout de la classe révisée. Notez qu'il existe trois nouveaux éléments d'interface utilisateur pour les trois propriétés. La couleur du texte affiche un sélecteur de couleurs, le texte est juste une zone de saisie et Afficher le texte nous donne les options pour Off et On qui sont respectivement false et true .

Le suivant est après avoir changé la couleur du texte en rouge en utilisant le sélecteur de couleur. De plus, du texte a été fourni pour que la fonction drawRect l’affiche. Notez que la vue dans Interface Builder a également été mise à jour.

Enfin, la définition de l'option Afficher le texte sur Off dans l'inspecteur de propriétés fait disparaître l'affichage de texte dans Interface Builder.

Cependant, nous avons tous besoin de créer un UIView arrondi à plusieurs vues de votre Storyboard Au lieu de déclarer IBDesignable à chaque vue de Storyboard , il est préférable de créer une Extension de UIView et de créer une interface utilisateur UIView chaque UIView tout au long du projet pour créer une vue arrondie en définissant le rayon du coin. Un rayon de bordure configurable sur toute UIView que vous créez dans le storyboard.

extension UIView {
    
    @IBInspectable var cornerRadius:CGFloat {
        set {
            layer.cornerRadius = newValue
            clipsToBounds = newValue > 0
        }
        get {
            return layer.cornerRadius
        }
    }
    
}

Animation d'un UIView

let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
view.backgroundColor = UIColor.orange
self.view.addSubview(view)
UIView.animate(withDuration: 0.75, delay: 0.5, options: .curveEaseIn, animations: {
    //This will cause view to go from (0,0) to
    // (self.view.frame.origin.x,self.view.frame.origin.y)
    view.frame.origin.x = self.view.frame.origin.x
    view.frame.origin.y = self.view.frame.origin.y
}) { (finished) in
    view.backgroundColor = UIColor.blueColor()
}

Extension UIView pour les attributs de taille et de cadre

Si nous voulons obtenir la valeur d'origine de la vue, nous devons écrire comme suit:

view.frame.origin.x

Pour la largeur, il faut écrire:

view.frame.size.width

Mais si nous ajoutons une simple extension à un UIView , nous pouvons obtenir tous les attributs très simplement, comme:

view.x
view.y
view.width
view.height

Cela aidera également à définir ces attributs comme:

view.x = 10
view.y = 10
view.width = 100
view.height = 200

Et la simple extension serait:

extension UIView {
    
    var x: CGFloat {
        get {
            return self.frame.origin.x
        }
        set {
            self.frame = CGRect(x: newValue, y: self.frame.origin.y, width: self.frame.size.width, height: self.frame.size.height)
        }
    }
    
    var y: CGFloat {
        get {
            return self.frame.origin.y
        }
        set {
            self.frame = CGRect(x: self.frame.origin.x, y: newValue, width: self.frame.size.width, height: self.frame.size.height)
        }
    }
    
    var width: CGFloat {
        get {
            return self.frame.size.width
        }
        set {
            self.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: newValue, height: self.frame.size.height)
        }
    }
    
    var height: CGFloat {
        get {
            return self.frame.height
        }
        set {
            self.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: self.frame.size.width, height: newValue)
        }
    }
}

Nous devons ajouter ce fichier de classe dans un projet et il sera disponible pour être utilisé tout au long du projet!

Gestion par programmation de l'insertion et de la suppression de UIView dans et à partir d'un autre UIView

Supposons que vous ayez un parentView dans lequel vous voulez insérer un nouveau subView programmation (par exemple, lorsque vous voulez insérer un UIImageView dans la vue d'un UIViewController ), que vous pouvez le faire comme ci-dessous.

Objectif c

[parentView addSubview:subView];

Rapide

parentView.addSubview(subView)

Vous pouvez également ajouter le subView sous un autre subView2 , qui est déjà une sous-vue de parentView en utilisant le code suivant:

Objectif c

[parentView insertSubview:subView belowSubview:subView2];

Rapide

parentView.insertSubview(subView, belowSubview: subView2)

Si vous voulez l'insérer au-dessus de subView2 vous pouvez le faire de cette façon:

Objectif c

[parentView insertSubview:subView aboveSubview:subView2];

Rapide

parentView.insertSubview(subView, aboveSubview: subView2)

Si quelque part dans votre code vous devez mettre en avant une certaine subView vue, donc au-dessus de toutes les sous- parentView de parentView, vous pouvez le faire comme ceci:

Objectif c

[parentView bringSubviewToFront:subView];

Rapide

parentView.bringSubviewToFront(subView)

Enfin, si vous souhaitez supprimer subView de parentView , vous pouvez faire comme ci-dessous:

Objectif c

[subView removeFromSuperview];

Rapide

subView.removeFromSuperview()

Créer UIView en utilisant Autolayout

UIView *view = [[UIView alloc] init];

[self.view addSubview:view];

//Use the function if you want to use height as constraint
[self addView:view onParentView:self.view withHeight:200.f];


//Use this function if you want to add view with respect to parent and should resize with it
[self addFullResizeConstraintForSubview:view addedOnParentView:self.view];

Les fonctions

Fonction pour ajouter une vue avec une hauteur fixe à l'aide de contraintes d'autolayout

-(void)addView:(UIView*)subView onParentView:(UIView*)parentView withHeight:(CGFloat)height{

subView.translatesAutoresizingMaskIntoConstraints = NO;
    
NSLayoutConstraint *trailing =[NSLayoutConstraint
                                   constraintWithItem:subView
                                   attribute:NSLayoutAttributeTrailing
                                   relatedBy:NSLayoutRelationEqual
                                   toItem:parent
                                   attribute:NSLayoutAttributeTrailing
                                   multiplier:1.0
                                   constant:10.f];


NSLayoutConstraint *top = [NSLayoutConstraint
                               constraintWithItem:subView
                               attribute:NSLayoutAttributeTop
                               relatedBy:NSLayoutRelationEqual
                               toItem:parent
                               attribute:NSLayoutAttributeTop
                               multiplier:1.0
                               constant:10.f];
    
NSLayoutConstraint *leading = [NSLayoutConstraint
                                   constraintWithItem:subView
                                   attribute:NSLayoutAttributeLeading
                                   relatedBy:NSLayoutRelationEqual
                                   toItem:parent
                                   attribute:NSLayoutAttributeLeading
                                   multiplier:1.0
                                   constant:10.f];
[parent addConstraint:trailing];
[parent addConstraint:top];
[parent addConstraint:leading];

NSLayoutConstraint *heightConstraint =[NSLayoutConstraint
                                           constraintWithItem:subView
                                           attribute:NSLayoutAttributeHeight
                                           relatedBy:NSLayoutRelationEqual
                                           toItem:nil
                                           attribute:0
                                           multiplier:0.0
                                           constant:height];
    
[subView addConstraint:heightConstraint];

}

Fonction ajoute une contrainte de redimensionnement complète pour UIView créé.

-(void)addFullResizeConstraintForSubview:(UIView*)subView addedOnParentView:(UIView*)parentView{

subView.translatesAutoresizingMaskIntoConstraints = NO;
    
NSLayoutConstraint *trailing =[NSLayoutConstraint
                                   constraintWithItem:subView
                                   attribute:NSLayoutAttributeTrailing
                                   relatedBy:NSLayoutRelationEqual
                                   toItem:parent
                                   attribute:NSLayoutAttributeTrailing
                                   multiplier:1.0
                                   constant:10.f];


NSLayoutConstraint *top = [NSLayoutConstraint
                               constraintWithItem:subView
                               attribute:NSLayoutAttributeTop
                               relatedBy:NSLayoutRelationEqual
                               toItem:parent
                               attribute:NSLayoutAttributeTop
                               multiplier:1.0
                               constant:10.f];
    
NSLayoutConstraint *leading = [NSLayoutConstraint
                                   constraintWithItem:subView
                                   attribute:NSLayoutAttributeLeading
                                   relatedBy:NSLayoutRelationEqual
                                   toItem:parent
                                   attribute:NSLayoutAttributeLeading
                                   multiplier:1.0
                                   constant:10.f];

NSLayoutConstraint *bottom =[NSLayoutConstraint
                                 constraintWithItem:subView
                                 attribute:NSLayoutAttributeBottom
                                 relatedBy:NSLayoutRelationEqual
                                 toItem:parent
                                 attribute:NSLayoutAttributeBottom
                                 multiplier:1.0
                                 constant:0.f];
[parent addConstraint:trailing];
[parent addConstraint:top];
[parent addConstraint:leading];
[parent addConstraint:bottom];
}

Utilisation de la taille du contenu intrinsèque

Lors de la création d'une sous-classe UIView, la taille du contenu intrinsèque permet d'éviter de définir des contraintes de hauteur et de largeur codées en dur

un aperçu de base sur la façon dont une classe peut utiliser cette

class ImageView: UIView {
    var image: UIImage {
        didSet {
            invalidateIntrinsicContentSize()
        }
    }
    // omitting initializers
    // convenience init(image: UIImage)

    override func intrinsicContentSize() -> CGSize {
        return CGSize(width: image.size.width, height: image.size.height)
    }
}

Si vous souhaitez uniquement fournir une taille intrinsèquement, vous pouvez fournir la valeur UIViewNoIntrinsicMetric pour la valeur que vous souhaitez ignorer.

 override func intrinsicContentSize() -> CGSize {
     return CGSize(width: UIViewNoIntrinsicMetric, height: image.size.width)   
 }

Avantages lors de l'utilisation avec AutoLayout et Interface Builder

On pourrait prendre cette ImageView (ou UIImageView) et définir l'alignement horizontal au centre X de superview et l'alignement vertical au centre Y de superview.

Le constructeur de l'interface se plaindra à ce stade en vous donnant l'avertissement suivant:

C'est ici que la Placeholder Intrinsic Size entre en jeu.

En entrant dans le panneau de l'inspecteur Taille et dans la liste déroulante Taille intrinsèque, vous pouvez basculer cette valeur de Par défaut à Espace réservé.

et maintenant, le générateur d'interface supprimera les avertissements précédents et vous pourrez utiliser cette taille pour avoir des vues de taille dynamique définies dans le générateur d'interface.

Secouer une vue

extension UIView {
    func shake() {
        let animation = CAKeyframeAnimation(keyPath: "transform.translation.x")
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
        animation.duration = 0.6
        animation.values = [-10.0, 10.0, -7.0, 7.0, -5.0, 5.0, 0.0 ]
        layer.add(animation, forKey: "shake")
    }
}

Cette fonction peut être utilisée pour attirer l'attention sur une vue spécifique en la secouant un peu.