Wie füge ich einem UIButton einen Schlagschatten hinzu?

76

Ich möchte einem UIButton einen Schlagschatten hinzufügen. Ich habe versucht, die Eigenschaften self.layer.shadow * zu verwenden. Diese Eigenschaften funktionieren in UIView, verhalten sich jedoch in UIButton anders. Ich würde es wirklich begrüßen, wenn ich irgendwelche Hinweise bekommen könnte, um den Schlagschatten zu zeichnen. Vielen Dank!

self.layer.cornerRadius = 8.0f;
self.layer.masksToBounds = YES;
self.layer.borderWidth = 1.0f;

self.layer.shadowColor = [UIColor greenColor].CGColor;
self.layer.shadowOpacity = 0.8;
self.layer.shadowRadius = 12;
self.layer.shadowOffset = CGSizeMake(12.0f, 12.0f);
Chris Frost
quelle
Der Core Animation Guide, developer.apple.com/mac/library/documentation/cocoa/conceptual/... , sagt: iPhone OS Hinweis: Als Performance - Betrachtung, iPhone OS nicht die shadow, shadowOffset, shadowOpacity nicht unterstützt, und shadowRadius Eigenschaften. Dang.
d_CFO
Diese Eigenschaften werden jetzt seit iOS 3.2 unterstützt. Grüße,
Quentin

Antworten:

100

Es gibt nur einen kleinen Fehler in der Frage, der dazu führt, dass der Schatten nicht angezeigt wird: masksToBounds:YESMaskiert auch den Schatten! Hier ist der richtige Code:

self.layer.cornerRadius = 8.0f;
self.layer.masksToBounds = NO;
self.layer.borderWidth = 1.0f;

self.layer.shadowColor = [UIColor greenColor].CGColor;
self.layer.shadowOpacity = 0.8;
self.layer.shadowRadius = 12;
self.layer.shadowOffset = CGSizeMake(12.0f, 12.0f);

Leider bedeutet dies, dass wir den Inhalt nicht maskieren können und gleichzeitig ohne Tricks einen Schatten haben.

Denken Sie daran #import <QuartzCore/QuartzCore.h>.

fzwo
quelle
61

Hier ist eine einfache Lösung, wenn Sie Folgendes verwenden UIButton:

#import <QuartzCore/QuartzCore.h>

button.imageView.layer.cornerRadius = 7.0f;
button.layer.shadowRadius = 3.0f;
button.layer.shadowColor = [UIColor blackColor].CGColor;
button.layer.shadowOffset = CGSizeMake(0.0f, 1.0f);
button.layer.shadowOpacity = 0.5f;
button.layer.masksToBounds = NO;

Ich habe es gerade zum Laufen gebracht und dachte, es lohnt sich zu posten. Hoffentlich hilft das!

msgambel
quelle
1
sehr elegante Lösung! Vielen Dank!
Vitaliy Gozhenko
1
funktioniert perfekt ... auch wenn ich nicht importiere "<QuartzCore / QuartzCore.h>" Es funktioniert für mich ... über andere Personen, die ich nicht kenne.
g212gs
Wenn Sie dies auf diese Weise tun, wird Ihre unterstützende Berührung in der benutzerdefinierten Tastatur
verzögert
39

Hier ist eine Unterklasse, die nicht nur den Schlagschatten erzeugt, sondern die Schaltfläche beim Drücken nach unten animiert.

//
//  ShadowButton.h

#import <Foundation/Foundation.h>

@interface ShadowButton : UIButton {
}

@end

//
//  ShadowButton.m

#import "ShadowButton.h"
#import <QuartzCore/QuartzCore.h>

@implementation ShadowButton

-(void)setupView{

    self.layer.shadowColor = [UIColor blackColor].CGColor;
    self.layer.shadowOpacity = 0.5;
    self.layer.shadowRadius = 1;
    self.layer.shadowOffset = CGSizeMake(2.0f, 2.0f);

}

-(id)initWithFrame:(CGRect)frame{
    if((self = [super initWithFrame:frame])){
        [self setupView];
    }

    return self;
}

-(id)initWithCoder:(NSCoder *)aDecoder{
    if((self = [super initWithCoder:aDecoder])){
        [self setupView];
    }

    return self;
}

-(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    self.contentEdgeInsets = UIEdgeInsetsMake(1.0,1.0,-1.0,-1.0);
    self.layer.shadowOffset = CGSizeMake(1.0f, 1.0f);
    self.layer.shadowOpacity = 0.8;

    [super touchesBegan:touches withEvent:event];

}

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
    self.contentEdgeInsets = UIEdgeInsetsMake(0.0,0.0,0.0,0.0);
    self.layer.shadowOffset = CGSizeMake(2.0f, 2.0f);
    self.layer.shadowOpacity = 0.5;

    [super touchesEnded:touches withEvent:event];

}

@end
avance
quelle
3

Sie können eine Unterklasse erstellen und ihre Werte in Xcode konfigurieren

Unten ist ein Beispiel:

import UIKit
import QuartzCore

@IBDesignable
class CustomButton: UIButton {

@IBInspectable var cornerRadius: CGFloat = 0 {
    didSet {
        layer.cornerRadius = cornerRadius
    }
}

@IBInspectable var borderWidth: CGFloat = 0 {
    didSet {
        layer.borderWidth = borderWidth
    }
}

@IBInspectable var borderColor: UIColor = UIColor.gray {
    didSet {
        layer.borderColor = borderColor.cgColor
    }
}

@IBInspectable var shadowColor: UIColor = UIColor.gray {
    didSet {
        layer.shadowColor = shadowColor.cgColor
    }
}

@IBInspectable var shadowOpacity: Float = 1.0 {
    didSet {
        layer.shadowOpacity = shadowOpacity
    }
}

@IBInspectable var shadowRadius: CGFloat = 1.0 {
    didSet {
        layer.shadowRadius = shadowRadius
    }
}

@IBInspectable var masksToBounds: Bool = true {
    didSet {
        layer.masksToBounds = masksToBounds
    }
}

@IBInspectable var shadowOffset: CGSize = CGSize(width: 12, height: 12) {
    didSet {
        layer.shadowOffset = shadowOffset
    }
}


 }
Abdul Yasin
quelle
2

Sie können UIButton unterordnen und die drawRect: -Methode überschreiben und manuell einen Schlagschatten hinzufügen. Das ist viel mehr Arbeit und Sie sollten jetzt ein paar Dinge über Quarz 2d tun, aber das Ergebnis ist genau das, was Sie wollen. Andernfalls könnten Sie einfach ein Bild hinzufügen, aber ich bevorzuge die Unterklasse UIButton, da es sehr flexibel in Bezug auf die Größe der Schaltfläche ist und allgemeiner.

burki
quelle