iOS
UIView

Syntaxis

1. // Doelstelling C

2. [UIView nieuw] // Krijg een weergaveobject toegewezen en geïnitialiseerd

3. [[UIView alloc] initWithFrame: (Pass CGRect)] // Krijg de weergave toegewezen en geïnitialiseerd met een frame

4. [[UIView alloc] init] // Krijg een viewobject toegewezen en geïnitialiseerd

5. // Snel

6. UIView () // Maakt een UIView-instantie met een frame CGRect.zero

7. UIView (frame: CGRect) // Maakt een UIView-instantie die het frame opgeeft

8. UIView.addSubview (UIView) // voeg nog een UIView-instantie toe als subview

9. UIView.hidden // De zichtbaarheid van de weergave ophalen of instellen

10. UIView.alpha // De dekking van de weergave ophalen of instellen

11. UIView.setNeedsLayout () // Forceert de weergave om de lay-out bij te werken

Opmerkingen

Maak een UIView

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

Snel

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

Maak het uitzicht afgerond

Als u een afgeronde UIView wilt maken, geeft u een cornerRadius voor de layer van de weergave.

Dit geldt ook voor elke klasse die van UIView erft, zoals UIImageView .

programmatisch

Swift code

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

Doelstelling-C-code

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

Voorbeeld

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

Hier is het resultaat, dat het afgeronde weergave-effect toont met de opgegeven hoekradius:

Notitie

Om dit te doen, moet u het QuartzCore-framework opnemen.

 #import <QuartzCore/QuartzCore.h>

Storyboard-configuratie

Een afgerond weergave-effect kan ook non-programmatically worden bereikt door de bijbehorende eigenschappen in Storyboard in te stellen .

Aangezien layer eigenschappen niet in Storyboard worden blootgesteld, moet u het wijzigen cornerRadius attribuut via de User Defined Runtime Attributen sectie.

Swift Extension

U kunt deze handige uitbreiding gebruiken om een afgeronde weergave toe te passen zolang deze dezelfde breedte en hoogte heeft.

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

Om het te gebruiken:

yourView.setAsCircle()

Een momentopname maken

U kunt een momentopname van een UIView als volgt maken:

Snel

let snapshot = view.snapshotView(afterScreenUpdates: true)

Doelstelling C

UIView *snapshot = [view snapshotViewAfterScreenUpdates: YES];

IBInspectable en IBDesignable gebruiken

Een (of twee) van de coolste nieuwe functies in recente Xcode-releases zijn de IBInspectable eigenschappen en IBDesignable UIView 's. Deze hebben niets te maken met de functionaliteit van uw applicatie, maar hebben in plaats daarvan invloed op de ontwikkelaarservaring in Xcode. Het doel is om aangepaste weergaven in uw iOS-toepassing visueel te kunnen inspecteren zonder deze uit te voeren. CustomView er dus van uit dat u een aangepaste weergave hebt met de naam CustomView die erft van UIView . In deze aangepaste weergave wordt een reeks tekst met een bepaalde kleur weergegeven. U kunt er ook voor kiezen geen tekst weer te geven. We hebben drie eigenschappen nodig:

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

We kunnen dan de drawRect functie in de klasse overschrijven:

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

Ervan uitgaande dat de text is ingesteld, tekent dit een tekenreeks in de linkerbovenhoek van de weergave wanneer de toepassing wordt uitgevoerd. Het probleem is dat we niet weten hoe het eruit ziet zonder de toepassing uit te voeren. Hier komen IBInspectable en IBDesignable binnen. IBInspectable stelt ons in staat om de waarden van de weergave in Xcode visueel in te stellen, net als met de ingebouwde bedieningselementen. IBDesignable toont ons een visueel voorbeeld in het storyboard. Dit is hoe de klas eruit zou moeten zien:

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

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

Of in doelstelling 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

De volgende screenshots laten zien wat er gebeurt in Xcode. De eerste is wat er gebeurt na het toevoegen van de herziene klasse. Merk op dat er drie nieuwe UI-elementen zijn voor de drie eigenschappen. De tekst kleur zal een kleurkiezer weer te geven, tekst is slechts een invoerveld en Toon tekst zal ons de opties voor het geven Off en On , die zijn false en true respectievelijk.

