NMTheme 皮肤管理组件
一、组件介绍
NMTheme 是一个轻量级的 iOS 皮肤管理组件,具有低侵入性、友好接口、自动化等特点,开发者只需调用少量 API 就可轻松实现皮肤切换功能。
二、切换皮肤,换的是什么?
1.颜色:包括各种 UI 标签的背景颜色、字体颜色、其他颜色。2.图片:包括各种图片标签、按钮等的背景图片、前景图片等。
三、组件用法
// ** 颜色API **
// 以UILabel 字体颜色 接入皮肤管理组件为例
// 接入前
self.label = [[UILabel alloc] initWithFrame:CGRectZero];
self.label.textColor = [UIColor redColor];
[self addSubview:self.label];
// 接入后
self.label = [[UILabel alloc] initWithFrame:CGRectZero];
self.label.themeAttributes = @{NMThemeAttribute.nm_textColor:NMThemeColor.nm_text_redColor};
[self addSubview:self.label];
// ** 图片API **
// 以UIButton 图片设置 接入皮肤管理组件为例
// 接入前
self.button = [[UIButton alloc] initWithFrame:CGRectZero];
[self.button setImage:[UIImage imageNamed:@"home_help.png"] forState:UIControlStateNormal];
[self addSubview:self.button];
// 接入后
self.button = [[UIButton alloc] initWithFrame:CGRectZero];
self.button.themeAttributes = @{NMThemeAttribute.nm_imageName:NMThemeImage.nm_home_help};
[self addSubview:self.button];
// 切换皮肤
[[NMThemeManager sharedInstance] switchThemeWithType:NMThemeTypeNight];
切换皮肤后界面将收到通知,实时更新到相应的颜色和图片,调用者无需关注界面的刷新问题。
四、数据来源
- 皮肤组件中使用的颜色和图片都以属性 key 的方式存在,这些 key 是通过 Python 脚本自动化生成代码完成的,
颜色和图片
1、颜色:颜色的 key 和对应不同皮肤的 RGB 色值如图所示,颜色支持 alpha 通道设置,例如 "#B3FFFFFF",后两位代表透明度数值。在 google 文档中配置好颜色表后,运行 nimotheme/script/AutoGenerateTheme.py 脚本即可生成相应的颜色的 key,例如 NMThemeColor.nm_background_dark,在不同的皮肤下对应不同的颜色。
2、图片:SDK目前支持普通模式和黑夜模式两种,在/
五、原理
1、反射机制:
- 利用iOS的反射机制和分类方式巧妙地实现了皮肤管理的抽象,与调用者完全解耦隔离,调用者用很小的接入成本即可接入,核心代码在UIView+NMTheme和NSObject+NMTheme,用户可以根据需要继续扩展。以UIView+NMTheme为例,内部实现是为UIView增加themeAttributes扩展属性,同时维护一套颜色与图片的映射表缓存,根据业务需要从映射表找到相应的key,用通知完成UI刷新。
2、自动化:
- 通过脚本完成了颜色和图片的自动化配置,减少了手动配置出错概率,提高了调用者的研发效率。
六、结语
NMTheme皮肤管理组件是虎牙海外项目组Nimo团队自研的组件,当前这套框架已在线上良好运行,可以完全满足皮肤切换需要且无任何性能问题。
七、快速使用
- Pod或直接将NMTheme文件拖入项目
pod 'NMTheme', '~>1.0.0'
- 导入头文件
#import "NMThemeManager.h"