iOS SDK - CoreAnimation, we program beautiful buttons

Many probably faced with the need to quickly create controls in the mobile user interface. Consider the standard UIButton buttons. The basic control does not suit the exacting customer a little, and often the standard solution is to pull state bits on the buttons. Whether the picture is stretched or the entire button is cut out - the solution requires additional time for the design of the user interface. It would be nice to have a universal control, with more visual capabilities than the basic UIButton.


The most logical is to extend UIButton - so let's do
we create our own class inherited from UIButton (do not forget to include it in the project QuartzCore.framework), it will greatly facilitate our life together with a visitor in iOS.

@class CAGradientLayer;

@interface CustomButton : UIButton {
@private
UIColor* _gradientStartColor;
UIColor* _gradientEndColor;

CAGradientLayer* _gradientLayer;
}

@property (nonatomic, retain) UIColor* gradientStartColor;
@property (nonatomic, retain) UIColor* gradientEndColor;

@end

')
As many have guessed, we will use CAGradientLayer to draw the gradient background of the button. This class provides ample fill options. We consider only a small (basic) part of them.

#import "CustomButton.h"
#import <QuartzCore/QuartzCore.h>

@implementation CustomButton

@synthesize gradientStartColor = _gradientStartColor;
@synthesize gradientEndColor = _gradientEndColor;


since we plan to use our control in InterfaceBuilder (hereafter IB), initialization should occur in the method below

-(void)awakeFromNib;
{
_gradientLayer = [[CAGradientLayer alloc] init];
_gradientLayer.bounds = self.bounds;

_gradientLayer.position = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2);

[self.layer insertSublayer:_gradientLayer atIndex:0];

self.layer.cornerRadius = 5.0f; // ,
self.layer.masksToBounds = YES;
self.layer.borderWidth = 1.0f;

}


Gradient drawing

- (void)drawRect:(CGRect)rect;
{
if (_gradientStartColor && _gradientEndColor)
{
[_gradientLayer setColors:
[NSArray arrayWithObjects: (id)[_gradientStartColor CGColor]
, (id)[_gradientEndColor CGColor], nil]];
}

[super drawRect:rect];
}


didn't we forget anything?

- (void)dealloc {
[_gradientEndColor release];
[_gradientStartColor release];
[_gradientLayer release];
[super dealloc];
}

@end

Here is our little classy and we are tribal, let's try to insert it into the interface.

Create a type outlet of our class (CustomButton) in the view controller

@interface GlossyButtonTestViewController : UIViewController {
@private
IBOutlet CustomButton* btn;
}


Open IB, push the button with the Custom type and link it to the outlet in the controller.
In the body of the controller implementation, we initialize the values ​​of the colors of the button background gradient.

- (void)viewDidLoad {
[super viewDidLoad];

btn.gradientStartColor = [UIColor whiteColor];
btn.gradientEndColor = [UIColor grayColor];
[self.view addSubview:btn];
}


collect the project and see
just such a button



It is quite a button and could be limited, but we will go further. There is clearly not enough brilliance.

Said done - add a highlight on the button.

Insert another layer into the interface and add its initialization to awakeFromNib.

_glossyLayer = [[CAGradientLayer alloc] init];
_glossyLayer.bounds = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height/2);
_glossyLayer.position = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/4);
[self.layer addSublayer:_glossyLayer];


in drawRect we add initialization of layer gradient colors


[_glossyLayer setColors:
[NSArray arrayWithObjects:
(id)[[UIColor colorWithRed:1.0f green:1.0f blue:1.0f alpha:0.99f] CGColor]
, (id)[[UIColor colorWithRed:1.0f green:1.0f blue:1.0f alpha:0.2f] CGColor], nil]];

and ... run
That's all.



Do not forget that you can add transitions to the CoreAnimation layer, etc.
Our class is purely informative, for its full use in projects it is necessary to expand it with animations of states.

Posted by Marshet15 , but he doesn't have enough karma to publish an article.