De volgende is na het wijzigen van de tekstkleur in rood met de Kleurkiezer. Er is ook wat tekst voorzien om de functie drawRect deze weer te geven. Merk op dat de weergave in Interface Builder ook is bijgewerkt.

Als u ten slotte Tekst tonen op Off zet in de eigenschappencontrole, verdwijnt de tekstweergave in Interface Builder.

We doen ons echter allemaal een situatie voor wanneer we afgeronde UIView op meerdere weergaven in uw Storyboard moeten maken. In plaats van IBDesignable voor alle weergaven van Storyboard verklaren, is het beter om een Extension van UIView en een gebruikersinterface te laten bouwen die speciaal voor uw elke UIView door het project heen om een afgeronde weergave te maken door hoekradius in te stellen. Een configureerbare randradius op elke UIView die u in het storyboard maakt.

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

Een UIView animeren

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

UIView-extensie voor grootte- en framekenmerken

Als we het x-cordinaat van oorsprong van de weergave willen krijgen, moeten we schrijven als:

view.frame.origin.x

Voor de breedte moeten we schrijven:

view.frame.size.width

Maar als we een eenvoudige extensie aan een UIView , kunnen we alle attributen heel eenvoudig krijgen, zoals:

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

Het helpt ook bij het instellen van deze attributen zoals:

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

En de eenvoudige extensie zou zijn:

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

We moeten dit klassenbestand toevoegen aan een project en het is beschikbaar voor gebruik gedurende het project!

Beheer UIView-invoeging en verwijdering programmatisch in en uit een andere UIView

Stel dat u een parentView waarin u een nieuwe subView programmatisch wilt invoegen (bijv. Wanneer u een UIImageView in een view van UIViewController wilt invoegen), dan kunt u dit doen zoals hieronder.

Doelstelling C

[parentView addSubview:subView];

Snel

parentView.addSubview(subView)

U kunt de subView ook toevoegen onder een andere subView2 , die al een subview van parentView is met behulp van de volgende code:

Doelstelling C

[parentView insertSubview:subView belowSubview:subView2];

Snel

parentView.insertSubview(subView, belowSubview: subView2)

Als u het boven subView2 wilt invoegen, kunt u dit op deze manier doen:

Doelstelling C

[parentView insertSubview:subView aboveSubview:subView2];

Snel

parentView.insertSubview(subView, aboveSubview: subView2)

Als u ergens in uw code een bepaalde subView naar voren moet brengen, dus boven alle parentView de andere parentView , kunt u dit als volgt doen:

Doelstelling C

[parentView bringSubviewToFront:subView];

Snel

parentView.bringSubviewToFront(subView)

Als u ten slotte subView uit parentView wilt verwijderen, kunt u het volgende doen:

Doelstelling C

[subView removeFromSuperview];

Snel

subView.removeFromSuperview()

Maak UIView met 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];

functies

Functie om weergave met vaste hoogte toe te voegen met behulp van autolayout-beperkingen

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

}

Functie voeg beperking voor formaat wijzigen toe voor aangemaakte UIView.

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

Gebruik van intrinsieke inhoudsgrootte

Bij het maken van een UIView-subklasse helpt intrinsieke inhoudgrootte om te voorkomen dat hardcoderende hoogte- en breedtebeperkingen worden ingesteld

een basisoverzicht van hoe een klas dit kan gebruiken

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

Als u alleen intrinsiek één grootte wilt UIViewNoIntrinsicMetric , kunt u de waarde UIViewNoIntrinsicMetric voor de waarde die u wilt negeren.

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

Voordelen bij gebruik met AutoLayout en Interface Builder

Men zou deze ImageView (of UIImageView) kunnen nemen en de horizontale uitlijning instellen op superview center X en de verticale uitlijning op superview center Y.

Interfacebuilder zal op dit moment een klacht bij u indienen met de volgende waarschuwing:

Dit is waar de Placeholder Intrinsic Size komt.

Als u naar het deelvenster Grootte en naar de vervolgkeuzelijst Intrinsieke grootte gaat, kunt u deze waarde wijzigen van Standaard naar Plaatshouder.

en nu verwijdert interfacebuilder de vorige waarschuwingen en u kunt deze grootte gebruiken om weergaven met dynamische afmetingen in interfacebuilder op te stellen.

Schud een beeld

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

Deze functie kan worden gebruikt om de aandacht op een specifiek beeld te vestigen door het een beetje te schudden.