文档章节

实现iOS图片等资源文件的热更新化(二):自定义的动态 imageNamed

ios122
 ios122
发布于 2016/09/23 09:33
字数 1159
阅读 25
收藏 2

这篇文章,要解决的是,使用一个自定义的 imageNamed 函数来替代系统的 imageNamed 函数.内部逻辑,将贯穿对比论证 关于"合适"的图片的定义.对iOS加载图片的规则不是很熟悉的童鞋,可以着重看这篇.

不同后缀图片加载的优先级

  • iPhone 7 plus(iOS10.0): sample@3x.png > sample@2x.png > sample~iphone.png >sample.png 其他后缀的图片总是不被加载.

  • iPad Pro 12.9 inch(iOS10.0): sample@2x.png > sample~ipad.png > sample.png 其他后缀的图片总是不被加载.

不同后缀的图片 iPhone 7 plus(iOS10.0) iPad Pro 12.9 inch(iOS10.0)
sample.png 7 8
sample@2x.png 9 10
sample@3x.png 10 0
sample~iphone.png 8 0
sample~iphone@2x.png 0 0
sample~iphone@3x.png 0 0
sample~ipad.png 0 9
sample~ipad@2x.png 0 0

可以使用同名不同内容的图片来对比观察.优先级从高到低.优先级较高的优先被加载,优先级为0的永远不会被加载.仅以iPhone 7 plus 和 iPad Pro为例分析,其他情况可自行.所用验证版本为iOS10,未来不同机型手机和系统可能会有差异.

想自己动手试一下的,可以下载示例: https://github.com/ios122/ios_assets_hot_update/raw/master/res/ios_assets_hot_update_2.zip 很小,只有100多K.编译,我此时用的是 Xcode 8.

使用bundle包放置图片等资源文件

使用bundle包放置图片等资源文件

资源把到一个bundle包中,便于保留资源的目录结构,也方便整体管理与替换.iOS中的bundle包,就一个一个特殊的以.bunle结尾的文件夹.示例中,我使用的是main.bundle.另外,关于bundle保留资源目录结构这个特点,是react-native中很依赖的一个特性,以后你的项目中或许也会需要.如果单单只是从原有 Images.xcassets 迁移代码的话,此处都放于同一层级即可.

使用 imageWithContentsOfFile: 加载图片

把图片放到资源文件夹main.bundle后,再加载图片,可以参考下面的代码,这样做的额外的好处就是可以适当减小图片加载的内存占用问题:

NSString * bundlePath = [[NSBundle mainBundle].resourcePath stringByAppendingPathComponent:@"main.bundle"];
NSBundle * mainBundle = [NSBundle bundleWithPath:bundlePath];
NSString * imgPath = [mainBundle pathForResource:@"sample" ofType:@"png"];
self.sampleImageView.image = [UIImage imageWithContentsOfFile: imgPath];

使iPhone @3x 与iPad @2x 共用同一张图片

首先是需要显示加载 @3x 的图片:

NSString * imgPath = [mainBundle pathForResource:@"sample@3x" ofType:@"png"];

此时代码,在iPhone 7 / iPhone 7 plus/ iPad Pro,都能显示图片,直接输出图片本身的尺寸都为 原图尺寸的 1/3.

NSLog(@"加载后的图片尺寸:%@",[NSValue valueWithCGSize:self.sampleImageView.image.size]);

但是,此处有一个问题.@3x总是被解读为三倍图,在iPhone上,正是我们需要的尺寸,但是在iPad上,尺寸就有些偏小了.我们在iPad上,通常总是需要将此张图按照@2x图来显示.这是一个规律!做过iPhone和iPad通用图标尺寸适配的童鞋,应该早就注意到了.

所以,现在要解决的关键技术问题是:如何把 @3x图,在iPad上按照@2x图来解读?相对完整代码如下,最终输出的图片尺寸在iPhone上为原始尺寸的1/3,在iPad上为原始尺寸的1/2,正是我们需要的:

 NSString * bundlePath = [[NSBundle mainBundle].resourcePath stringByAppendingPathComponent:@"main.bundle"];
 NSBundle * mainBundle = [NSBundle bundleWithPath:bundlePath];
 NSString * imgPath = [mainBundle pathForResource:@"sample@3x" ofType:@"png"];

 UIImage * image;
 static NSString * model;

 if (!model) {
     model = [[UIDevice currentDevice]model];
 }

 if ([model isEqualToString:@"iPad"]) {
     NSData *imageData = [NSData dataWithContentsOfFile: imgPath];
     image = [UIImage imageWithData:imageData scale:2.0];
 }else{
     image = [UIImage imageWithContentsOfFile: imgPath];
 }

 self.sampleImageView.image = image;

 NSLog(@"加载后的图片尺寸:%@",[NSValue valueWithCGSize:self.sampleImageView.image.size]);

封装为类目(category),实现自定义的 imageNamed

