[Swift And OC] 聊一聊换肤方案

一、前言

一个App发展到后期,没有几套主题,完全拿不出手啊。特别是toB的公 司,客户要求自己的个性更是正常不过的需求了。换肤是个细活、细活、细活,重要的事说三遍,方案设计也是相当关键。

二、方案对比

2.1 换肤要处理的问题

1.配置抽离。
2.已存在界面的动态变换。

2.2 分析

针对第一点,确实没太多说道,主要是和UI撕抽取公共配置和细节配置,这是一个细活。而界面的动态变换,这是一个麻烦事。

2.2.1 通知切换主题

这个事我们首先想到的就是通知,但是用通知太麻烦了,监听移除一个改变写两地。而且一个大型app,很多view其实并没有属性引用,使用通知又需要把这些view属性引用出来,无形中增加了很多工作量。既然已经有通知保底了,我们何不尝试一下其它方案。

2.2.2 RX OR RAC

针对上面所说关于通知的两个问题,我们使用 ReactiveCocoa 或 RXSwift 来优雅的处理这个问题。不过大部分项目并没有使用链式编程,为了换肤导入貌似不太划算。

2.2.3 使用block来处理

在项目中建一个单例来管理配置,将所有颜色配置代码块放入block中并加入到单例的数组中管理,在切换主题时,遍历数组执行一遍block即可。当然使用时要注意block引用问题,保证视图的正常释放,随着app的使用block会越来越多,要及时清理已释放view的block。

三、block方案的实现

写了个小Demo具体可看 github -ArtChangeTheme 下面做一些简单的讲解。

3.1 配置的模块划分

换肤是个细活,项目过大就需要进行模块划分,每个人负责自己的模块,看似麻烦的事分到个人也就不多了。Demo写了 Module1到Module4 四个模块,每个模块下都建了一个UIStyle文件夹用于管理当前模块的配置。公共UIStyle则和模块目录同级。通过分类扩展。

- (NSString *)getStyleName_Module1;
每个模块都要写该方法,用于返回本模块使用的配置文件plist。
方法的命名规则是  getStyleName_模块名。 以此解耦,解耦思路是参考
测试用例执行所有 以test开头的方法,为此写了个分类NSObject+ArtPrefix。

3.2 配置的解析

配置plist图示

如上图模块下配置分为 Image 与 Style,Image为图片配置,

3.2.1 图片的配置

toPath表示图片所在的相对文件夹,imageConfigs里面包含了需要动态配置的文件名以及备注,这是一个规范,我们可以很清楚的看到处理了哪些图片,如果打包动态替换主题,也可通过该配置去替换需要的图片。

3.2.2 Style样式配置

color:000000,0.5 前面表示 Hex设置 0.5表示透明度。
font: 表示字体大小。
还有 ArtLayoutInfo 类对应的属性 是用于描述约束关系配置的,比如某些客户可能对 banner 的宽高比有所要求,这个可以在这做扩展配置。

3.3 block方案接口设计

- (void)saveStrongSelf:(id)strongSelf block:(void(^)(id weakSelf))aBlock;

如上:考虑代码的调用方便,和block及时的清理标记,设计了如上的调用接口,这样大家不用写__weak typeof(self) weakSelf = self,这么麻烦,但是如果block内有用非weakSelf. 调用的view请注意弱引用声明。
ArtUIStyleManager内部开启了定时器(默认60s可设置clearInterval控制间隔)去检测清理无用的block。实现原理是将 strongSelf 弱引用存储,检测其被释放后删除对应的block。至于弱引用存储的实现大家可以看看 iOS - 如何实现弱引用字典,我这里使用的是block封装与解封。这种小技巧平时用不到,关键时刻还是能帮你一把的。

  - (void)reloadStylePath:(NSString *)aStylePath;
  - (void)reloadStyleBundleName:(NSString *)aStyleBundleName;
  - (void)reloadStyleBundle:(NSBundle *)aStyleBundle;
  这三个方法是用于加载其它样式的,具体可看demo中ArtModule4ViewController。

四、几个小技巧

4.1 能用Color解决的就别麻烦UI出新图了

很多UI控件都有个 tintColor 属性,很多图片是纯色的,大家直接通过tintColor渲染就好了。Demo也提供了一个分类UIImage+ArtDraw来进行渲染绘制。不过我遇到了一个坑,我把渲染的图做了拉伸,点击了返回时,颜色还原成图片本身的颜色。大家使用时注意一下即可。

4.2 iOS 8后系统自动会将@3x图片自动适配图片

如题,大家搜一下即可,也就是说来张@3x即可,要适配iOS8 一下的话,自己用代码切一下也是没问题的。不过虽说系统自动适配,但是我在1x的老iPad上出现了图片虚化有毛边的情况,加了1x图就好很多,这个大家自己看着办。

4.3 为什么不用iconfont呢

在iOS开发中使用iconfont图标
为什么不用呢?唉,长叹一声。

五、来个HotReloader

HotReloader演示

换肤这个事,最蛋疼的应该是,改一点跑一次代码,这个耗时太久了,加一个小插件ArtUIStyleHotReloader 修改之后,command+s ,就能动态变了,当然只能模拟器使用。代码很简单,感谢VKCssProtocol

六、结尾

2017.08.28,今天是个好日子,但是出了点事,心情不太好,这篇文章也就简单的写写了。这个OC在原有的一些上面扩展的ArtUIStyle看着可能有些臃肿。改天抽空写个swift版的,还是这个 github -ArtChangeTheme。赶紧去github给个小星星吧。
换肤这个事,UI自己要有套设计规范,如果前期没有规范不要紧,做个换肤看他还有没规范,再没规范大家就GG了。最后来个扩展阅读 VKCssProtocol

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

推荐阅读更多精彩内容