iOS开发APP瘦身之PDF图片资源加载框架

简述:本文介绍的是一个用于在iOS项目中高效加载PDF矢量图标(尺寸可以无限放大)的工具。

我们知道在 Xcode 6 及以上版本可以在 Asset Catalog 中使用 PDF 格式的矢量图资源。


【引用】

大致上,PDF是矢量元素的事实标准。矢量文件包含一个元素的很多元数据,用来告诉系统如何渲染这些内容,而这些和屏幕分辨率无关。举个通俗易懂例子,一个圆形的矢量PDF图,当它渲染成5像素宽和渲染成5000000像素宽时是一样清晰的。

在iOS平台,Xcode是在编译时,根据你的矢量PDF图的大小,生成1x、2x和3x图。如果你的PDF图是45*45px,那么Xcode会在编译时生成下面3个PNG:

45*45px      :1x设备用的(iPhone 3G and 3GS)

90*90px      :2x或Retina显示设备用的(iPhone 4, 4S, 5, 5S, and 6)

135*135px    :3x设备用的(iPhone 6 Plus 及以上)

这也意味着当有更高的屏幕分辨率时,Xcode可以根据已有的矢量PDF放大图片,这样自动就支持以后的设备了。还有,如果你是OS X开发者,那么矢量PDF就更好用了,OS X app完全支持矢量PDF,你可以用代码缩放图片而不会失真。

想了解上述全部内容请猛戳传送门:4个你需要知道的Asset Catalog的秘密

使用 PDF 作为图标素材资源具有如下优点:

1. APP 瘦身

我们对比一下最近设计部门的朋友刚导出的某个图标的一套常规的 PNG 图片和 PDF 类型的图片的大小:

PDF 文件大小为 7KB

PNG 三个文件合计大小为 85KB

对比结果: PDF 类型的文件大概占空间为传统 PNG 类型的 8%(以当前资源为依据,不同资源对比结果可能会有部分出入)。

2. 便于维护

首先就是设计部门出图就会比之前方便很多,直接导出矢量文件即可,并且如果后期再需要 4X、5X... 规格的图,不需要对之前的图标再返工处理。

再者作为开发者在管理图片相关的添加、替换、移除等重复性的操作维护压力可以降低。

3. 可以无限放大

由于 PDF 图标文件为矢量图,不同于之前的传统的位图,在放大之后可以依然保持清晰而非模糊毛边有像素颗粒感。

例如,后期需求调整要求某一个按钮交互热区变大,相应图标也要放大。如果使用之前 PNG 类型的资源,需要设计重新再出一套图(作为一个严谨的程序员,当然不能够容忍模糊图标的存在🙃),但无形中这些都是开发过程中的时间成本。

想想如果使用 PDF 类型的资源直接改变一下图标大小不就可以了吗?那就直接行动,但是最后发现在 Asset Catalog 就算使用了 PDF 类型的图放大后还是模糊了。为什么呢?原来 Xcode 在编译的时候只是依据目前设备所需要的资源只自动生成1X、2X和3X规格的位图类型的图片,那么在后期通过只改变控件的大小来希望图片精度也动态的调整自然是行不通了。

由此就产生了 YHPDFImageLoader 这个工具,它旨在解决上述后期动态调整放大图片发虚的问题,与系统调用加载图片兼容,并具有三级加载两级缓存功能,以减少重复性质的运算并提高加载效率,下面是一张加载效果对比图:

YHPDFImageLoader 用法

当然,使用 YHPDFImageLoader 依然可以使用 .bundle 资源文件包或者文件夹的形式管理 PDF 素材资源(虽然苹果声称使用 Asset Catalog 后 APP 的相关资源可以有效的防盗,但是目前仍可轻而易举的提取出里面的内容)。

另外,YHPDFImageLoader 同样支持使用 CocoaPods 集成

  • 在 Podfile 文件中添加:

pod 'YHPDFImageLoader'

  • 执行 pod install 命令

使用方式

  • 第一步:

#import "UIImage+YHPDFIcon.h"

  • 第二步:

UIImage *image = [UIImage yh_imageNamed:@"pdfName"];

  • That's all.

效果展示(源文件图片分辨率为 30x46 ,大小为 7KB)

更多使用方法请参照项目中 Demo

还在等什么,赶紧 点击下载 集成进你的项目中和你的设计小伙伴们更愉快的玩耍吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,723评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,080评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,604评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,440评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,431评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,499评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,893评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,541评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,751评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,320评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,890评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2 342

推荐阅读更多精彩内容

  • iOS 及 Android 应用开发中,怎样命名和管理切图资源最科学?iOS 切图文件命名规范 移动应用作为面向用...
    水止云起阅读 3,557评论 0 5
  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 25,254评论 7 249
  • 文l张西影 图片发自简书App 书法家 不是 吾乃无名之辈 业余爱好者图片发自简书App 没有师傅 没有门派继承 ...
    豫视西影阅读 539评论 2 6
  • 2017年1月10日上午9点29分,我听到了他据医生说不太响亮的哭声,(后来看评分出生时8,五分钟后10)然...
    墨蓝凉语阅读 165评论 0 0
  • 什么是思想? 思想就是观点。观点越多且越接近本质,思想就越丰富和深刻。 这里注意两个问题: 1. 观点不是事实 而...
    Jonah_Wang阅读 397评论 2 0