iOS linear gradient on UIButton not displaying properly - ios

Question

I am trying to add a gradient to my custom UIButton, but when I run it, the button appears transparent instead of showing the desired gradient.
Here is my code:
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];
If I add in this line:
button.backgroundColor = [UIColor colorWithRed:0.2 green:0.2 blue:0.2 alpha:1.0];
then the button looks like this.

Answer 1

Your code works fine after I have assigned frame, e.g.:
button.frame = CGRectMake(50, 50, 100, 40);
And added to view controller's view, e.g.:
[self.view addSubview:button];

Answer 2

First, try adding your button to the view. Then, it doesn't look like you are setting a start point and end point. For a linear gradient, try something like:
[self.view addSubview: button];
gradientLayer.startPoint = CGPointMake(x: 0, y: 0.5);
gradientLayer.endPoint = CGPointMake(x: 1, y: 0.5);
This configuration will ensure the gradient starts at the middle of the left side and end at the middle of the right side. You can tinker with the values for different types of gradients using the idea described below:
(0, 0) || (1, 0)
||
=========================
||
(1, 0) || (1, 1)