Use iconfont gracefully on iOS

1. What is iconfont

IconFont = Icon + Font = Icon + Font = Icon + Font That’s right! Is IconFont! Let developers use ICONS like fonts. If you can’t do it yourself, you can go to Ali’s iconfont icon library and download the icon you need.

2. Why use iconfont

In development projects, it is inevitable to use a variety of ICONS. In order to adapt to different devices, it is usually necessary to use @2x and @3X images, such as the ICONS we use on tabBar. Some apps require skin changes and multiple sets of images to match different themes. If you use cut diagrams, this is an increase in design and development effort, and the SIZE of the IPA increases.

Advantages of using Iconfont: 1. Reduce the size of ipA package. 2. 3. Adapt to skin changing requirements, easy to use.Copy the code

3. How to use iconfont

1. The first to goIconfont icon libraryDownload the ICONS you need.

As shown in the figure, we can select the icon we need and add it to the shopping cart, and then add it to the project. Of course, you can also directly download the icon from the shopping cart, but in this way, you just do not modify the icon to the style you want. When adding the icon to the project, you can modify the icon to the style you want.

Note: Here is the download code so we can use it directly in the project

2. Add icon resources you downloaded to your own project.

Note: check the options shown

Next, the configuration project loads this file

• Check if the file is in the project or it will crash

• Add fonts to the plist file
  

  

  Next, we write a package about iconFONT with the help of Tao Bit technology, which is convenient for us to use iconFONT. The iconFONT package includes

  

1. TBCityIconInfo.hThe implementation of the

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface TBCityIconInfo : NSObject

@property (nonatomic, strong) NSString *text;
@property (nonatomic, assign) NSInteger size;
@property (nonatomic, strong) UIColor *color;

- (instancetype)initWithText:(NSString *)text size:(NSInteger)size color:(UIColor *)color;
+ (instancetype)iconInfoWithText:(NSString *)text size:(NSInteger)size color:(UIColor *)color;

@end
Copy the code

2. TBCityIconInfo.mThe implementation of the

#import "TBCityIconInfo.h"

@implementation TBCityIconInfo

- (instancetype)initWithText:(NSString *)text size:(NSInteger)size color:(UIColor *)color {
    if (self = [super init]) {
        self.text = text;
        self.size = size;
        self.color = color;
    }
    return self;
}

+ (instancetype)iconInfoWithText:(NSString *)text size:(NSInteger)size color:(UIColor *)color {
    return [[TBCityIconInfo alloc] initWithText:text size:size color:color];
}

@end
Copy the code

3. TBCityIconFont.hThe implementation of the

#import "UIImage+TBCityIconFont.h"
#import "TBCityIconInfo.h"

#define TBCityIconInfoMake(text, imageSize, imageColor) [TBCityIconInfo iconInfoWithText:text size:imageSize color:imageColor]

@interface TBCityIconFont : NSObject

+ (UIFont *)fontWithSize: (CGFloat)size;
+ (void)setFontName:(NSString *)fontName;

Copy the code

4. TBCityIconFont.mThe implementation of the

#import "TBCityIconFont.h"
#import <CoreText/CoreText.h>

@implementation TBCityIconFont

static NSString *_fontName;

+ (void)registerFontWithURL:(NSURL *)url {
    NSAssert([[NSFileManager defaultManager] fileExistsAtPath:[url path]], @"Font file doesn't exist");
    CGDataProviderRef fontDataProvider = CGDataProviderCreateWithURL((__bridge CFURLRef)url);
    CGFontRef newFont = CGFontCreateWithDataProvider(fontDataProvider);
    CGDataProviderRelease(fontDataProvider);
    CTFontManagerRegisterGraphicsFont(newFont, nil);
    CGFontRelease(newFont);
}

+ (UIFont *)fontWithSize:(CGFloat)size {
    UIFont *font = [UIFont fontWithName:[self fontName] size:size];
    if (font == nil) {
        NSURL *fontFileUrl = [[NSBundle mainBundle] URLForResource:[self fontName] withExtension:@"ttf"];
        [self registerFontWithURL: fontFileUrl];
        font = [UIFont fontWithName:[self fontName] size:size];
        NSAssert(font, @"UIFont object should not be nil, check if the font file is added to the application bundle and you're using the correct font name.");
    }
    return font;
}

