FTWButton is a UIControl subclass that lets you easily set color, gradient, text, shadow, border, and icon properties for various states and animates between them.
You can find it at FTW’s GitHub, at github.com/FTW/FTWButton
Usage
Using FTWButton is similar to UIButton, but it’s built from the ground-up. Instead of relying on background images, FTWButton draws itself.
Properties
FTWButton has several properties, that can be set for each state:
Frame
Background Color
Background Gradient Colors
Corner Radius
Icon
Text
Text Color
Text Shadow Color
Text Shadow Offset
Border Color
Border Gradient Colors
Border Width
Shadow Color
Shadow Offset
Shadow Opacity
Shadow Blur Radius
Inner Shadow Color
Inner Shadow Offset
Inner Shadow Blur Radius
They are all animatable and transition between states.
Example Code
button1 = [[FTWButton alloc] init];
button1.frame = CGRectMake(20, 20, 280, 40);
[button1 setColors:[NSArray arrayWithObjects:
[UIColor colorWithRed:2.0f/255 green:184.0f/255 blue:255.0f/255 alpha:1.0f],
[UIColor colorWithRed:0.0f/255 green:68.0f/255 blue:255.0f/255 alpha:1.0f],
nil] forControlState:state];
[button1 setInnerShadowColor:[UIColor colorWithRed:108.0f/255 green:221.0f/255 blue:253.0f/255 alpha:1.0f] forControlState:UIControlStateNormal];
[button1 setInnerShadowOffset:CGSizeMake(0, 1) forControlState:UIControlStateNormal];
[button1 setShadowColor:[UIColor blackColor] forControlState:UIControlStateNormal];
[button1 setShadowOffset:CGSizeMake(0, 1) forControlState:UIControlStateNormal];
[button1 setShadowOpacity:1.0f forControlState:UIControlStateNormal];
[button1 setTextColor:[UIColor colorWithWhite:1.0f alpha:1.0f] forControlState:UIControlStateNormal];
[button1 setTextShadowColor:[UIColor colorWithWhite:78.0f/255 alpha:1.0f] forControlState:UIControlStateNormal];
[button1 setTextShadowOffset:CGSizeMake(0, -1) forControlState:UIControlStateNormal];
[button1 setText:@"Tap me" forControlState:UIControlStateNormal];
[button1 setText:@"Tapped!" forControlState:UIControlStateSelected];
[button1 addTarget:self action:@selector(buttonTapped:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:button1];
You can combine this code and other styles in any way you like.
Built-in Styles
This code is a bit verbose, so we’ve included several default styles, with colors chosen by our designer.
These styles are:
A disabled style (gray gradient background, gray text)
A delete style (red)
A gray style
A light blue style
A richer blue style
A yellow style
A black style
Feel free to use the format to add your own. Please note that many of the styles add a highlighted state as well.
With those styles, the code becomes much simpler:
button1 = [[FTWButton alloc] init];
button1.frame = CGRectMake(20, 20, 280, 40);
[button1 addBlueStyleForState:UIControlStateNormal];
[button1 addYellowStyleForState:UIControlStateSelected];
[button1 setText:@"Tap me" forControlState:UIControlStateNormal];
[button1 setText:@"Tapped!" forControlState:UIControlStateSelected];
[button1 addTarget:self action:@selector(buttonTapped:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:button1];
Setting button1.selected to YES will change the color to yellow, and fade the text from “Tap me” to “Tapped”.
Bridges the gap between design tools and code tools
There are several things that Photoshop makes easy, such as inner shadows and border gradients, that are fairly difficult to do without images (and in some cases, even with images) in iOS. If you’re building a dynamic button with text and colors, consider making it with FTWButton, so you can rapidly adjust it to see what it would look like in the app itself.
Also, consider a color framework such as EDColor, which can make adding colors to FTWButton much easier.
Demo App
The demo app contains several examples of FTWButton, including changing color on selection, border animations, gradient borders, fancy inner shadow, icons, and changing the frame on selection.
