在開發(fā)項目時两疚,為了適配不同分辨率的設(shè)備,我們通常會需要@2x含滴,@3x兩套格式的圖片鬼雀,最明顯的就是底部tabBar的圖標使用。而對于那些有換膚需求的APP來說蛙吏,還需要多套圖來匹配不同的主題。通過切圖的方式制作圖標鞋吉,一方面加大了開發(fā)者和設(shè)計者的工作量鸦做,另一方面也會增大APP的體積。而使用iconfont的可以達到以下目的:
1谓着、減小應(yīng)用體積泼诱,字體文件比圖片要小赊锚;
2治筒、圖標保真縮放,解決2x/3x乃至將來nx圖問題舷蒲;
3耸袜、方便更改圖標顏色大小,圖片復(fù)用牲平。
那么堤框,iconfont如何使用?iconfont纵柿,從字面上就能理解它就是字體蜈抓。由于我是擼代碼的,所以對iconfont的制作并不熟悉昂儒,再說這些都是UI做好了圖標給我沟使,如果想學(xué)習(xí)iconfont的制作,去阿里巴巴的iconfont平臺去看看渊跋。制作好的iconfont圖標是一種.ttf格式的字體腊嗡,如圖:
iconfont中的圖標就是這幅德行:
而我們需要做的就是將.ttf格式的文件拖入工程中着倾,然后借助淘點點科技寫的一個關(guān)于iconfont封裝,方便我們使用iconfont叽唱。(我demo中有屈呕,就不貼代碼了。)
接下來就是重點了:
1>在AppDelegate.m中棺亭,初始化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.
/** 初始化iconfont */
[TBCityIconFont setFontName:@"iconfont"];
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:[ViewController new]];
_window.rootViewController = nav;
return YES;
}
2>在ViewController.m中實現(xiàn)
#import "ViewController.h"
#import "TBCityIconFont.h" //引入頭文件
#import "UIImage+TBCityIconFont.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
self.navigationController.navigationBar.translucent = NO;
UIBarButtonItem *leftBarButton = [[UIBarButtonItem alloc] initWithImage:[ UIImage iconWithInfo:TBCityIconInfoMake(@"\U0000e619",22,[UIColor colorWithRed:0.55 green:0.55 blue:0.55 alpha:1])] style:UIBarButtonItemStylePlain target:self action:@selector(leftButtonAction)];
self.navigationItem.leftBarButtonItem = leftBarButton;
self.navigationItem.leftBarButtonItem.tintColor = [UIColor colorWithRed:0.55 green:0.55 blue:0.55 alpha:1];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage iconWithInfo:TBCityIconInfoMake(@"\U0000e603",25, [UIColor colorWithRed:0.14 green:0.61 blue:0.83 alpha:1.00])] style:UIBarButtonItemStylePlain target:self action:@selector(rightButtonAction)];
self.navigationItem.rightBarButtonItem.tintColor = [UIColor colorWithRed:0.14 green:0.61 blue:0.83 alpha:1.00];
// imageView
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 50, 30, 30)];
[self.view addSubview:imageView];
imageView.image = [UIImage iconWithInfo:TBCityIconInfoMake(@"\U0000e600", 30, [UIColor redColor])];
// button
UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
button.frame = CGRectMake(100, 100, 40, 40);
[self.view addSubview:button];
[button setImage:[UIImage iconWithInfo:TBCityIconInfoMake(@"\U0000e612", 40, [UIColor redColor])] forState:UIControlStateNormal];
[button setTintColor:[UIColor greenColor]];
// label,label可以將文字與圖標結(jié)合一起虎眨,直接用label的text屬性將圖標顯示出來
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(50, 160, 280, 40)];
[self.view addSubview:label];
label.font = [UIFont fontWithName:@"iconfont" size:15];//設(shè)置label的字體
label.text = @"這是用label顯示的iconfont \U0000e617";
}
以上都是OC種的用法,在Swift中是這樣使用的:
比如OC中的 @"\U0000e603" 镶摘,在Swift中是:"\u{e603}"
3>運行結(jié)果如圖:
如此嗽桩,iconfont圖標的使用就大功告成了。需要注意的是凄敢,iconfont圖標用的是unicode編碼碌冶,我們在工程中需要將&#xXXXX格式轉(zhuǎn)換成\UXXXXXXXX格式,詳細對照demo即可。
demo鏈接:https://github.com/Baiyongyu/iconfont-.git
最后感謝 http://www.reibang.com/p/3b10bb95b332 的分享涝缝。