该组件 GitHub地址
据说一个终端开发人员将会有70%以上的时间在和UI打交道。自己想想也对,貌似有很大一部分时间花费在了调整UI样式,addSubView还有layout上面。猛然间就发现自己的代码中有大量这种东西存在
self.label.layer.cornerRadius = 3; self.label.textColor = [UIColor darkTextColor]; self.label.font = [UIFont systemFontOfSize:13]; self.label.backgroundColor = [UIColor greenColor]; self.label.layer.borderWidth = 2; self.label.layer.borderColor = [UIColor redColor].CGColor; self.label2.layer.cornerRadius = 3; self.label2.textColor = [UIColor darkTextColor]; self.label2.font = [UIFont systemFontOfSize:13]; self.label2.backgroundColor = [UIColor greenColor]; self.label2.layer.borderWidth = 2; self.label2.layer.borderColor = [UIColor redColor].CGColor; self.button.layer.cornerRadius = 3; self.button.backgroundColor = [UIColor greenColor]; self.button.layer.borderWidth = 2; self.button.layer.borderColor = [UIColor redColor].CGColor; self.aView.layer.cornerRadius = 3; self.aView.backgroundColor = [UIColor greenColor]; self.aView.layer.borderWidth = 2; self.aView.layer.borderColor = [UIColor redColor].CGColor; ......
上面的代码是为了实现这样的效果而写的代码。
很多几乎是一毛一样的代码,充斥着整个APP。自己花在这些样式调整上的时间也非常多。为了实现一个样式效果,需要配置各种各样的属性。而且很多界面中这些样式都是一样的。于是又是无数次的重复上面的工作。oy my god!时间啊,就这样流走了。做为一个懒人,就会发问有没有一种可以少写点代码的方式呢?你可以写一个子类嘛,但是会有类污染的问题,单纯为了一个公有样式,就创建个子类有点大材小用。那写一批样式渲染的函数呗,恩这个注意不错,但是细想一下工作量也不小,而且不通用。于是,花了几天的时间我写了StyleSheet这个库。为了的就是来简化UI样式的编码。
通过上述描述我们可以发现,原始的写UI样式的问题:
繁琐的代码,大量重复性的工作
样式无法共享,每一个View都需要重新进行样式赋值。
而StyleSheet的设计目标就是:
样式配置轻便化,能够使用更加少的代码来描述View的样式
样式在View之间的共享.不止是相同类的实例之间的共享,甚至是跨类的共享。
So,先看看上述代码使用StyleSheet之后的效果:
self.label.style = DZLabelStyleMake( style.backgroundColor = [UIColor greenColor]; style.cornerRedius = 3; style.borderColor = [UIColor redColor]; style.borderWidth = 2; style.textStyle.textColor = [UIColor darkTextColor]; style.textStyle.font = [UIFont systemFontOfSize:13]; ); self.label2.style = self.label.style; self.aView.style = self.label.style; [self.button.style copyAttributesWithStyle:self.label.style];
设计与使用
在设计StyleSheet的时候故意淡化了被渲染的View的类型的概念,任何一种类型的Style可以对任何类型的View进行渲染,但是必须是这种类型的View支持Style所指称的属性。比如你可以使用真对Button设计的DZButtonStateStyle来渲染一个UILabel,但由于UILabel不支持DZButtonStateStyle中的渲染属性,所以渲染结果是无效的。
但是当使用DZButtonStyle(继承自DZViewStyle)来渲染UILabel的时候,会使用DZButtonStyle中其父类的某些渲染属性,来渲染UILabel的父类UIView所支持的那些属性。
DZLabelStyle* style =DZLabelStyleMake( style.backgroundColor = [UIColor greenColor]; style.cornerRedius = 3; style.borderColor = [UIColor redColor]; style.borderWidth = 2; style.textStyle.textColor = [UIColor darkTextColor]; style.textStyle.font = [UIFont systemFontOfSize:13]; ); [style decorateView:self.label];
直接渲染的好处是,不用再次生成Style对象,更加方便样式在多个View之间渲染。
对UIKit中常用的一些组件进行了扩张为他们增利了style属性,直接进行style属性的赋值,会出发一次渲染操作。当第一次调用style属性的时候,会自动生成一个zeroStyle并赋值。
self.label.style = style;
或者
self.label.style = DZLabelStyleMake( style.backgroundColor = [UIColor greenColor]; style.cornerRedius = 3; tyle.borderColor = [UIColor redColor]; style.borderWidth = 2; style.textStyle.textColor = [UIColor darkTextColor]; style.textStyle.font = [UIFont systemFontOfSize:13]; );
当进行赋值渲染的时候,会将Style的Copy后的实例与当前View绑定,当更改Style的属性的时候,对应View的样式会立刻改变。
使用原有的配置,进行通用样式的共享是个非常困难的事情,基本上都是体力活,靠人力来维护。我们的代码中会掺杂大量的用于配置样式的代码,而且是独立且散在。
现在你可以通过StyleSheet解决:
//在头文件中使用 xxx.h 声明一个公有样式 EXTERN_SHARE_LABEL_STYLE(Content) //在实现文件中使用 xxx.m ,实现一个公有样式 IMP_SHARE_LABEL_STYLE(Content, style.backgroundColor = [UIColor clearColor]; style.cornerRedius = 2; style.textStyle.textColor = [UIColor redColor]; )
(1)使用共享样式,方式一
self.label.style = DZStyleContent();
(2)使用共享样式,方式二(推荐)
很多时候, 如果不需要进一步更改样式,可以不采复制赋值的方式来进行渲染,可以直接使用:
[DZStyleContent() decorateView:self.label];
只进行渲染,而不进行复制。
好了,现在可以尝试着换这种方式来写UI样式了。
该组件 GitHub地址