Wie erstelle ich einen Schatten unter einem UIView?

Ich versuche zu zeichnen, ein Schatten unter der unteren Kante der UIView in Cocoa Touch. Ich verstehe, dass ich verwenden soll CGContextSetShadow() zeichnen Sie die Schatten, aber die Quartz 2D programming guide ist ein wenig vage:

  1. Speichern Sie die Grafiken Zustand.
  2. Aufruf der Funktion CGContextSetShadow, übergeben die entsprechenden Werte.
  3. Führen Sie die Zeichnung, auf die Sie sich bewerben möchten Schatten.
  4. Die Grafiken wiederherzustellen Staat

Habe ich versucht, das folgende in einen 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 nicht für mich und ich bin ein bisschen stecken über (a), wo Sie als Nächstes gehen und (b) wenn es etwas gibt, was muss ich tun, um meine UIView diese Arbeit zu machen?

InformationsquelleAutor Fraser Speirs | 2009-04-30

  1. 93

    In Ihrer aktuellen code haben, speichern Sie die GState dem aktuellen Kontext, konfigurieren, ziehen Sie ein Schatten .. und das wiederherstellen, was es war, bevor Sie es konfiguriert, um zu zeichnen ein Schatten. Dann, endlich, rufen Sie die Oberklasse der Implementierung des drawRect: .

    Jede Zeichnung, sollten betroffene durch die Schatten-Einstellung passieren muss, um die nachdem 

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

    aber, bevor

    CGContextRestoreGState(currentContext);

    Also, wenn Sie wollen, dass die Superklasse die drawRect: 'verpackt' in einem Schatten, dann wie wärs, wenn du die Reihenfolge der code so?

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

    InformationsquelleAutor Christian Brunschen

  2. 783

    Durch eine weitaus einfachere Methode ist, um einige layer-Attribute der Blick auf die Initialisierung:

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

    Müssen Sie es importieren QuartzCore.

    #import <QuartzCore/QuartzCore.h>
    Aber bewusst sein, dass dies funktioniert nur auf iOS 3.2+, so dass, wenn Sie Ihre app sollte funktionieren auf alte version benutzen Sie Christian s eine Lösung oder ein statisches Bild hinter der Ansicht, wenn das ist eine option.
    Diese Lösung erfordert auch das hinzufügen #import <QuartzCore/QuartzCore.h>".h-Datei.
    Einstellung masksToBounds zu NO negiert wird cornerRadius keine?
    Okay, um das zu beheben, wird die Hintergrundfarbe eingestellt werden muss, auf die Ebene und die Ansicht muss transparent sein.
    Wie machst du das? Ich habe versucht self.layer.backgroundColor = [[UIColor whiteColor] CGColor]; aber kein Glück. Welche Ansicht muss transparent sein?

    InformationsquelleAutor ollie

  3. 230
    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;

    Dies verlangsamt die Anwendung.
    Das hinzufügen der folgenden Zeile kann die Leistung verbessern, so lange, wie Sie Ihre Ansicht ist sichtbar eckig:

    self.layer.shadowPath = [UIBezierPath bezierPathWithRect:self.bounds].CGPath;
    Es ist wohl erwähnenswert, diese Optimierung ist nur dann sinnvoll, wenn Ihre Sicht ist deutlich rechteckig.
    selbst.Schicht.shadowPath... anstatt was? oder nur das hinzufügen, um es
    Nur hinzufügen, dass extra Linie neben der anderen.
    Zeichnung Schatten ist teurer Vorgang ist, so zum Beispiel, wenn Ihre Anwendung ermöglicht andere interface-Orientierung, und Sie beginnen, um das Gerät zu drehen, ohne dass explizit der Pfad der Schatten es gerendert werden muss, mehrere Male während dieser animation, die, je nach der Form, wohl sichtlich verlangsamen die animation
    Dass insbesondere die Zeile funktioniert nur für Rechtecke, aber Sie können auch nicht-rechteckige Pfade. Zum Beispiel, wenn Sie ein abgerundetes Rechteck, das Sie verwenden können, bezierPathWithRoundedRect:cornerRadius:

    InformationsquelleAutor ZYiOS

  4. 155

    Gleiche Lösung, aber nur, um Sie daran erinnern: Sie können definieren, der Schatten direkt in das storyboard.

    Ex:

    Wie erstelle ich einen Schatten unter einem UIView?

    Leider, ich glaube, CGColor ist außerhalb der Reichweite vom storyboard 🙁
    nur definieren Sie die Kategorie UIView oder CGLayer was ist ein UIColor wrapper für die CGColor Eigenschaft 😉
    Dieser link beschreibt, wie Sie dies tun: cocoadventures.org/post/104137872754/...
    Um es einfacher für die Menschen zu kopieren und einfügen: Schicht.masksToBound, Schicht.shadowOffset, Schicht.shadowRadius, Schicht.shadowOpacity. Tippfehler werden dich töten, hier.
    Schicht.shadowOpacity Wert 0.5 nicht 0,5

    InformationsquelleAutor Antzi

  5. 40

    Können Sie versuchen, diese .... Sie können spielen mit den Werten.
    Die shadowRadius bestimmt die Intensität der Unschärfe. shadowOffset diktiert, wo die 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 ausgebreiteten

    Wie erstelle ich einen Schatten unter einem UIView?

    Erstellen Sie eine einfache 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

    Wie erstelle ich einen Schatten unter einem UIView?

    InformationsquelleAutor O-mkar

  6. 18

    Einfache und saubere Lösung, die mit Interface Builder

    Fügen Sie eine Datei namens UIView.swift in Ihrem Projekt (oder fügen Sie diesen in eine Datei) :

    import UIKit