此处实现了一个简单够用的类目方法,支持从指定bundle读取指定名字的图片:

#import "UIImage+imageNamed_bundle_.h"

@implementation UIImage (imageNamed_bundle_)
+ (UIImage *)imageNamed:(NSString *)imgName bundle:(NSString *)bundleName
{
    bundleName = [NSString stringWithFormat:@"%@.bundle",bundleName];
    imgName = [NSString stringWithFormat:@"%@@3x",imgName];

    NSString * bundlePath = [[NSBundle mainBundle].resourcePath stringByAppendingPathComponent: bundleName];
    NSBundle * mainBundle = [NSBundle bundleWithPath:bundlePath];
    NSString * imgPath = [mainBundle pathForResource:imgName ofType:@"png"];

    UIImage * image;
    static NSString * model;

    if (!model) {
        model = [[UIDevice currentDevice]model];
    }

    if ([model isEqualToString:@"iPad"]) {
        NSData *imageData = [NSData dataWithContentsOfFile: imgPath];
        image = [UIImage imageWithData:imageData scale:2.0];
    }else{
        image = [UIImage imageWithContentsOfFile: imgPath];
    }
    return  image;
}
@end

借助类目,原来的调用,可以简化为:

UIImage * image = [UIImage imageNamed:@"sample" bundle:@"main"];
self.sampleImageView.image = image;

也支持有层级结构的图片资源的读取呦:

UIImage * image = [UIImage imageNamed:@"sub/sample" bundle:@"main"];
self.sampleImageView.image = image;

参考链接

系列专属 github 项目主页

https://github.com/ios122/ios_assets_hot_update

© 著作权归作者所有

ios122
粉丝 72
博文 76
码字总数 132179
作品 3
东城
程序员
私信 提问
实现iOS图片等资源文件的热更新化(零): 序

必要的序 以后在写系列文章,准备把基本的规划和动机等,单独作为一个小的序言部分给独立出来.序言部分,可以较为完整地交待系列文章的写作动机,所展示的编码技术可能的应用场景等.个人,我还是比...

ios122
2016/09/13
21
0
IOS xib你在用嘛?arc呢?

发起这个提问就是想了解大家对xib和arc的使用情况? 我们现在的项目组要求不用xib,不用arc。并且我也赞同这样做! xib:直接用代码来实现更容易复用,更容易控制,提高了代码的可读性。所以...

李远超
2013/05/29
640
0
SwiftUI or Flutter ?

原文作者:ZacJj 原文地址:https://juejin.im/post/5d05b45bf265da1bcc193ff4 前言 相信每一个见到 SwiftUI 的开发者,都会立刻将这门船新的 UI 框架和 Flutter 联系到一起。是的,它们身上...

iOS开发_小迷糊
06/19
0
0
React Native热更新之CodePush

React Native热更新之CodePush 24/100 发布文章 xiangzhihong8 CodePush简介 作为一个跨平台应用开发框架,React Native虽然在动态更新方面提供了动态更新的基础,但是动态更新技术并没有想象...

xiangzhihong
06/20
0
0
IOS加载图片imageNamed和imageWithContentsOfFile?

转: Apple官方的文档为生成一个UIImage对象提供了两种方法: 1. imageNamed,其参数为图片的名字; 2. imageWithContentsOfFile,其参数也是图片文件的路径。 那么两种有什么区别吗? 肯定是...

smail歇歇
2014/09/18
452
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring使用ThreadPoolTaskExecutor自定义线程池及实现异步调用

多线程一直是工作或面试过程中的高频知识点,今天给大家分享一下使用 ThreadPoolTaskExecutor 来自定义线程池和实现异步调用多线程。 一、ThreadPoolTaskExecutor 本文采用 Executors 的工厂...

CREATE_17
今天
5
0
CSS盒子模型

CSS盒子模型 组成: content --> padding --> border --> margin 像现实生活中的快递: 物品 --> 填充物 --> 包装盒 --> 盒子与盒子之间的间距 content :width、height组成的 内容区域 padd......

studywin
今天
7
0
修复Win10下开始菜单、设置等系统软件无法打开的问题

因为各种各样的原因导致系统文件丢失、损坏、被修改,而造成win10的开始菜单、设置等系统软件无法打开的情况,可以尝试如下方法解决 此方法只在部分情况下有效,但值得一试 用Windows键+R打开...

locbytes
昨天
8
0
jquery 添加和删除节点

本文转载于:专业的前端网站➺jquery 添加和删除节点 // 增加一个三和一节点function addPanel() { // var newPanel = $('.my-panel').clone(true) var newPanel = $(".triple-panel-con......

前端老手
昨天
8
0
一、Django基础

一、web框架分类和wsgiref模块使用介绍 web框架的本质 socket服务端 与 浏览器的通信 socket服务端功能划分: 负责与浏览器收发消息(socket通信) --> wsgiref/uWsgi/gunicorn... 根据用户访问...

ZeroBit
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部