[JiaJung]&iOS组件化（下篇）-加载XIB、图片资源

[转载]iOS组件化（下篇）-加载XIB、图片资源

JiaJung

0.2 2017.09.18 23:01* 字数 1056 阅读 7693评论 25喜欢 25

本篇是iOS项目实践的最后一篇。大家可以下载demo，根据这几篇文章流程实现一个现有项目的组件化。当然，每个公司根据自己的业务需求组件化的方式会有所不同，但大概的思路和流程不会有很大的差异。

上一篇中完成了专题组件和作者组件的集成及管理。但是加载XIB和图片时任然存在一些问题。切回到FFSpecialKit组件，当点击专题界面中的cell时会报错。这是因为项目中用到XIB加载出错了。

Snip20170915_1.png

拷贝路径到Finder前往去查看一下，如下图所示指定的bundle路径下确实没有FFSpecialDetailView这样的XIB文件。

Snip20170915_2.png

回到代码查看一下，原来加载XIB的方式如下：

Snip20170915_3.png

显然通过加载上面的bundle的方式加载不到XIB，需要重新设置budle的路径，修改如下：

Snip20170915_5.png

拷贝路径前往查看，XIB果然在指定的bundle下

Snip20170915_6.png

再次运行，点击专题cell测试就可以正常跳转了。不难发现cell中一些图片资源未显示（比如：灰色的线、评论、点赞等图标），接下来需要处理这些图片资源显示的问题。

Snip20170915_7.png

是否记得在FFSpecialKit中和Classes文件夹同级有个Assets文件夹，该文件夹专门用来存放组件的资源文件。

Snip20170915_8.png

接着，把图片资源拖入Assets文件夹，需要修改.podspec文件，打开资源的加载路径，然后执行pod install。然后会发现多了一个Resource的资源文件夹。

Snip20170915_10.png

