iOS
UIView

Sintassi

1. // Obiettivo-C

2. [UIView new] // Ottieni un oggetto vista allocato e inizializzato

3. [[UIView alloc] initWithFrame: (Pass CGRect)] // Ottieni la vista allocata e inizializzata con una cornice

4. [[UIView alloc] init] // Ottieni un oggetto vista allocato e inizializzato

5. // Swift

6. UIView () // Crea un'istanza UIView con frame CGRect.zero

7. UIView (frame: CGRect) // Crea un'istanza UIView specificando il frame

8. UIView.addSubview (UIView) // aggiungi un'altra istanza di UIView come sottoview

9. UIView.hidden // Ottieni o imposta la visibilità della vista

10. UIView.alpha // Ottieni o imposta l'opacità della vista

11. UIView.setNeedsLayout () // Forza la vista ad aggiornare il suo layout

Osservazioni

Crea un UIView

Objective-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;

veloce

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

Rendi la vista arrotondata

Per rendere UIView arrotondato, specifica un cornerRadius per il layer della vista.

Ciò vale anche per qualsiasi classe che eredita da UIView , come UIImageView .

programmazione

codice SWIFT

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

Codice Objective-C

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

Esempio

//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;

Ecco il risultato, che mostra l'effetto della vista arrotondata utilizzando il raggio dell'angolo specificato:

Nota

Per fare questo è necessario includere il framework QuartzCore.

 #import <QuartzCore/QuartzCore.h>

Configurazione Storyboard

Un effetto di visualizzazione arrotondato può anche essere ottenuto non-programmatically impostando le proprietà corrispondenti in Storyboard .

Poiché le proprietà del layer non sono esposte in Storyboard, è necessario modificare l'attributo cornerRadius tramite la sezione Attributi runtime definiti dall'utente.

Estensione rapida

È possibile utilizzare questa pratica estensione per applicare la vista arrotondata purché abbia la stessa larghezza e altezza.

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

Per usarlo:

yourView.setAsCircle()

Prendendo un'istantanea

Puoi scattare un'istantanea da un UIView come questo:

veloce

let snapshot = view.snapshotView(afterScreenUpdates: true)

Objective-C

UIView *snapshot = [view snapshotViewAfterScreenUpdates: YES];

Utilizzando IBInspectable e IBDesignable

Uno (o due) dei più cool nuove funzionalità di versioni più recenti Xcode sono i IBInspectable proprietà e IBDesignable UIView s. Questi non hanno nulla a che fare con la funzionalità della tua applicazione, ma influiscono invece sull'esperienza degli sviluppatori in Xcode. L'obiettivo è essere in grado di ispezionare visivamente le visualizzazioni personalizzate nella tua applicazione iOS senza eseguirla. Supponiamo quindi di avere una vista personalizzata chiamata in modo creativo CustomView che eredita da UIView . In questa visualizzazione personalizzata, verrà visualizzata una stringa di testo con un colore designato. Puoi anche scegliere di non visualizzare alcun testo. Avremo bisogno di tre proprietà:

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

Possiamo quindi eseguire l'override della funzione drawRect nella 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)!
            ])
    }
}

Supponendo che la proprietà text sia impostata, questa disegnerà una stringa nell'angolo in alto a sinistra della vista quando si esegue l'applicazione. Il problema è che non sapremo come apparire senza eseguire l'applicazione. Qui è dove IBInspectable e IBDesignable entrano. IBInspectable ci permette di impostare visivamente i valori delle proprietà della vista in Xcode, proprio come con i controlli integrati. IBDesignable ci mostrerà un'anteprima visiva nello storyboard. Ecco come dovrebbe apparire la classe:

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

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

O nell'Obiettivo 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

I prossimi screenshot mostrano cosa succede in Xcode. Il primo è quello che succede dopo aver aggiunto la classe rivista. Si noti che ci sono tre nuovi elementi dell'interfaccia utente per le tre proprietà. Il Colore del testo mostrerà un selettore di colori, Testo è solo una casella di input e Mostra testo ci darà le opzioni per Off e On che sono rispettivamente false e true .

Il prossimo è dopo aver cambiato il colore del testo in rosso usando il selettore di colori. Inoltre, è stato fornito del testo per renderlo visualizzabile dalla funzione drawRect . Si noti che anche la vista in Interface Builder è stata aggiornata.