@IBDesignable extension UIView {

    /* The color of the shadow. Defaults to opaque black. Colors created
    * from patterns are currently NOT supported. Animatable. */
    @IBInspectable var shadowColor: UIColor? {
        set {
            layer.shadowColor = newValue!.CGColor
        }
        get {
            if let color = layer.shadowColor {
                return UIColor(CGColor:color)
            }
            else {
                return nil
            }
        }
    }

    /* The opacity of the shadow. Defaults to 0. Specifying a value outside the
    * [0,1] range will give undefined results. Animatable. */
    @IBInspectable var shadowOpacity: Float {
        set {
            layer.shadowOpacity = newValue
        }
        get {
            return layer.shadowOpacity
        }
    }

    /* The shadow offset. Defaults to (0, -3). Animatable. */
    @IBInspectable var shadowOffset: CGPoint {
        set {
            layer.shadowOffset = CGSize(width: newValue.x, height: newValue.y)
        }
        get {
            return CGPoint(x: layer.shadowOffset.width, y:layer.shadowOffset.height)
        }
    }

    /* The blur radius used to create the shadow. Defaults to 3. Animatable. */
    @IBInspectable var shadowRadius: CGFloat {
        set {
            layer.shadowRadius = newValue
        }
        get {
            return layer.shadowRadius
        }
    }
}

    Dann wird dies im Interface Builder für jede Ansicht in der "Utilities Panel" > Attribute Inspector :

    Wie erstelle ich einen Schatten unter einem UIView?

    Können Sie leicht die Schatten jetzt.

    Hinweise:

    - Der Schatten erscheint nicht in der IB, nur zur Laufzeit.

    - Als Mazen Kasser sagte

    Für diejenigen, die nicht bekommen diese zu arbeiten [...] stellen Sie sicher, Clip-Untersichten (clipsToBounds) ist nicht aktiviert

    Dies ist die richtige Antwort - Konfiguration über code für zukünftige Schnittstellen
    Diese Lösung führt mich zu einer nicht arbeiten Verhalten mit der folgenden Warnmeldung (eine für jede Eigenschaft) : Failed to set (shadowColor) user defined inspected property on (UICollectionViewCell): [<UICollectionViewCell> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key shadowColor.
    Ich hatte zu importieren UIKit machen, damit es funktioniert, sind die grundlegenden Foundation importieren erstellt von XCode ist nicht genug, die Kompilierung ist jedoch in Ordnung. Ich hätte kopiert den gesamten Quellcode. Danke Axel für diese schöne Lösung.

    InformationsquelleAutor Axel Guilmin

  7. 13

    Ich diese als Teil meiner utils. Mit diesem können wir nicht nur Schatten, sondern kann auch erhalten eine abgerundete Ecke, für alle UIView. Auch können Sie einstellen, welche Farbe der Schatten, die Sie bevorzugen. Normalerweise ist schwarz bevorzugt, aber manchmal, wenn der hintergrund nicht weiß, möchten Sie vielleicht etwas anderes. Hier ist, was ich verwenden -

    in utils.m
+ (void)roundedLayer:(CALayer *)viewLayer 
              radius:(float)r 
              shadow:(BOOL)s
{
    [viewLayer setMasksToBounds:YES];
    [viewLayer setCornerRadius:r];        
    [viewLayer setBorderColor:[RGB(180, 180, 180) CGColor]];
    [viewLayer setBorderWidth:1.0f];
    if(s)
    {
        [viewLayer setShadowColor:[RGB(0, 0, 0) CGColor]];
        [viewLayer setShadowOffset:CGSizeMake(0, 0)];
        [viewLayer setShadowOpacity:1];
        [viewLayer setShadowRadius:2.0];
    }
    return;
}

    Diese zu verwenden, müssen wir dieses, nennen [utils roundedLayer:yourview.layer radius:5.0f shadow:YES];

    InformationsquelleAutor Srikar Appalaraju

  8. 7

    Swift 3

    extension UIView {
    func installShadow() {
        layer.cornerRadius = 2
        layer.masksToBounds = false
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOffset = CGSize(width: 0, height: 1)
        layer.shadowOpacity = 0.45
        layer.shadowPath = UIBezierPath(rect: bounds).cgPath
        layer.shadowRadius = 1.0
    }
}
    wenn du diese Methode würde ich prüfen, hinzufügen von Parametern, so dass Sie können passen Sie die Werte so seine dynamische
    Es nicht geben wird, mit abgerundeten Ecken, um mich, mache ich etwas falsch?
    nichts passiert, das könnte sein, weil die Funktion installShadow() wird nicht aufgerufen von viewDidLoad() oder viewWillAppear()
    Ich war der Aufruf von überladenen draw Methode anzeigen. Schatten kommt richtig, aber abgerundete Ecke nicht.
    keine abgerundete Rahmen, dies könnte sein, da die Ansicht eine UIStackView die nur tut, layout und hat keine Aussicht. Sie können, müssen Sie eine regelmäßige UIView als container für alles.

    InformationsquelleAutor neoneye

  9. 3

    Für diejenigen, die nicht bekommen diese arbeiten (Wie mich!) nach dem Versuch all die Antworten hier, so stellen Sie sicher, dass Clip Untersichten ist nicht aktiviert bei den Attributes inspector...

    InformationsquelleAutor Mazen Kasser

  10. 3

    Wenn Sie möchten, verwenden Sie StoryBoard und würde gerne weiter Tippen, in der runtime-Attribute, können Sie ganz einfach erstellen Sie eine Erweiterung zu sichten und nutzbar zu machen im storyboard.

    Schritt 1. Erweiterung anlegen

    extension UIView {

@IBInspectable var shadowRadius: CGFloat {
    get {
        return layer.shadowRadius
    }
    set {
        layer.shadowRadius = newValue
    }
}

@IBInspectable var shadowOpacity: Float {
    get {
        return layer.shadowOpacity
    }
    set {
        layer.shadowOpacity = newValue
    }
}

@IBInspectable var shadowOffset: CGSize {
    get {
        return layer.shadowOffset
    }
    set {
        layer.shadowOffset = newValue
    }
}

@IBInspectable var maskToBound: Bool {
    get {
        return layer.masksToBounds
    }
    set {
        layer.masksToBounds = newValue
    }
}
}

    Schritt 2. jetzt können Sie diese Attribute in der storyboard -Wie erstelle ich einen Schatten unter einem UIView?

    InformationsquelleAutor king_T

  11. 1

    Können Sie eigene utility-Funktion erstellt für Schatten und Ecke radius als unten:

    - (void)addShadowWithRadius:(CGFloat)shadowRadius withShadowOpacity:(CGFloat)shadowOpacity withShadowOffset:(CGSize)shadowOffset withShadowColor:(UIColor *)shadowColor withCornerRadius:(CGFloat)cornerRadius withBorderColor:(UIColor *)borderColor withBorderWidth:(CGFloat)borderWidth forView:(UIView *)view{

    //drop shadow
    [view.layer setShadowRadius:shadowRadius];
    [view.layer setShadowOpacity:shadowOpacity];
    [view.layer setShadowOffset:shadowOffset];
    [view.layer setShadowColor:shadowColor.CGColor];

    //border radius
    [view.layer setCornerRadius:cornerRadius];

    //border
    [view.layer setBorderColor:borderColor.CGColor];
    [view.layer setBorderWidth:borderWidth];
}

    Hoffe, es wird dir helfen!!!

    InformationsquelleAutor Sandip Patel - SM

  12. 1

    Alle Antworten sind alle gut, aber ich möchte hinzufügen, ein weiterer Punkt

    Wenn Sie auf ein problem stoßen, wenn Sie Zellen in einer Tabelle, Deque eine neue Zelle besteht eine Diskrepanz im Schatten, also in diesem Fall, Sie benötigen, um Ihre Schatten-code in einer Methode layoutSubviews, so dass es verhält sich gut in allen Bedingungen.

    -(void)layoutSubviews{
    [super layoutSubviews];

    [self.contentView setNeedsLayout];
    [self.contentView layoutIfNeeded];
    [VPShadow applyShadowView:self];
}

    oder in ViewControllers für bestimmte Perspektive auf die Stelle, shadow-code, der in die folgende Methode, so dass es seine Arbeit gut

    -(void)viewDidLayoutSubviews{
    [super viewDidLayoutSubviews];

    [self.viewShadow layoutIfNeeded];
    [VPShadow applyShadowView:self.viewShadow];
}

    Habe ich geändert mein Schatten-Implementierung für neue Entwickler für mehr verallgemeinerte form ex:

    /*!
 @brief Add shadow to a view.

 @param layer CALayer of the view.

 */
+(void)applyShadowOnView:(CALayer *)layer OffsetX:(CGFloat)x OffsetY:(CGFloat)y blur:(CGFloat)radius opacity:(CGFloat)alpha RoundingCorners:(CGFloat)cornerRadius{
    UIBezierPath *shadowPath = [UIBezierPath bezierPathWithRoundedRect:layer.bounds cornerRadius:cornerRadius];
    layer.masksToBounds = NO;
    layer.shadowColor = [UIColor blackColor].CGColor;
    layer.shadowOffset = CGSizeMake(x,y);//shadow x and y
    layer.shadowOpacity = alpha;
    layer.shadowRadius = radius;//blur effect
    layer.shadowPath = shadowPath.CGPath;
}

    InformationsquelleAutor Vishal16

  13. 1

    Für andere Xamarians, die Xamarin.iOS - /C# - version der Antwort würde wie folgt Aussehen:

    public override void DrawRect(CGRect area, UIViewPrintFormatter formatter)
{
    CGContext currentContext = UIGraphics.GetCurrentContext();
    currentContext.SaveState();
    currentContext.SetShadow(new CGSize(-15, 20), 5);
    base.DrawRect(area, formatter);
    currentContext.RestoreState();                
}

    Der Hauptunterschied ist, dass Sie erwerben eine Instanz von CGContext auf die Sie direkt aufrufen der entsprechenden Methoden.

    InformationsquelleAutor Martin Zikmund

  14. 0

    Swift 3

    self.paddingView.layer.masksToBounds = false
self.paddingView.layer.shadowOffset = CGSize(width: -15, height: 10)
self.paddingView.layer.shadowRadius = 5
self.paddingView.layer.shadowOpacity = 0.5

    InformationsquelleAutor Josh O'Connor

Schreibe einen Kommentar