运行发现图片任然未显示，这是因为项目中是通过[UIImage imageNamed:@“图片名"]方式加载本地图片，这种方式默认是从mainBundle中去加载图片，和XIB的问题一样也会找不到图片。

Snip20170915_11.png

Snip20170915_12.png

我们发现图片实际是在FFSpecialKit组件下FFSpecialKit.bundle 里面，因此需要改变图片的加载方式.

说明：必须指明图片的全名和图片所在bundle的包名.

Snip20170918_20.png

因为涉及到@2x，@3x图片这里不能写成固定的，应该按照scale来设置

Snip20170918_21.png

再次运行图片就显示了

Snip20170918_22.png

因为之前设置图片的方式都需要修改，上面修改图片加载方式的代码在很多地方都会用到，所以最好的做法就是抽取一个工具方法，笔者这里是添加了一个UIImage的分类。把这个分类添加到基础组件FFCategory中，更新组件就ok了。

#import <UIKit/UIKit.h>

@interface UIImage (Extension)
    
+ (instancetype)ff_imagePathWithName:(NSString *)imageName bundle:(NSString *)bundle targetClass:(Class)targetClass;

@end

#import "UIImage+Extension.h"

@implementation UIImage (Extension)
    
+ (instancetype)ff_imagePathWithName:(NSString *)imageName bundle:(NSString *)bundle targetClass:(Class)targetClass {
        
        NSInteger scale = [[UIScreen mainScreen] scale];
        NSBundle *currentBundle = [NSBundle bundleForClass:targetClass];
        NSString *name = [NSString stringWithFormat:@"%@@%zdx",imageName,scale];
        NSString *dir = [NSString stringWithFormat:@"%@.bundle",bundle];
        NSString *path = [currentBundle pathForResource:name ofType:@"png" inDirectory:dir];
        return path ? [UIImage imageWithContentsOfFile:path] : nil;
}

@end

回到项目用该Category更新代码

Snip20170918_27.png

再次运行，相关图片就显示出来了。

Snip20170918_1.png

细心的朋友会发现字体发生了变化，接下来设置字体，将字体相关文件也拖入到Assets文件夹下，然后修改一下podspec文件。最后执行pod install把字体资源pod进来。

修改FFSpecial.podspec文件如下：

  s.resource_bundles = {
    'FFSpecialKit' => ['FFSpecialKit/Assets/*']
  }

执行完pod install之后，字体资源就pod 进来了。

Snip20170918_3.png

接着在原来设置字体的地方做相应的修改，和修改图片资源路径的方式相似。例如修改FFSpecialCell中的代码如下，通过加载bundle路径的方式加载字体。当然，因为有很多的地方都会用到，最好也抽取成工具类。

- (UILabel *)categoryLabel{
    if (_categoryLabel == nil) {
        _categoryLabel = [[UILabel alloc]init];
        NSBundle *currentBundle = [NSBundle bundleForClass:[self class]];
        NSString *path = [currentBundle pathForResource:@"CODE BOLD.OTF" ofType:nil inDirectory:@"FFSpecialKit"];
        [_categoryLabel text:nil textColor:kHexColor_c7a762 fontSize:FONT_SIZE_14 fontName:path];
    }
    return _categoryLabel;
}

- (UILabel *)titleLabel{
    if (_titleLabel == nil) {
        _titleLabel = [[UILabel alloc]init];
        NSBundle *currentBundle = [NSBundle bundleForClass:[self class]];
        NSString *path = [currentBundle pathForResource:@"CODE LIGHT.OTF" ofType:nil inDirectory:@"FFSpecialKit.bundle"];
        [_titleLabel text:nil textColor:kHexColor_555 fontSize:FONT_SIZE_14 fontName:path];
    }
    return _titleLabel;
}

- (UILabel *)descLabel{
    if (_descLabel == nil) {
        _descLabel = [[UILabel alloc]init];
        NSBundle *currentBundle = [NSBundle bundleForClass:[self class]];
        NSString *path = [currentBundle pathForResource:@"CODE LIGHT.OTF" ofType:nil inDirectory:@"FFSpecialKit.bundle"];
        [_descLabel text:nil textColor:kHexColor_555 fontSize:FONT_SIZE_12 fontName:path];
        _descLabel.numberOfLines = 2;
    }
    return _descLabel;
}

到这里都修改完后，再次运行就ok了。

Snip20170918_4.png

后记
笔者通上、中、下三篇文章叙述了iOS项目实现组件化的一个大概流程。很感谢大家的阅读，也希望对您有所帮助。当然，如果对您没有帮助，浪费了您宝贵，笔者深感抱歉。第一次在简书上写技术文章，笔者小学语文没有学好，语言组织匮乏，希望各位多多指点。相互交流、相互成长。

小礼物走一走，来简书关注我

开发

JiaJung

写了 64102 字，被 481 人关注，获得了 387 个喜欢

喜欢Coding 探索技术的小学生喜欢弹琴摄影旅行的伪文青

25条评论只看作者

按时间倒序按时间正序

左岸__

13楼 · 2018.05.08 18:15

我从码云上下载下来的LDBase Development Pods下xib有但是我从cocopods下安装的没xib文件安装的版本号也是最新的

赞回复

左岸__

12楼 · 2018.05.08 17:12

现在有个很大的疑惑是我把.h .m .xib拖到classes文件夹下编译改spec文件的版本号打标签把本地的私有库搞到远程私有索引库里
然后cd 到Example里 pod install
安装完之后 ! 只有.h 和.m 在Development Pods下为什么.xib没出现呢s.resource_bundles = {
'LDBase' => ['LDBase/Assets/*.png','LDBase/Classes/MainFrame/*.xib']
}
得需要我手动 addFilesToPods

赞回复

左岸__

11楼 · 2018.05.08 16:54

NSBundle *bundle = [NSBundle bundleForClass:self.class];
加载xib这块我如上这么写这个bundle只是定位到了.app的文件没有定位到.framework文件您知道咋嘛回事吗

赞回复

s.resource_bundles = {
'LDBase' => ['LDBase/Assets/*.png','LDBase/Assets/*.xib']
}

2018.05.08 16:57 回复

添加新评论

曹叔

10楼 · 2018.04.10 10:12

出现这种情况只能说明你打包的方式有问题,其实在刚开始打包的时候指定资源目录就可以避免了,就是 s.resource

赞回复

走近科学探索发现

9楼 · 2018.03.09 17:43

我在XIB文件里直接用了图片显示不出来，同事的却可以显示。您遇到过吗？
而且我的Resources下是这样Resources/GOYOTowerCraneModule/Assets展示的，不是像您那样直接展出图片的。

赞回复

请问您解决了吗，我也遇到了同样的问题

2018.03.31 11:57 回复

@AppleSmile 我当时主要是因为cell 用的是注册的方式写的，注册方式就无法展示出xib里的图片。改成常规写法就行了。

2018.03.31 13:23 回复

添加新评论

PursueDream

8楼 · 2018.03.07 19:25

图片要写全名，那么2x图和3x图怎么作区分，难道要在代码里判断看，还是说虽然写的是2x的图，但是系统会根据需要加载3x的？？

1人赞回复

在代码里面判断的判断当前的scale，然后加载不同分辨率的图片

2018.04.24 09:44 回复

添加新评论

海浪萌物

7楼 · 2018.01.29 20:26

最近也在研究组件化，想问下，对应网络请求的同意错误时放到网络层，还是放在业务层的base类呢

赞回复

网络层属于基础层组件，不应该掺杂任何的业务代码，有错就回调到上层处理。建议再做一个业务相关的网络层-统一处理某些东西

2018.04.24 09:45 回复

添加新评论

低吟浅唱1990

6楼 · 2018.01.04 10:36

提供的demo不是完成组件化之后的demo？

赞回复

WainYan

5楼 · 2017.12.18 11:24

@JiaJung 你好，
#define Path_FZQKBYSJW [[NSBundle mainBundle] pathForResource:@"方正清刻本悦宋简体" ofType:@"TTF"]

#define FZQKBYSJWGB1(FONTSIZE) [UIFont fontWithName:(Path_FZQKBYSJW) size:(FONTSIZE)]

我这样写，但是label字体还是系统的，请问是哪里设置错了。

赞回复

coderJeffrey

4楼 · 2017.10.09 10:38

请问下，FFSpecialKit这个项目修改后pod install，FlowerField项目应该怎么把FFSpecialKit修改的东西拉取下来呢？git不太懂，是FFSpecialKit修改后提交新版本吗？！s.version可以不改动不？感觉每次修改一点点就提交新版本体验不太好，有没有什么办法呢大佬。

赞回复

FFSpecialKit修改代码之后需要重新提交的，version也需要改动的，因为你更新了内容相当于你的版本号就变化了，在主工程里需要重新pod update一下， git命令行比较简单，网上的文章很多的。

2017.10.09 11:09 回复

添加新评论

Icoder_e90d

3楼 · 2017.10.09 10:06

非常细致，很赞，我还有个问题就是这个pod多语言语言国际化怎么整啊

赞回复

@Icoder_e90d 国际化我接触的比较少，暂时无法提供太多有用信息，等我研究一下