Infine, l'impostazione Mostra testo su Off nella finestra di ispezione delle proprietà fa scomparire la visualizzazione del testo in Interface Builder.

Tuttavia, veniamo tutti in una situazione in cui dobbiamo creare UIView arrotondato a più viste nello Storyboard Invece di dichiarare IBDesignable a tutte le visualizzazioni di Storyboard , è meglio creare Extension di UIView e ottenere un'interfaccia utente costruita per ogni tuo UIView attraverso il progetto per creare una vista arrotondata impostando il raggio dell'angolo. Un raggio di confine configurabile su qualsiasi UIView creato nello storyboard.

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

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

Estensione UIView per attributi di dimensioni e frame

Se vogliamo ottenere la x-coordinate di origine della vista, allora dobbiamo scrivere come:

view.frame.origin.x

Per larghezza, dobbiamo scrivere:

view.frame.size.width

Ma se aggiungiamo un'estensione semplice a un UIView , possiamo ottenere tutti gli attributi in modo molto semplice, come:

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

Aiuterà anche ad impostare questi attributi come:

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

E la semplice estensione sarebbe:

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

Abbiamo bisogno di aggiungere questo file di classe in un progetto e sarà disponibile per l'uso in tutto il progetto!

Gestisci programmaticamente l'inserimento e la cancellazione di UIView in e da un altro UIView

Supponiamo di avere un parentView in cui si desidera inserire una nuova subView (ad esempio, quando si desidera inserire un UIImageView in una vista di UIViewController ), di quanto si possa fare come di seguito.

Objective-C

[parentView addSubview:subView];

veloce

parentView.addSubview(subView)

È anche possibile aggiungere la subView sotto un'altra subView2 , che è già una vista secondaria di parentView utilizzando il seguente codice:

Objective-C

[parentView insertSubview:subView belowSubview:subView2];

veloce

parentView.insertSubview(subView, belowSubview: subView2)

Se vuoi inserirlo sopra subView2 puoi farlo in questo modo:

Objective-C

[parentView insertSubview:subView aboveSubview:subView2];

veloce

parentView.insertSubview(subView, aboveSubview: subView2)

Se da qualche parte nel tuo codice hai bisogno di portare una certa subView in primo piano, quindi sopra tutte le parentView degli altri parentView, puoi farlo in questo modo:

Objective-C

[parentView bringSubviewToFront:subView];

veloce

parentView.bringSubviewToFront(subView)

Infine, se si desidera rimuovere subView da parentView , è possibile fare come di seguito:

Objective-C

[subView removeFromSuperview];

veloce

subView.removeFromSuperview()

Crea UIView usando l'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];

funzioni

Funzione per aggiungere la vista ad altezza fissa usando i vincoli di 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];

}

La funzione aggiunge il vincolo di ridimensionamento completo per UIView creato.

-(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];
}

Utilizzo della dimensione del contenuto intrinseco

Quando si crea una sottoclasse UIView, la dimensione del contenuto intrinseco aiuta a evitare l'impostazione dei vincoli di altezza e larghezza hardcoded

uno sguardo di base su come una classe può utilizzare questo

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

Se si desidera fornire solo una dimensione intrinsecamente, è possibile fornire il valore UIViewNoIntrinsicMetric per il valore che si desidera ignorare.

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

Vantaggi quando si utilizza con AutoLayout e Interface Builder

Uno potrebbe prendere questo ImageView (o UIImageView) e impostare l'allineamento orizzontale al centro superview X e l'allineamento verticale al centro superview Y.

Il generatore di interfacce ti lamenterà a questo punto fornendo il seguente avviso:

È qui che entra in gioco la Placeholder Intrinsic Size .

Entrando nel pannello Dimensione ispettore e fino al menu a discesa Dimensione intrinseca, puoi cambiare questo valore da Predefinito a Segnaposto.

e ora l'interfaccia builder rimuoverà gli avvertimenti precedenti e puoi usare questa dimensione per avere viste di dimensioni dinamiche disposte nel builder dell'interfaccia.

Scuotere una vista

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

Questa funzione può essere utilizzata per attirare l'attenzione su una vista specifica scuotendola un po '.