text transparency|color gradient

Question

I am trying to put transparency (or a color gradient) on the title of an UIButton. I don't know how do that. I have tried to simply put a clearColor on the titleColor but we only see the background color.

So i hope that there is someone here who will be an amazing idea for my problem.

What's desired

My solution

self.loginButton = [UIButton buttonWithType:UIButtonTypeCustom];
self.loginButton.backgroundColor=  [UIColor whiteColor];
self.loginButton.frame = CGRectMake(self.signUpButton.left,
                                    0,
                                    self.signUpButton.frame.size.width,
                                    self.signUpButton.frame.size.height);
[self.loginButton.layer setBackgroundColor:[[UIColor blackColor] CGColor]];
self.loginButton.layer.borderColor = [[UIColor whiteColor] CGColor];
self.loginButton.layer.borderWidth = 1.0f;
self.loginButton.layer.cornerRadius = 3.0f;
[self.loginButton addTarget:self action:@selector(loginButtonClicked:) forControlEvents:UIControlEventTouchUpInside];
    self.loginButtonLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
self.loginButtonLabel.font = [UIFont fontWithName:@"OpenSans-Light" size:16.0f];
self.loginButtonLabel.textColor = [UIColor whiteColor];
self.loginButtonLabel.text = @"Connexion";
[self.loginButtonLabel sizeToFit];

UIColor *topColor = [UIColor blueColor];
UIColor *bottomColor = [UIColor orangeColor];

self.gradientView = [[UIView alloc] initWithFrame:self.loginButtonLabel.frame];
[self.loginButton addSubview:self.gradientView];
[self.loginButton sendSubviewToBack:self.gradientView];


[self.loginButton addSubview:self.loginButtonLabel];

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = self.gradientView.frame;
gradient.colors = [NSArray arrayWithObjects:(id)topColor.CGColor, (id)bottomColor.CGColor, nil];
gradient.startPoint = CGPointMake(0, 0.5);
gradient.endPoint = CGPointMake(1, 0.5);
[self.gradientView.layer addSublayer:gradient];

self.gradientView.layer.mask = self.loginButtonLabel.layer;
self.gradientView.layer.masksToBounds = YES;

self.gradientView.center = CGPointMake(self.loginButton.width / 2, self.loginButton.height / 2);
[self.view addSubview:self.loginButton];

But Now i need to put the gradient on the border. Any idea ?

Create an image and put it into the image attribute of the button and remove all text from it — Ignacy Debicki, Feb 12 '15 at 16:47
Use the `UILabel`'s `layer` as a mask for a `CAGradientLayer`. — Ian MacDonald, Feb 12 '15 at 16:49
Thank you for your answer, but i don't succeed to implement your solution. my code is in my initial post. — gauthier, Feb 13 '15 at 10:29
You are not using it, check this question and answer http://stackoverflow.com/q/10814922/792677 — A-Live, Feb 13 '15 at 10:56
`[self.loginButton.titleLabel.layer addSublayer:gradient];`? — Larme, Feb 13 '15 at 10:56
Thank you for your answers, i have custom my button. I have put a label and a view (with gradient) programmatically. And it's work fine (i put my code in my initial post). — gauthier, Feb 13 '15 at 11:45

score 0 · Accepted Answer · answered Feb 13 '15 at 13:39

So my solution is to create a custom button with an UILabel. I will use an UIView with a gradient for color the text.

The solution :

self.loginButton = [UIButton buttonWithType:UIButtonTypeCustom];
self.loginButton.backgroundColor=  [UIColor whiteColor];
self.loginButton.frame = CGRectMake(self.signUpButton.left,
                                0,
                                self.signUpButton.frame.size.width,
                                self.signUpButton.frame.size.height);
[self.loginButton.layer setBackgroundColor:[[UIColor blackColor] CGColor]];
self.loginButton.layer.borderColor = [[UIColor whiteColor] CGColor];
self.loginButton.layer.borderWidth = 1.0f;
self.loginButton.layer.cornerRadius = 3.0f;
[self.loginButton addTarget:self action:@selector(loginButtonClicked:) forControlEvents:UIControlEventTouchUpInside];
self.loginButtonLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
self.loginButtonLabel.font = [UIFont fontWithName:@"OpenSans-Light" size:16.0f];
self.loginButtonLabel.textColor = [UIColor whiteColor];
self.loginButtonLabel.text = @"Connexion";
[self.loginButtonLabel sizeToFit];

UIColor *topColor = [UIColor blueColor];
UIColor *bottomColor = [UIColor orangeColor];

self.gradientView = [[UIView alloc] initWithFrame:self.loginButtonLabel.frame];
[self.loginButton addSubview:self.gradientView];
[self.loginButton sendSubviewToBack:self.gradientView];


[self.loginButton addSubview:self.loginButtonLabel];

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = self.gradientView.frame;
gradient.colors = [NSArray arrayWithObjects:(id)topColor.CGColor, (id)bottomColor.CGColor, nil];
gradient.startPoint = CGPointMake(0, 0.5);
gradient.endPoint = CGPointMake(1, 0.5);
[self.gradientView.layer addSublayer:gradient];

self.gradientView.layer.mask = self.loginButtonLabel.layer;
self.gradientView.layer.masksToBounds = YES;

self.gradientView.center = CGPointMake(self.loginButton.width / 2, self.loginButton.height / 2);
[self.view addSubview:self.loginButton];

text transparency|color gradient

1 Answers1