开发者

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

开发者 https://www.devze.com 2023-02-06 21:55 出处:网络
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?

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);


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);


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


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];
}


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!

0

精彩评论

暂无评论...
验证码 换一张
取 消