iOS开发-使用iconFont配置图片

发表于

在iOS开发中，一个必不可少的资源就是图片资源，而图片除了一部分是从网络获取下来的，还有一部分是存储在本地的，而存储在本地的图片中，有很大一部分是作为icon来使用的。所以接下来我们讨论的图片大多数都可以把它看做是我们项目中用到的图标。那么图片的使用方式有很多种，可以直接将图片文件拖入项目，也可以将图片文件添加到Assets.xcassets中，还有一种方法就是使用iconFont，那么iconFont到底是个什么东西呢。

什么是iconFont

iconFont，看名字，我们可以把它分解成icon + font，这两个单词分开看可能大家都能理解，那么icon和font又有什么关系呢？既然我们这次讨论的是配置图片，那么。。对！就是把icon图片变成字体，像使用字体一样使用图片！

为什么要用iconFont

那么为什么要使用iconFont呢，平时使用图片使用习惯了的同学都知道，虽然现在iPhone大多数的设备都是retain屏幕，但是我们开发的时候还是要为了适配多种屏幕分辨率而让设计小姐姐切出 @1x,@2x,@3x三种分辨率的图，如果有些应用有不同的主题，这个图片的数量更是多的不想看，不仅增加了开发和设计的工作量，也会大大的增加打包出的ipa的体积，虽说现在大家手机的容量都很大，但是能省一点是一点么。

看到这里你可能会问，那iconFont有什么好的，首先，iconFont是使用.ttf的字体格式文件，而且iconFont中的图片都为矢量图，矢量图的好处就是icon不会因为分辨率的改变缩放照成失真，所以只需要做一套icon，就可以适配多种屏幕需求。

怎么用iconFont

iconFont需要一个矢量图，有很多网站也提供在线生成iconFont的服务，使用起来也很方便，这里我们就不多介绍了，如果想知道，可以去问问你们的设计小姐姐，毕竟多一个借口让你们和设计小姐姐聊天不是很好么，如果他还不知道iconFont是什么。。那，不是更好么。好了跑题了。

先提供几个拥有大量优秀iconFont的网站，他们大多数也有在线生成iconFont的功能：

这里我们就用阿里爸爸的矢量图片库举个例子吧。

阿里巴巴矢量图片库中获取icon

首先点击这里的添加入库的按钮。

logo

当你选择完一堆想要的图片之后点击右上角的购物车按钮。

logo

然后点击下载代码就可以啦。

logo

下载下来之后可以看到这个压缩包里有很多个文件，而我们需要的就是后缀为.ttf的字体文件。

logo

Xcode中的操作

首先我们把刚刚的文件拖入Xcode。

然后在plist文件中引入字体文件

1
2
3
4
<key>UIAppFonts</key>
<array>
	<string>iconfont.ttf</string>
</array>
logo

代码编写

首先既然作为一个字体，肯定是可以显示在UILabel上的，但是我们怎么样在字体库中找到我们想要的字体呢，这还是一个技术活，首先打开之前下载下来的文件夹，找到后缀为.svg的文件并打开他，可以看到一大堆的代码，这都是啥玩意儿啊。

仔细看会发现，这一段一段就是我们下载下来的icon，稍微仔细点看，就能看出来这里的名字就是我们下载的icon的名字，而后边这串字符就是我们需要的字符。

logo

但是现在还是用&#xXXXX;的格式显示的，而我们使用时需要将其转换成\UXXXXXXXX的格式，这个格式的转换在一些在线转换格式网站上就可以很容易的转换。

接下来就是把它显示出来：

1
2
3
4
5
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(50, 50, WIDTH-100, 40)];
label.font = [UIFont fontWithName:@"iconfont" size:35];
label.text = @"\U00059030";
label.textColor = [UIColor redColor];
[self.view addSubview:label];

但是我们要用iconFont又不是为了在UILabel上显示，我们是为了让他显示在UIImageView，别急，我们可以把他作为UIImage显示出来。

写一个UIImage的扩展类UIImage+iconFont

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
+ (UIImage*)imageWithIcon:(NSString*)iconCode inFont:(NSString*)fontName size:(NSUInteger)size color:(UIColor*)color
{
    CGSize imageSize = CGSizeMake(size, size);
    UIGraphicsBeginImageContextWithOptions(imageSize, NO, [[UIScreen mainScreen] scale]);
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, size, size)];
    label.font = [UIFont fontWithName:fontName size:size];
    label.text = iconCode;
    if(color)
    {
        label.textColor = color;
    }
    [label.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *retImage = UIGraphicsGetImageFromCurrentImageContext();
    return retImage;
}

TBCityIconFont

如果不想自己实现根据字体文件转换UIImage，可以使用淘点点的TBCityIconFont。

使用时现在AppDelegate中全局注册一下字体

1
[TBCityIconFont setFontName:@"iconfont"];

接下来就可以愉快的使用了：

1
2
3
4
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(50, 250, WIDTH-100, 40)];
//图标编码是&#xe600，需要转成\U0000e600
imageView.image = [UIImage iconWithInfo:TBCityIconInfoMake(@"\U00059030", 35, [UIColor redColor])];
[self.view addSubview:imageView];

结束

以上就是iconFont在iOS中的使用，还有几个小时WWDC18就要开始了。。。我要去洗个澡准备一下了。。

哦，demo在这里