Giter Club home page Giter Club logo

ppiawesomebutton's Introduction

PPiAwesomeButton

โš ๏ธ Important note! This library is not maintained anymore. Feel free to keep it updated by yourself, either forking or asking for bening the contributor.

UIButton category with new methods to setup a button with text + FontAwesome Icon. Open App

Updates

7th - November 2014 - Cocoapods version - 1.4.2
  • Fixed a bug that caused users having empty buttons (when they tried to create the button with text but without icon)
28th -June-2014 - Cocoapods version - 1.3.7
  • Updated demo project that didn't work due to UIView+Autolayout category
26th-March-2014 - Cocoapods version - 1.3.7

Added the feature to set the icon passing an UIImageView

-(void)setIconImageView:(UIImageView *)iconImageView;

Fixed issue related with vertical size of subviews

25th-March-2014 - Cocoapods version - 1.3.7

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;

Features

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

Install

The easiest way to install PPiAwesomeButton is using CocoaPods:

  1. Add the pod to podfile
pod 'PPiAwesomeButton'
pod 'FontAwesome+iOS', :git => '[email protected]:alexdrone/ios-fontawesome.git'
  1. Refresh your project pods pod install

  2. Add awesome font to your Info.plists setting UIAppFonts entry as array and adding FontAwesome.ttf to this array.

Example of using

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

image

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

image

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

image

--- Extra - UIAwesomeButton ---

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

Screenshot

image

Attributed Strings : Attributes List

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

Font Awesome Icons

image

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.

ppiawesomebutton's People

Contributors

ayastrebov avatar bradphilips avatar isaacroldan avatar twairball avatar williamzang avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.