CODEWITHSUNDEEP
cocoa-touchxamarin.ios
Krumelur
Krumelur

Reputation: 33048

UIButton: Add gradient layer and title is not shown anymore - how to fix?

I'm using the code below to add a gradient layer to a UIButton. Works fine but the title is not visible anymore. Does anybody know how to fix?

UIButton oAddressBtn = UIButton.FromType (UIButtonType.Custom);
oAddressBtn.Frame = new RectangleF (0, 0, 150, 25);
oAddressBtn.VerticalAlignment = UIControlContentVerticalAlignment.Center;
oAddressBtn.Font = UIFont.FromName("Helvetica", 12);
oAddressBtn.SetTitleColor (UIColor.White, UIControlState.Normal);

// Create a gradient for the background.
CAGradientLayer oGradient = new CAGradientLayer ();
oGradient.Frame = oAddressBtn.Bounds;
oGradient.Colors = new CGColor[] { UIColor.FromRGB (170, 190, 235).CGColor, UIColor.FromRGB (120, 130, 215).CGColor };

// Assign gradient to the button.
oAddressBtn.Layer.MasksToBounds = true;
oAddressBtn.Layer.AddSublayer (oGradient);
oAddressBtn.Layer.CornerRadius = 10;
oAddressBtn.Layer.BorderColor = UIColor.FromRGB (120, 130, 215).CGColor;

// Set the button's title.
oAddressBtn.SetTitle (sAddress, UIControlState.Normal);

Upvotes: 10

Views: 10306

Answers (4)

Ratneshwar Singh
Ratneshwar Singh

Reputation: 591

For a button adding of sublayer didn't worked for it. Inserting sublayer below the title label worked for me. Here is reference code:

-(void)addGradientOnButtonWithStartColor:(UIColor *)startColor mediumColor:(UIColor *)mediumColor andEndColor:(UIColor *)endColor forButton:(UIButton *)customButton andTitle:(NSString *)buttonTitle{

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = customButton.layer.bounds;
gradientLayer.colors = [NSArray arrayWithObjects:
                        (id)startColor.CGColor,
                        (id)mediumColor.CGColor,
                         (id)endColor.CGColor,
                        nil];

gradientLayer.locations = nil;
gradientLayer.masksToBounds = YES;
gradientLayer.cornerRadius = customButton.layer.cornerRadius;
[customButton.layer insertSublayer:gradientLayer below:customButton.titleLabel.layer];


[customButton setTitle:buttonTitle forState:UIControlStateNormal];
[customButton setTitle:buttonTitle forState:UIControlStateSelected];

}

Call this method inside viewDidAppear method.

Thanks, Ratneshwar

Upvotes: 5

Ryan Anderson
Ryan Anderson

Reputation: 947

A different option is to use a third party tool call Pixate. http://www.pixate.com/ This tool allows you to use CSS3 and set the iOS control styles that way. This way you get to eliminate all of the low level control nuances.

Using it now and really enjoying the familiarity. A design can build out the CSS file for you and you would be good to go!

Upvotes: 2

Johan Kool
Johan Kool

Reputation: 15927

I have no idea how this is done in monotouch. But the answer below is the Obj-C variant for an approach where you don't have to add a sublayer.

Instead of inserting a gradient layer, you can also override the method +layerClass to return the CAGradientLayer class. The layer of the button is than of that class, and you can easily set its colors etc.

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

Upvotes: 3

Krumelur
Krumelur

Reputation: 33048

Ha! Asking a question and then finding it out all by myself...coincidence. I had to change the order. After assigning the gradient, the button's text properties have to be set and not before. Fixed code here:

UIButton oAddressBtn = UIButton.FromType (UIButtonType.Custom);
oAddressBtn.Frame = new RectangleF (0, 0, 150, 25);

// Create a gradient for the background.
CAGradientLayer oGradient = new CAGradientLayer ();
oGradient.Frame = oAddressBtn.Bounds;
oGradient.Colors = new CGColor[] { UIColor.FromRGB (170, 190, 235).CGColor, UIColor.FromRGB (120, 130, 215).CGColor };

// Assign gradient to the button.
oAddressBtn.Layer.MasksToBounds = true;
oAddressBtn.Layer.AddSublayer (oGradient);
oAddressBtn.Layer.CornerRadius = 10;
oAddressBtn.Layer.BorderColor = UIColor.FromRGB (120, 130, 215).CGColor;

// Set the button's title. Alignment and font have to be set here to make it work.
oAddressBtn.VerticalAlignment = UIControlContentVerticalAlignment.Center;
oAddressBtn.Font = UIFont.FromName("Helvetica", 12);
oAddressBtn.SetTitleColor (UIColor.White, UIControlState.Normal);

oAddressBtn.SetTitle (sAddress, UIControlState.Normal);

Upvotes: 15

Related Questions