Як додати тінь до кнопки UIB?


76

Я хотів би додати тінь до кнопки UIB. Я намагався використовувати властивості self.layer.shadow *. Ці властивості працюють в UIView, але вони поводяться по-різному в UIButton. Я був би дуже вдячний, якби міг отримати підказки для малювання тіні. Дякую!

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

У Керівництві по анімації ядра, developer.apple.com/mac/library/documentation/cocoa/conceptual/… , сказано: ОС iPhone Примітка. Як оцінка продуктивності ОС iPhone не підтримує властивості shadowColor, shadowOffset, shadowOpacity та shadowRadius. Денг.
d_CFO

Зараз ці властивості підтримуються з iOS 3.2. З повагою,
Квентін

Відповіді:


100

У питанні є лише одна крихітна помилка, через яку тінь не відображається: masksToBounds:YESтакож маскує тінь! Ось правильний код:

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

На жаль, це означає, що ми не можемо одночасно маскувати вміст і мати тінь без хитрощів.

Пам'ятайте про це #import <QuartzCore/QuartzCore.h>.


62

Ось просте рішення, якщо ви використовуєте 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;

Щойно це запрацювало, і зрозумів, що це варто опублікувати. Сподіваюся, це допомагає!


1
дуже елегантне рішення! Дякую!
Віталій Гоженко

1
працює ідеально ... навіть якщо я не імпортую "<QuartzCore / QuartzCore.h>" Це працює для мене .. про іншу людину, яку я не знаю.
g212gs

якщо ви зробите це таким чином, ваше допоміжне відставання від дотику на спеціальній клавіатурі
TomSawyer

39

Ось підклас, який не лише створює тінь, а й кнопку анімує, коли ви натискаєте на неї.

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

3

Ви можете створити підклас і налаштувати його значення в Xcode

Нижче наведено приклад:

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


 }

2

Ви можете підклас UIButton і замінити метод drawRect: і додати ручну тінь. Це набагато більше роботи, і тепер вам слід зробити кілька речей щодо кварцу 2d, але результат - саме те, що ви хочете. В іншому випадку ви можете просто додати зображення, але я віддаю перевагу підкласу UIButton, оскільки він дуже гнучкий щодо розміру кнопки, він є більш загальним.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.