iOS-iconfont圖標的使用(OC齐蔽、Swift)

在開發(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

iconfont中的圖標就是這幅德行:


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é)果如圖:


運行結(jié)果

如此嗽桩,iconfont圖標的使用就大功告成了。需要注意的是凄敢,iconfont圖標用的是unicode編碼碌冶,我們在工程中需要將&#xXXXX格式轉(zhuǎn)換成\UXXXXXXXX格式,詳細對照demo即可。
demo鏈接:https://github.com/Baiyongyu/iconfont-.git

最后感謝 http://www.reibang.com/p/3b10bb95b332 的分享涝缝。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末扑庞,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子拒逮,更是在濱河造成了極大的恐慌罐氨,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件滩援,死亡現(xiàn)場離奇詭異栅隐,居然都是意外死亡,警方通過查閱死者的電腦和手機玩徊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進店門租悄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人恩袱,你說我怎么就攤上這事泣棋。” “怎么了憎蛤?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵外傅,是天一觀的道長。 經(jīng)常有香客問我俩檬,道長萎胰,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任棚辽,我火速辦了婚禮技竟,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘屈藐。我一直安慰自己榔组,他們只是感情好熙尉,可當(dāng)我...
    茶點故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著搓扯,像睡著了一般检痰。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上锨推,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天铅歼,我揣著相機與錄音,去河邊找鬼换可。 笑死椎椰,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的沾鳄。 我是一名探鬼主播慨飘,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼译荞!你這毒婦竟也來了瓤的?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤吞歼,失蹤者是張志新(化名)和其女友劉穎堤瘤,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體浆熔,經(jīng)...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年桥帆,在試婚紗的時候發(fā)現(xiàn)自己被綠了医增。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,117評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡老虫,死狀恐怖叶骨,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情祈匙,我是刑警寧澤忽刽,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站夺欲,受9級特大地震影響跪帝,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜些阅,卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一伞剑、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧市埋,春花似錦黎泣、人聲如沸恕刘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽褐着。三九已至,卻和暖如春托呕,著一層夾襖步出監(jiān)牢的瞬間含蓉,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工镣陕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留谴餐,地道東北人。 一個月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓呆抑,卻偏偏與公主長得像岂嗓,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子鹊碍,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,877評論 2 345