Wie kann ich einen Schatten unter einer UIView zeichnen?

Question

Ich versuche, einen Schatten unter den unteren Rand eines UIView in Cocoa Touch. Ich verstehe, dass ich Folgendes verwenden sollte CGContextSetShadow() um den Schatten zu zeichnen, aber die Quartz 2D-Programmieranleitung ist ein wenig vage:

1. Speichern Sie den Grafikstatus.
2. Rufen Sie die Funktion CGContextSetShadow und übergibt die entsprechenden Werte.
3. Führen Sie alle Zeichnungen aus, auf die Sie Schatten anwenden möchten.
4. Wiederherstellung des Grafikstatus

Ich habe das Folgende in einer UIView Unterklasse:

- (void)drawRect:(CGRect)rect {
    CGContextRef currentContext = UIGraphicsGetCurrentContext();
    CGContextSaveGState(currentContext);
    CGContextSetShadow(currentContext, CGSizeMake(-15, 20), 5);
    CGContextRestoreGState(currentContext);
    [super drawRect: rect];
}

aber das funktioniert bei mir nicht, und ich weiß nicht, (a) wie ich weiter vorgehen soll und (b) ob ich irgendetwas an meinem UIView damit das funktioniert?

Answer 1

Ein weitaus einfacherer Ansatz ist es, einige Ebenenattribute der Ansicht bei der Initialisierung zu setzen:

self.layer.masksToBounds = NO;
self.layer.shadowOffset = CGSizeMake(-15, 20);
self.layer.shadowRadius = 5;
self.layer.shadowOpacity = 0.5;

Sie müssen QuartzCore importieren.

#import <QuartzCore/QuartzCore.h>

Answer 2

self.layer.masksToBounds = NO;
self.layer.cornerRadius = 8; // if you like rounded corners
self.layer.shadowOffset = CGSizeMake(-15, 20);
self.layer.shadowRadius = 5;
self.layer.shadowOpacity = 0.5;

Dadurch wird die Anwendung verlangsamt. Das Hinzufügen der folgenden Zeile kann die Leistung verbessern, solange Ihre Ansicht sichtbar rechteckig ist:

self.layer.shadowPath = [UIBezierPath bezierPathWithRect:self.bounds].CGPath;

Answer 3

Dieselbe Lösung, aber nur zur Erinnerung: Sie können den Schatten direkt im Storyboard definieren.

Ex:

Answer 4

In Ihrem aktuellen Code speichern Sie die GState des aktuellen Kontexts, konfigurieren Sie ihn so, dass er einen Schatten zeichnet und stellen Sie ihn wieder so her, wie er war, bevor Sie ihn so konfigurierten, dass er einen Schatten zeichnet. Dann rufen Sie schließlich die Implementierung der Superklasse von drawRect : .

Jede Zeichnung, die von der Schatteneinstellung betroffen sein soll, muss erfolgen after

CGContextSetShadow(currentContext, CGSizeMake(-15, 20), 5);

sondern before

CGContextRestoreGState(currentContext);

Wenn Sie also wollen, dass die Superklasse drawRect: in einen Schatten "verpackt" werden soll, wie wäre es dann, wenn Sie Ihren Code wie folgt umstellen?

- (void)drawRect:(CGRect)rect {
    CGContextRef currentContext = UIGraphicsGetCurrentContext();
    CGContextSaveGState(currentContext);
    CGContextSetShadow(currentContext, CGSizeMake(-15, 20), 5);
    [super drawRect: rect];
    CGContextRestoreGState(currentContext);
}

Answer 5

Probieren Sie dies aus: .... Sie können mit den Werten spielen. Die shadowRadius bestimmt die Stärke der Unschärfe. shadowOffset bestimmt, wohin der Schatten geht.

Swift 2.0

let radius: CGFloat = demoView.frame.width / 2.0 //change it to .height if you need spread for height
let shadowPath = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 2.1 * radius, height: demoView.frame.height))
//Change 2.1 to amount of spread you need and for height replace the code for height

demoView.layer.cornerRadius = 2
demoView.layer.shadowColor = UIColor.blackColor().CGColor
demoView.layer.shadowOffset = CGSize(width: 0.5, height: 0.4)  //Here you control x and y
demoView.layer.shadowOpacity = 0.5
demoView.layer.shadowRadius = 5.0 //Here your control your blur
demoView.layer.masksToBounds =  false
demoView.layer.shadowPath = shadowPath.CGPath

Swift 3.0

let radius: CGFloat = demoView.frame.width / 2.0 //change it to .height if you need spread for height 
let shadowPath = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 2.1 * radius, height: demoView.frame.height)) 
//Change 2.1 to amount of spread you need and for height replace the code for height

demoView.layer.cornerRadius = 2
demoView.layer.shadowColor = UIColor.black.cgColor
demoView.layer.shadowOffset = CGSize(width: 0.5, height: 0.4)  //Here you control x and y
demoView.layer.shadowOpacity = 0.5
demoView.layer.shadowRadius = 5.0 //Here your control your blur
demoView.layer.masksToBounds =  false
demoView.layer.shadowPath = shadowPath.cgPath

Beispiel mit Streuung

So erstellen Sie einen einfachen Schatten

    demoView.layer.cornerRadius = 2
    demoView.layer.shadowColor = UIColor.blackColor().CGColor
    demoView.layer.shadowOffset = CGSizeMake(0.5, 4.0); //Here your control your spread
    demoView.layer.shadowOpacity = 0.5 
    demoView.layer.shadowRadius = 5.0 //Here your control your blur

Basic Shadow Beispiel in Swift 2.0