Линейный градиент iOS на UIButton не отображается должным образом

Question

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

Вот мой код:

UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
button.titleLabel.font = [UIFont fontWithName:@"SFUIDisplay-Medium" size:16];
[button setTitleColor:[UIColor whiteColor]
             forState:UIControlStateNormal];
button.layer.cornerRadius = [UIButton cornerRadius];
button.contentEdgeInsets = UIEdgeInsetsMake(13, 0, 13, 0);

button.frame = CGRectMake(50, 50, 100, 40); //this line is new

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = button.layer.bounds;
gradientLayer.colors = [NSArray arrayWithObjects:
                        (id)[UIColor lightGrayColor].CGColor,
                        (id)[UIColor blackColor].CGColor,
                        nil];
gradientLayer.locations = [NSArray arrayWithObjects:
                           [NSNumber numberWithFloat:0.0f],
                           [NSNumber numberWithFloat:1.0f],
                           nil];
gradientLayer.cornerRadius = button.layer.cornerRadius;

gradientLayer.startPoint = CGPointMake(0, 0.5); //this line is new
gradientLayer.endPoint = CGPointMake(1, 0.5); //this line is new

[button.layer addSublayer:gradientLayer];
button.translatesAutoresizingMaskIntoConstraints = NO;
[button setTitle:@"Test"
        forState:UIControlStateNormal];
[button constrainHeight:56];
[button addTarget:self
        action:@selector(doAction)
        forControlEvents:UIControlEventTouchUpInside];
[self addSubview:button];

Если я добавлю в этой строке:

button.backgroundColor = [UIColor colorWithRed:0.2 green:0.2 blue:0.2 alpha:1.0];

, то кнопка выглядит следующим образом.

Answer 1

Сначала попробуйте добавить свою кнопку в представление.Тогда не похоже, что вы устанавливаете начальную и конечную точки.Для линейного градиента попробуйте что-то вроде:

[self.view addSubview: button];

gradientLayer.startPoint = CGPointMake(x: 0, y: 0.5);
gradientLayer.endPoint = CGPointMake(x: 1, y: 0.5);

Эта конфигурация обеспечит, чтобы градиент начинался в середине левой стороны и заканчивался в середине правой стороны.Вы можете повозиться со значениями для разных типов градиентов, используя идею, описанную ниже:

(0, 0)     ||     (1, 0)
           ||
=========================
           ||
(1, 0)     ||     (1, 1)

Answer 2

Ваш код работает нормально после того, как я назначил frame, например:

button.frame = CGRectMake(50, 50, 100, 40);

И добавил для просмотра контроллера, например:

[self.view addSubview:button];