iOS
UIView

Syntax

1. // Mål-C

2. [UIV Visa ny] // Få ett visningsobjekt tilldelat och initialiserat

3. [[UIView alloc] initWithFrame: (Pass CGRect)] // Få visningen tilldelad och initialiserad med en ram

4. [[UIView alloc] init] // Få ett visningsobjekt tilldelat och initialiserat

5. // Snabb

6. UIView () // Skapar en UIView-instans med CGRect.zero-ram

7. UIView (ram: CGRect) // Skapar en UIView-instans som anger ramen

8. UIView.addSubview (UIView) // lägg till en annan UIView-instans som undervy

9. UIView.hidden // Hämta eller ställa in vyns synlighet

10. UIView.alpha // Hämta eller ställ in vyns opacitet

11. UIView.setNeedsLayout () // Tvingar vyn för att uppdatera dess layout

Anmärkningar

Skapa en UIV-bild

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;

Snabb

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

Gör vyn rundad

Om du UIView skapa en rundad UIView anger du ett cornerRadius för cornerRadius layer .

Detta gäller också alla klasser som ärver från UIView , till exempel UIImageView .

programmatiskt

Snabb kod

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

Objekt-C-kod

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

Exempel

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

Här är resultatet och visar den rundade visningseffekten med den angivna hörnradie:

Notera

För att göra detta måste du inkludera QuartzCore-ramverket.

 #import <QuartzCore/QuartzCore.h>

Storyboard-konfiguration

En rundad vyeffekt kan också uppnås non-programmatically genom att ställa in motsvarande egenskaper i Storyboard .

Eftersom layer inte utsätts i storyboard, måste du ändra cornerRadius attribut via användardefinierade Runtime Egenskaper avsnitt.

Snabb förlängning

Du kan använda den här praktiska förlängningen för att tillämpa rundad vy så länge den har samma bredd och höjd.

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

För att använda det:

yourView.setAsCircle()

Ta en stillbild

Du kan ta en stillbild från en UIView så här:

Snabb

let snapshot = view.snapshotView(afterScreenUpdates: true)

Objective-C

UIView *snapshot = [view snapshotViewAfterScreenUpdates: YES];

Använda IBInspectable och IBDesignable

En (eller två) av de coolaste nya funktionerna i de senaste Xcode-versionerna är IBInspectable egenskaperna och IBDesignable UIView . Dessa har inget att göra med din applikations funktionalitet utan påverkar istället utvecklarupplevelsen i Xcode. Målet är att kunna visuellt inspektera anpassade vyer i din iOS-applikation utan att köra den. Så antar att du har en anpassad vy som heter kreativt CustomView som ärver från UIView . I den anpassade vyn kommer det att visa en textsträng med en angiven färg. Du kan också välja att inte visa någon text. Vi behöver tre egenskaper:

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

Vi kan sedan åsidosätta drawRect funktionen i klassen:

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

Om man antar att text egenskapen är inställd, kommer detta att dra en sträng i det övre vänstra hörnet av vyn när programmet körs. Problemet är att vi inte vet hur det ser ut utan att köra applikationen. Det är här IBInspectable och IBDesignable kommer in. IBInspectable tillåter oss att visuellt ställa in egenskaper för vyn i Xcode, precis som med de inbyggda kontrollerna. IBDesignable visar oss en visuell förhandsvisning i storyboard. Så här ska klassen se ut:

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

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

Eller i mål 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

Nästa skärmdump visar vad som händer i Xcode. Den första är vad som händer efter att ha lagt till den reviderade klassen. Lägg märke till att det finns tre nya UI-element för de tre egenskaperna. Textfärgen visar en färgväljare, Text är bara en inmatningsruta och Visa text ger oss alternativen för Off och On som är false respektive true .

Nästa är efter att du har ändrat textfärgen till röd med färgväljaren. En del text har också tillhandahållits för att göra drawRect funktionen att visa den. Observera att vyn i Interface Builder också har uppdaterats.

Slutligen, genom att ställa in Visa text till Off i fastighetsinspektören får texten i Interface Builder att försvinna.

Men vi kommer upp alla situationer när vi behöver skapa avrundad UIView vid flera vyer på ditt Storyboard Istället för att förklara IBDesignable för alla vyer på Storyboard , är det bättre att skapa en Extension av UIView och få ett användargränssnitt byggt precis för varje UIView genom projektet för att skapa en rundad vy genom att ställa in hörnradie. En konfigurerbar kantradie på vilken UIView du skapar i storyboard.

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

Animera en UIV-bild

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-tillägg för storlek och ramattribut

Om vi vill få vyns ursprung x-koordinat måste vi skriva som:

view.frame.origin.x

För bredd måste vi skriva:

view.frame.size.width

Men om vi lägger till en enkel tillägg till en UIView , kan vi få alla attributen helt enkelt, som:

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

Det hjälper också att ställa in dessa attribut som:

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

Och den enkla förlängningen skulle vara:

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

Vi måste lägga till den här klassfilen i ett projekt och den kommer att vara tillgänglig för hela projektet!

Hantera programmatiskt UIView-infogning och radering i och från en annan UIView

Anta att du har en parentView som du vill infoga en ny subView programmatiskt (t.ex. när du vill infoga en UIImageView i en UIViewController vy), än du kan göra det som nedan.

Objective-C

[parentView addSubview:subView];

Snabb

parentView.addSubview(subView)

Du kan också lägga till subView under en annan subView2 , som redan är en undervy av parentView med följande kod:

Objective-C

[parentView insertSubview:subView belowSubview:subView2];

Snabb

parentView.insertSubview(subView, belowSubview: subView2)

Om du vill infoga det ovanför subView2 du göra det på detta sätt:

Objective-C

[parentView insertSubview:subView aboveSubview:subView2];

Snabb

parentView.insertSubview(subView, aboveSubview: subView2)

Om du någonstans i din kod behöver ta fram en viss subView framför, så framför allt de andra parentView subvyer, kan du göra det så här:

Objective-C

[parentView bringSubviewToFront:subView];

Snabb

parentView.bringSubviewToFront(subView)

Slutligen, om du vill ta bort subView från parentView , kan du göra som nedan:

Objective-C

[subView removeFromSuperview];

Snabb

subView.removeFromSuperview()

Skapa UIView med 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];

funktioner

Funktion för att lägga till vy med fast höjd med hjälp av autolayout-begränsningar

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

}

Funktion lägg till full storlekstryck för skapad 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];
}

Användning av inneboende innehållsstorlek

När du skapar en UIView-underklass hjälper innehållets storlek att undvika att sätta hårdkodade höjd- och breddbegränsningar

ett grundläggande inblick i hur en klass kan använda detta

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

Om du bara vill tillhandahålla en storlek i sig kan du ange värdet UIViewNoIntrinsicMetric för det värde du vill ignorera.

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

Fördelar när du använder AutoLayout och Interface Builder

Man kan ta denna ImageView (eller UIImageView) och ställa in den horisontella inriktningen på övervakningscentrum X och den vertikala inriktningen till övervakningscentrum Y.

Gränssnittsbyggare kommer att klaga till dig vid denna tidpunkt med följande varning:

Det är här Placeholder Intrinsic Size kommer in.

Genom att gå till Storleksinspektörspanelen och ner till rullgardinsmenyn Intrinsic Size, kan du växla detta värde från standard till platshållare.

och nu kommer gränssnittsbyggare att ta bort tidigare varningar och du kan använda den här storleken för att få dynamiska storlekar som visas i gränssnittsbyggaren.

Skaka en vy

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

Denna funktion kan användas för att uppmärksamma en specifik vy genom att skaka den lite.