UIButton с градиентом, закругленные углы, граница и тень

Ответ 1

Так я нашел кнопку с закругленным углом, градиентом и тень. Этот пример имеет один конкретный градиент, но, очевидно, может быть заменен другими градиентами.

@implementation CustomButton

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

    return self;
}

- (void)awakeFromNib {
    [self setupView];
}

# pragma mark - main

- (void)setupView
{
    self.layer.cornerRadius = 10;
    self.layer.borderWidth = 1.0;
    self.layer.borderColor = [UIColor colorWithRed:167.0/255.0 green:140.0/255.0 blue:98.0/255.0 alpha:0.25].CGColor;
    self.layer.shadowColor = [UIColor blackColor].CGColor;
    self.layer.shadowRadius = 1;
    [self clearHighlightView];

    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = self.layer.bounds;
    gradient.cornerRadius = 10;
    gradient.colors = [NSArray arrayWithObjects:
                         (id)[UIColor colorWithWhite:1.0f alpha:1.0f].CGColor,
                         (id)[UIColor colorWithWhite:1.0f alpha:0.0f].CGColor,
                         (id)[UIColor colorWithWhite:0.0f alpha:0.0f].CGColor,
                         (id)[UIColor colorWithWhite:0.0f alpha:0.4f].CGColor,
                         nil];
    float height = gradient.frame.size.height;
    gradient.locations = [NSArray arrayWithObjects:
                            [NSNumber numberWithFloat:0.0f],
                            [NSNumber numberWithFloat:0.2*30/height],
                            [NSNumber numberWithFloat:1.0-0.1*30/height],
                            [NSNumber numberWithFloat:1.0f],
                            nil];
    [self.layer addSublayer:gradient];}

- (void)highlightView 
{
    self.layer.shadowOffset = CGSizeMake(1.0f, 1.0f);
    self.layer.shadowOpacity = 0.25;
}

- (void)clearHighlightView {
    self.layer.shadowOffset = CGSizeMake(2.0f, 2.0f);
    self.layer.shadowOpacity = 0.5;
}

- (void)setHighlighted:(BOOL)highlighted
{
    if (highlighted) {
        [self highlightView];
    } else {
        [self clearHighlightView];
    }
    [super setHighlighted:highlighted];
}


@end

Ответ 2

Вместо того, чтобы вставлять слой градиента, вы также можете переопределить метод +layerClass, чтобы вернуть класс CAGradientLayer. Уровень кнопки меньше, чем у этого класса, и вы можете легко установить его цвета и т.д.

+ (Class)layerClass {
    return [CAGradientLayer class];
}

Ответ 3

У меня была аналогичная проблема, однако вместо градиента у меня было изображение для фона. Я решил это в конце, используя:

+ (void) styleButton:(UIButton*)button
{
CALayer *shadowLayer = [CALayer new];
shadowLayer.frame = button.frame;

shadowLayer.cornerRadius = 5;

shadowLayer.backgroundColor = [UIColor whiteColor].CGColor;
shadowLayer.opacity = 0.5;
shadowLayer.shadowColor = [UIColor blackColor].CGColor;
shadowLayer.shadowOpacity = 0.6;
shadowLayer.shadowOffset = CGSizeMake(1,1);
shadowLayer.shadowRadius = 3;

button.layer.cornerRadius = 5;
button.layer.masksToBounds = YES;

UIView* parent = button.superview;
[parent.layer insertSublayer:shadowLayer below:button.layer];
}

Действительно интересно то, что если у вас есть clearColor, поскольку shadowLayer.backgroundColor просто не рисовал.

Ответ 4

Благодаря @lschult2. Вот быстрая версия.

import UIKit

class GradientButton: UIButton {

    var gradientLayer : CAGradientLayer!

    override func layoutSubviews() {
        super.layoutSubviews()
        setup()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
    }

    func setup() {
        layer.shadowOffset = CGSize(width: 2, height: 2)
        layer.shadowOpacity = 0.3
        layer.shadowRadius = 3.0
        layer.cornerRadius = 5
        setGradient(colorTop: UIColor(red: 96/255.0, green: 120/255.0, blue: 234/255.0, alpha: 1.0), colorBottom: UIColor(red: 23/255.0, green: 234/255.0, blue: 217/255.0, alpha: 1.0))
    }

    func setGradient(colorTop:UIColor, colorBottom:UIColor) {
        if gradientLayer == nil {
            gradientLayer = CAGradientLayer()
            gradientLayer.colors = [colorTop.cgColor, colorBottom.cgColor]
            gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
            gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
            gradientLayer.frame = bounds
            gradientLayer.name = "gradientLayer"
            gradientLayer.cornerRadius = 5
            layer.insertSublayer(gradientLayer, at: 0)
        }
    }
}