+ (void)setFontName:(NSString *)fontName {
    _fontName = fontName;
    
}


+ (NSString *)fontName {
    return _fontName ? : @"iconfont";
}

@end
Copy the code

5. UIImage+TBCityIconFont.hThe implementation of the

#import <UIKit/UIKit.h>
#import "TBCityIconInfo.h"

@interface UIImage (TBCityIconFont)

+ (UIImage *)iconWithInfo:(TBCityIconInfo *)info;

@end
Copy the code

6. UIImage+TBCityIconFont.mThe implementation of the

#import "UIImage+TBCityIconFont.h"
#import "TBCityIconFont.h"
#import <CoreText/CoreText.h>

@implementation UIImage (TBCityIconFont)

+ (UIImage *)iconWithInfo:(TBCityIconInfo *)info {
    CGFloat size = info.size;
    CGFloat scale = [UIScreen mainScreen].scale;
    CGFloat realSize = size * scale;
    UIFont *font = [TBCityIconFont fontWithSize:realSize];
    UIGraphicsBeginImageContext(CGSizeMake(realSize, realSize));
    CGContextRef context = UIGraphicsGetCurrentContext();
 
    if([info text respondsToSelector: @ the selector (drawAtPoint: withAttributes:)]) {/ * * * if this exception is thrown, please open the breakpoint list, Right click on the All Exceptions - > Edit Breakpoint - > All amended as Objective - C * See: http://stackoverflow.com/questions/1163981/how-to-add-a-breakpoint-to-objc-exception-throw/14767076# 14767076
         */
        [info.text drawAtPoint:CGPointZero withAttributes:@{NSFontAttributeName:font, NSForegroundColorAttributeName: info.color}];
    } else {
        
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wdeprecated-declarations"
        CGContextSetFillColorWithColor(context, info.color.CGColor);
        [info.text drawAtPoint:CGPointMake(0, 0) withFont:font];
#pragma clang pop
    }
    
    UIImage *image = [UIImage imageWithCGImage:UIGraphicsGetImageFromCurrentImageContext().CGImage scale:scale orientation:UIImageOrientationUp];
    UIGraphicsEndImageContext();
    
    return image;
}

@end

Copy the code

3. Specific use method

1. In appdelegate. m, initialize iconFont

#import "AppDelegate.h"
#import "TBCityIconFont.h"
#import "ViewController.h"
@interface AppDelegate ()

@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    [TBCityIconFont setFontName:@"iconfont"];
    UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:[ViewController new]];
   self.window.rootViewController = nav;
    [self.window makeKeyAndVisible];
    return YES;
}
Copy the code

2. inViewController.mIn the implementation

#import "ViewController.h"
#import "TBCityIconFont.h"
#import "UIImage+TBCityIconFont.h"@interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor whiteColor]; UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 30, 30)]; [self.view addSubview:imageView]; // The icon encoding is &#xe600, need to be converted to \U0000e600
    imageView.image = [UIImage iconWithInfo:TBCityIconInfoMake(@"\U0000e600", 30, [UIColor redColor])];
    
    
    //    button
    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    button.frame = CGRectMake(100, 150, 40, 40);
    [self.view addSubview:button];
    [button setImage:[UIImage iconWithInfo:TBCityIconInfoMake(@"\U0000e614", 40, [UIColor redColor])] forState:UIControlStateNormal]; // label,label can combine text with icon, UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(50, 200, 280, 40)]; [self.view addSubview:label]; label.font = [UIFont fontWithName:@"iconfont"size:15]; // Set the label font label.text = @"Display \U0000e658 on lable";
    
    

    // Do any additional setup after loading the view, typically from a nib.
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end
Copy the code

The results are shown below:

Note: 1. The unicode encoding needs to be manually converted from &#xXXXX format to \UXXXXXXXX format. For example, the // icon encoding is &#xe600, which needs to be converted to \U0000e600. All required Unicode encodings can be viewed in an.html file in the downloaded iconfont folder

This article demo, welcome criticism and correction, leave your star oh. More articles can be found here

If you need to, please follow JackerooChu for more articles