iOS-iconfont圖標(biāo)的使用(OC、Swift)

在開發(fā)項(xiàng)目時(shí),為了適配不同分辨率的設(shè)備,我們通常會(huì)需要@2x,@3x兩套格式的圖片,最明顯的就是底部tabBar的圖標(biāo)使用。而對(duì)于那些有換膚需求的APP來說,還需要多套圖來匹配不同的主題。通過切圖的方式制作圖標(biāo),一方面加大了開發(fā)者和設(shè)計(jì)者的工作量,另一方面也會(huì)增大APP的體積。而使用iconfont的可以達(dá)到以下目的:
1、減小應(yīng)用體積,字體文件比圖片要??;
2、圖標(biāo)保真縮放,解決2x/3x乃至將來nx圖問題;
3、方便更改圖標(biāo)顏色大小,圖片復(fù)用。

那么,iconfont如何使用?iconfont,從字面上就能理解它就是字體。由于我是擼代碼的,所以對(duì)iconfont的制作并不熟悉,再說這些都是UI做好了圖標(biāo)給我,如果想學(xué)習(xí)iconfont的制作,去阿里巴巴的iconfont平臺(tái)去看看。制作好的iconfont圖標(biāo)是一種.ttf格式的字體,如圖:


iconfont圖標(biāo)就是一個(gè)ttf

iconfont中的圖標(biāo)就是這幅德行:


iconfont圖標(biāo)

而我們需要做的就是將.ttf格式的文件拖入工程中,然后借助淘點(diǎn)點(diǎn)科技寫的一個(gè)關(guān)于iconfont封裝,方便我們使用iconfont。(我demo中有,就不貼代碼了。)

接下來就是重點(diǎn)了:
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中實(shí)現(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可以將文字與圖標(biāo)結(jié)合一起,直接用label的text屬性將圖標(biāo)顯示出來
    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>運(yùn)行結(jié)果如圖:


運(yùn)行結(jié)果

如此,iconfont圖標(biāo)的使用就大功告成了。需要注意的是,iconfont圖標(biāo)用的是unicode編碼,我們?cè)诠こ讨行枰獙?amp;#xXXXX格式轉(zhuǎn)換成\UXXXXXXXX格式,詳細(xì)對(duì)照demo即可。
demo鏈接:https://github.com/Baiyongyu/iconfont-.git

最后感謝 http://www.itdecent.cn/p/3b10bb95b332 的分享。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容