UIButton category with new methods to setup a button with text + FontAwesome Icon. Open App
- Updated demo project that didn't work due to UIView+Autolayout category
Added the feature to set the icon passing an UIImageView
-(void)setIconImageView:(UIImageView *)iconImageView;
Fixed issue related with vertical size of subviews
Added the possibility to set the icon in UIImage format. The way to do that is just using the methods:
+(UIAwesomeButton*)buttonWithType:(UIButtonType)type text:(NSString *)text icon:(NSString *)icon attributes:(NSDictionary *)attributes andIconPosition:(IconPosition)position;
-(id)initWithFrame:(CGRect)frame text:(NSString *)text iconImage:(UIImage *)icon attributes:(NSDictionary *)attributes andIconPosition:(IconPosition)position;
- Background color can be setup dependending on the UIButton State thanks to its new method:
-(void)setBackgroundColor:(UIColor*)color forUIControlState:(UIControlState)state;
- UIButton can be initialized using following
+(UIButton*)buttonWithType:(UIButtonType)type text:(NSString*)text icon:(NSString*)icon textAttributes:(NSDictionary*)attributes andIconPosition:(IconPosition)position;
-(id)initWithFrame:(CGRect)frame text:(NSString*)text icon:(NSString*)icon textAttributes:(NSDictionary*)attributes andIconPosition:(IconPosition)position;
where you can specify text/icon attributes using an NSDictionary ( you'll find more information in Apple Documentation. Moreover you can specify position of Icon inside UIButton thanks to parameter IconPosition (Left or Right )) - Anytime you can change following properties of UIButton:
textAttributes-
-(void)setTextAttributes:(NSDictionary*)attributes forUIControlState:(UIControlState)state;
backgroundColor--(void)setBackgroundColor:(UIColor*)color forUIControlState:(UIControlState)state;
iconPosition--(void)setIconPosition:(IconPosition)position;
buttonText--(void)setButtonText:(NSString*)text;
buttonIcon--(void)setButtonIcon:(NSString*)icon;
buttonRadius--(void)setRadius:(CGFloat)radius;
The easiest way to install PPiAwesomeButton is using CocoaPods:
- Add the pod to podfile
pod 'PPiAwesomeButton'
pod 'FontAwesome+iOS', :git => '[email protected]:alexdrone/ios-fontawesome.git'
-
Refresh your project pods
pod install
-
Add awesome font to your Info.plists setting
UIAppFonts
entry as array and addingFontAwesome.ttf
to this array.
Here is an example of using for generate an UIButton with Twitter design
UIButton *twitter1=[UIButton buttonWithType:UIButtonTypeCustom text:@"Twitter" icon:@"icon-twitter" textAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:15],NSForegroundColorAttributeName:[UIColor whiteColor]} andIconPosition:IconPositionLeft];
[twitter1 setBackgroundColor:[UIColor colorWithRed:27.0f/255 green:178.0f/255 blue:233.0f/255 alpha:1.0] forUIControlState:UIControlStateNormal];
[twitter1 setBackgroundColor:[UIColor colorWithRed:60.0f/255 green:89.0f/255 blue:157.0f/255 alpha:1.0] forUIControlState:UIControlStateHighlighted];
twitter1.frame=CGRectMake(10, 10, 120, 44);
[twitter1 setRadius:5.0];
[self.view addSubview:twitter1];
Here another one for a Pinterest button
UIButton *pinterest2=[UIButton buttonWithType:UIButtonTypeCustom text:@"Pin it!" icon:@"icon-pinterest" textAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:32],NSForegroundColorAttributeName:[UIColor whiteColor]} andIconPosition:IconPositionLeft];
[pinterest2 setBackgroundColor:[UIColor colorWithRed:205.0f/255 green:35.0f/255 blue:44.0f/255 alpha:1.0] forUIControlState:UIControlStateNormal];
[pinterest2 setBackgroundColor:[UIColor colorWithRed:244.0f/255 green:61.0f/255 blue:91.0f/255 alpha:1.0] forUIControlState:UIControlStateHighlighted];
pinterest2.frame=CGRectMake(10, 270, 280, 50);
[pinterest2 setRadius:0.0];
[self.view addSubview:pinterest2];
And for Facetime too:
UIButton *facetime1=[UIButton buttonWithType:UIButtonTypeCustom text:@"Facetime" icon:@"icon-facetime-video" textAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:15],NSForegroundColorAttributeName:[UIColor whiteColor]} andIconPosition:IconPositionRight];
[facetime1 setBackgroundColor:[UIColor colorWithRed:40.0f/255 green:219.0f/255 blue:31.0f/255 alpha:1.0] forUIControlState:UIControlStateNormal];
facetime1.frame=CGRectMake(10, 160, 120, 44);
[facetime1 setRadius:22.0];
[self.view addSubview:facetime1];
If you've detected some misalignments in icon and text I've created a new class called UIAwesomeButton (UIView subclass) that has the same behaviour an UIButton has but implemented from zero ( and without misalignments between elements ). Here's an example of implementation into your project:
UIAwesomeButton *button4 = [[UIAwesomeButton alloc] initWithFrame:CGRectMake(10, 400, 280, 50) text:@"Test" icon:nil textAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:15],NSForegroundColorAttributeName:[UIColor whiteColor],@"IconFont":[UIFont fontWithName:@"fontawesome" size:40]} andIconPosition:IconPositionLeft];
[button4 setBackgroundColor:[UIColor colorWithRed:205.0f/255 green:35.0f/255 blue:44.0f/255 alpha:1.0] forUIControlState:UIControlStateNormal];
[button4 setBackgroundColor:[UIColor colorWithRed:244.0f/255 green:61.0f/255 blue:91.0f/255 alpha:1.0] forUIControlState:UIControlStateHighlighted];
[button4 setRadius:3.0];
[button4 setSeparation:10];
[button4 setTextAlignment:NSTextAlignmentLeft];
[button4 setActionBlock:^{
NSLog(@"Working!");
}];
[self.view addSubview:button4];
Attributes that you can apply to text in an attributed string.
NSString *const NSFontAttributeName;
NSString *const NSParagraphStyleAttributeName;
NSString *const NSForegroundColorAttributeName;
NSString *const NSBackgroundColorAttributeName;
NSString *const NSLigatureAttributeName;
NSString *const NSKernAttributeName;
NSString *const NSStrikethroughStyleAttributeName;
NSString *const NSUnderlineStyleAttributeName;
NSString *const NSStrokeColorAttributeName;
NSString *const NSStrokeWidthAttributeName;
NSString *const NSShadowAttributeName;
NSString *const NSVerticalGlyphFormAttributeName;
Full list here
You'll find the list of Awesome Icons here. Each icon has an identifier that you have to use in UIButton to add an Icon to your UIButton.