How to create a UIButton with a black gradient for iPhone?
I want to create a UIButton with the normal black gradient theme in iOS. I've looked at the documentation and can't seem to figure out how to do this. When 开发者_运维问答I create the button, I get a rounded rect button with no color.
Here is my code:
UIButton* leagueTeamButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
Any suggestions on how I can add the standard themed black gradient to the button?
You can also easily do it using layers:
-(void) addGradient:(UIButton *) _button {
// Add Border
CALayer *layer = _button.layer;
layer.cornerRadius = 8.0f;
layer.masksToBounds = YES;
layer.borderWidth = 1.0f;
layer.borderColor = [UIColor colorWithWhite:0.5f alpha:0.2f].CGColor;
// Add Shine
CAGradientLayer *shineLayer = [CAGradientLayer layer];
shineLayer.frame = layer.bounds;
shineLayer.colors = [NSArray arrayWithObjects:
(id)[UIColor colorWithWhite:1.0f alpha:0.4f].CGColor,
(id)[UIColor colorWithWhite:1.0f alpha:0.2f].CGColor,
(id)[UIColor colorWithWhite:0.75f alpha:0.2f].CGColor,
(id)[UIColor colorWithWhite:0.4f alpha:0.2f].CGColor,
(id)[UIColor colorWithWhite:1.0f alpha:0.4f].CGColor,
nil];
shineLayer.locations = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0f],
[NSNumber numberWithFloat:0.5f],
[NSNumber numberWithFloat:0.5f],
[NSNumber numberWithFloat:0.8f],
[NSNumber numberWithFloat:1.0f],
nil];
[layer addSublayer:shineLayer];
}
This method makes a good looking custom button. I combined the examples for gradient layer and for a shine layer.
-(void) myButtonChange: (UIButton*) btn
{
[btn setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted];
CAGradientLayer *btnGradient = [CAGradientLayer layer];
btnGradient.frame = btn.bounds;
btnGradient.colors = [NSArray arrayWithObjects:
(id)[[UIColor colorWithRed:255.0f/255.0f green:255.0f/255.0f blue:255.0f/255.0f alpha:.6f] CGColor],
(id)[[UIColor colorWithRed:200.0f/255.0f green:200.0f/255.0f blue:200.0f/255.0f alpha:.4f] CGColor],
(id)[[UIColor colorWithRed:150.0f/255.0f green:150.0f/255.0f blue:150.0f/255.0f alpha:.4f] CGColor],
(id)[[UIColor colorWithRed:100.0f/255.0f green:100.0f/255.0f blue:100.0f/255.0f alpha:.4f] CGColor],
(id)[[UIColor colorWithRed:50.0f/255.0f green:50.0f/255.0f blue:50.0f/255.0f alpha:.4f] CGColor],
(id)[[UIColor colorWithRed:5.0f/255.0f green:5.0f/255.0f blue:5.0f/255.0f alpha:.4f] CGColor],
nil];
[btn.layer insertSublayer:btnGradient atIndex:0];
CAGradientLayer *glossLayer = [CAGradientLayer layer];
glossLayer.frame = btn.bounds;
glossLayer.colors = [NSArray arrayWithObjects:
(id)[UIColor colorWithWhite:1.0f alpha:0.4f].CGColor,
(id)[UIColor colorWithWhite:1.0f alpha:0.1f].CGColor,
(id)[UIColor colorWithWhite:0.75f alpha:0.0f].CGColor,
(id)[UIColor colorWithWhite:1.0f alpha:0.1f].CGColor,
nil];
glossLayer.locations = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0f],
[NSNumber numberWithFloat:0.5f],
[NSNumber numberWithFloat:0.5f],
[NSNumber numberWithFloat:1.0f],
nil];
[btn.layer insertSublayer:glossLayer atIndex:0];
CALayer *btnLayer = [btn layer];
[btnLayer setMasksToBounds:YES];
UIColor*mycolor = btn.backgroundColor;
[btn.layer setBorderColor:[mycolor CGColor]];
[[btn layer] setBorderWidth:2.0f];
[[btn layer] setCornerRadius:10.0f];
}
Attach all the buttons to an IBOutlet collection...
@property (strong, nonatomic) IBOutletCollection(UIButton) NSArray *bigbuttongroup;
...and then run the method when you need to
for(UIButton *btn in self.bigbuttongroup)
{
[self myButtonChange:btn];
}
Make one (or two, if you want it change appearance when press down) in Photoshop - or any image processing software - and put into your project's resource folder, use the following code to add the image as a UIButton:
UIButton *yourButton=[UIButton buttonWithType:UIButtonTypeCustom];
[yourButton setFrame:CGRectMake(0,0,10,10)];
[yourButton addTarget:self action:@selector(functionYouWantToCall:) forControlEvents:UIControlEventTouchUpInside];
[yourButton setImage:[UIImage imageNamed:@"imageNormalState.png"] forState:UIControlStateNormal];
[yourButton setImage:[UIImage imageNamed:@"imageWhenPressDown.png"] forState:UIControlStateHighlighted]; // option if you want to display another image (i.e. darker one) when user press the button
You can have black background button without gradient effect, you have to set its background color to black and type as custombutton. For gradient effect, i will suggest you to put an image as background image of your button and set it's type as custom button.
Hear is one example for making your view with gradient color you can do same with button.
UIView *view = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 100)] autorelease];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = view.bounds;
static NSMutableArray *colors = nil;
if (colors == nil) {
colors = [[NSMutableArray alloc] initWithCapacity:3];
UIColor *color = nil;
color = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];
[colors addObject:(id)[color CGColor]];
color = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:1.0];
[colors addObject:(id)[color CGColor]];
color = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];
[colors addObject:(id)[color CGColor]];
}
// [(CAGradientLayer *)self.layer setColors:colors];
// [(CAGradientLayer *)self.layer setLocations:[NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0], [NSNumber numberWithFloat:0.48], [NSNumber numberWithFloat:1.0], nil]];
gradient.colors = colors;
[view.layer insertSublayer:gradient atIndex:0];
[self.view addSubview:view];
精彩评论