iOS上的CSS样式协议 VKCssProtocol

Jorcl 3年前
   <p>早先,写过一阵子RN,前一阵子写微信小程序,深深地觉得CSS这个东西写起来很爽,样式与界面完全隔离,写好一套一套的样式 CSS Class 然后,在写界面HTML的时候直接对界面元素,无论是什么HTML标签,什么控件,只要指定 CSS Class 的名字就能自动生效。</p>    <ul>     <li> <p>样式和界面完全隔离解耦</p> </li>     <li> <p>样式之间可以自由任意排列组合创建新CSS Class</p> </li>     <li> <p>对任意界面元素指定样式Class名就能自动生效</p> </li>    </ul>    <h3><strong>客户端场景</strong></h3>    <ul>     <li> <p>UI出App设计图也会有一套标准UI库</p> </li>     <li> <p>不同的底色,字号,字色,圆角,字体,阴影等等样式属性相互组合</p> </li>     <li> <p>UI有时候更换整体设计风格的时候,所有项目中用到的标准组件,应该随着UI设计一起变为最新的设计效果</p> </li>     <li> <p>标准UI库扩展延伸一下,就是客户端主题风格,换肤等系统</p> </li>    </ul>    <h3><strong>工厂模式</strong></h3>    <p>看到上面的设计需求,相信很多人第一时间想到的都是客户端里构建一套工厂模式</p>    <ul>     <li> <p>由工厂模式统一生成UI设计的标准控件</p> </li>     <li> <p>所有需要使用标注控件的地方都用工厂去生成</p> </li>     <li> <p>当UI需要整体修改样式属性,修改工厂模式的构造方法就能实现整体应用新效果</p> </li>    </ul>    <p>我不是很喜欢这种模式</p>    <ul>     <li> <p>写法不统一,必须让使用者使用工厂的构造方法来创建标准UI,非标准UI写法就随意了</p> </li>     <li> <p>耦合性比较强,必须引入工厂模块</p> </li>    </ul>    <h3><strong>Css样式,Protocol协议</strong></h3>    <ul>     <li> <p>希望引入Css的样式思想,让样式与界面分离</p> </li>     <li> <p>将UI给的统一标准设计图,专心的写成 .css 文件</p> </li>     <li> <p>可以动态下发,可以动态替换,动态更新效果。</p> </li>     <li> <p>希望像iOS Protocol协议那样工作</p> </li>     <li> <p>不管控件是Label Button Image View,CSSClass都可以直接指定一个协议名字,样式功能就自动生效</p> </li>     <li> <p>不管控件是用工厂创建的,还是Xib拖线的,还是手写代码写的,都能无缝接入这个cssprotocol</p> </li>     <li> <p>xxview.protocol = "cssclassname1 cssclassname2" 这种感觉</p> </li>     <li> <p>协议可以同时指定多个样式,以空格区分,样式之间自由组合</p> </li>    </ul>    <h3><strong>我不想动态修改界面元素布局,动态创建全新的界面</strong></h3>    <p>大家都知道,CSS有一个很大的用途就是用于界面布局,并且css的布局写法和iOS原生的布局写法有很大的区别,所以在这里我想强调一点,我这里写的cssprotocol,不想包含任何跟布局有关,只是单纯的动态配置外观样式,丝毫不影响布局。</p>    <p>原因是,项目里总会存在着各种各样的布局方式,有frame布局,有masonry autolayout,也有XIB拖线autolayout,我希望我写的东西能让使用的人很快的在自己项目里接入,而不是一下删掉旧的布局方案,全都替换成我的。</p>    <p>我希望使用者直接在现有的代码里,无论是哪种方式实现的界面,取到UIView,直接指定cssprotocol,就自动样式生效了,不要让使用者需要大规模改动现有代码。</p>    <p>同理,我也没想让这一套能够动态的创建UI,真要动态创建原生UI,直接用samurai reactnative weex好了。</p>    <p>还原我的初衷,我还是希望原生开发者能在不改变自己的项目的情况下,很快的接入这个工具,对于主题样式能够控制的更灵活和方便。</p>    <p>题外话:</p>    <p>我就很不喜欢ASDK的设计,一整套异步渲染,flexbox页面布局,网络,缓存,滚动控制等等一堆完整解决方案杂糅在一起,让使用者的代价异常的高,哪怕提供了UIKit转ASNode的简单入口也无法改变这一笨重无比的事实</p>    <p>其实ASDK每一个feature,单看源码,单独拆出来模块,学习思想,吸收进入自己的项目都是很好地。</p>    <h2><strong>VKCssProtocol</strong></h2>    <p>整个项目的代码,以及使用demo,都在上面</p>    <p>这其实是一个为native开发准备的工具,是OC的代码,OC的实现,别被CSS的名字欺骗了╮(╯_╰)╭</p>    <p>对于这样的iOS客户端开发的场景,多少会有一定的帮助</p>    <ul>     <li>UI出App设计图有一套标准UI库,包括大中小标题,大中小按钮,bar配色,分割线等</li>     <li>每种标准样式都含有不同的底色,字号,字色,圆角,字体,阴影等等样式属性,属性之间相互自有组合</li>     <li>UI有时候更换整体设计风格的时候,所有项目中用到的标准组件,应该随着UI设计一起动态生效为最新的设计效果</li>     <li>客户端主题风格切换,换肤等系统</li>    </ul>    <h2><strong>基本用法</strong></h2>    <p>简单的看一个GIF吧,左边就是CSS代码,后续我会给出目前已支持的CSS列表,在这里写完后,右侧可以实时看到css效果,可以看到我准备了2个view样式,准备了2个文字样式,然后四个UI进行排列组合,任意交叉组合,实现各种灵活的设计</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ce902608153fa956405e77651a193c00.gif"></p>    <p><strong>先在项目里创建.css文件</strong></p>    <p>然后在里面写Css代码,这里我粘个样例</p>    <pre>  <code class="language-objectivec">.commenView1{  background-color:orange;  border-top:3pxsolid#9AFF02;  border-left:5pxsolid black;  }  .commenView2{  background-color:#FF9D6F;  border-color:black;  border-width:2px;  border-radius:15px;  }  .commenText1{  color:white ;  font-size:20px;  text-align : right;  text-transform: lowercase;  text-decoration: line-through;  }  .commenText2{  color:black ;  font-size:15px;  text-align : right;  text-transform: uppercase;  text-decoration: underline;  }  </code></pre>    <p><strong>在iOS项目代码里加载Css</strong></p>    <p>在didFinishLaunch or 某个你打算加载整体Css文件的位置</p>    <pre>  <code class="language-objectivec">//先import 头文件  #import "VKCssProtocol.h"    //读取bundle中名为cssDemo的css文件  @loadBundleCss(@"cssDemo");  </code></pre>    <p><strong>对任意UI指定协议</strong></p>    <pre>  <code class="language-objectivec">UILabel*btabc = [[UILabelalloc]initWithFrame:CGRectMake(20,50,self.view.bounds.size.width -40,80)];  btabc.text = @"commenView1 commenText1";  [self.view addSubview:btabc];    UILabel*lbabc = [[UILabelalloc]initWithFrame:CGRectMake(20,150,self.view.bounds.size.width -40,80)];  lbabc.text = @"commenView2 commenText1";  [self.view addSubview:lbabc];    UILabel*btabcd = [[UILabelalloc]initWithFrame:CGRectMake(20,250,self.view.bounds.size.width -40,80)];  btabcd.text = @"commenView1 commenText2";  [self.view addSubview:btabcd];    UILabel*lbabcd = [[UILabelalloc]initWithFrame:CGRectMake(20,350,self.view.bounds.size.width -40,80)];  lbabcd.text = @"commenView2 commenText2";  [self.view addSubview:lbabcd];  </code></pre>    <p>上面的UI创建可以用任意方法创建,frame,autolayout,xib,随便创建</p>    <p>只需要对指定的UI对象,赋值cssClass属性,就可以指定css协议,就直接生效了,</p>    <pre>  <code class="language-objectivec">btabc.cssClass = @"commenView1 commenText1";  lbabc.cssClass = @"commenView2 commenText1";  btabcd.cssClass = @"commenView1 commenText2";  lbabcd.cssClass = @"commenView2 commenText2";  </code></pre>    <p>可以对一个UI对象,指定多个cssClass协议,他们一起组合生效,优先级按最后生效的算</p>    <h2><strong>加载CSS的API</strong></h2>    <p>加载css主要依赖的是 VKCssClassManager 这个类,但提供了4个宏,可以快速方便的加载css</p>    <ul>     <li>VKLoadBundleCss(@"cssDemo");</li>    </ul>    <p>加载bundle内文件名为cssDemo的.css文件</p>    <ul>     <li>VKLoadPathCss(@"xxx/xxx.css");</li>    </ul>    <p>加载路径path下的css文件</p>    <ul>     <li>@loadBundleCss(@"cssDemo");</li>    </ul>    <p>等同于VKLoadBundleCss,模拟了@语法糖</p>    <ul>     <li>@loadPathCss(@"xxx/xxx.css");</li>    </ul>    <p>等同于VKLoadPathCss,模拟了@语法糖</p>    <p>吐槽:</p>    <p>模拟@selector()这种的OC语法糖的方案真TM坑爹</p>    <p>凡是这种@loadBundleCss的宏,是无法获得xcode提供的代码自动补全的</p>    <p>直接使用VKLoadBundleCss,是可以获得xcode代码自动补全的</p>    <p>跟RAC的@strongify @weakify一样,无法获得代码自动补全</p>    <p>这真的是一种只有装B,没球用的,看起来很pro的写法</p>    <h2><strong>指定cssClass</strong></h2>    <p>上面贴过代码,我对所有的UIView都扩写了一个category,里面新增了一个属性 cssClass ,对这个属性赋值,就相当于给这个UIView对象指定所遵从的cssClass协议,可以同时指定多个cssClass协议,用空格分开。</p>    <p>一个cssClass其实是一系列样式属性style的集合,将这一系列样式属性组合在一起,起个名字就是cssClass了,样给一个UI指定了cssClass就相当于一组style都生效了。</p>    <pre>  <code class="language-objectivec">btabc.cssClass = @"commenView1 commenText1";  lbabc.cssClass = @"commenView2 commenText1";  btabcd.cssClass = @"commenView1 commenText2";  lbabcd.cssClass = @"commenView2 commenText2";  </code></pre>    <h2><strong>指定cssStyle</strong></h2>    <p>如果使用者并不打算专门写一个cssClass,只是打算简单的使用这个工具给一个ui赋值一个或几个style,这也是支持的(嗯,常规的html组件也是可以写class属性和style属性的嘛)</p>    <pre>  <code class="language-objectivec">btabc.cssStyle = @"background-color:black border-color:black";  </code></pre>    <p>我扩写的category里,还新增了一个属性 cssStyle ,对这个属性赋值,就相当于给这个UIView对象不创建一个cssClass,直接写一个或多个style使之生效</p>    <p>相当于你把一个或多个style写法,用空格分开,直接赋值给cssStyle即可</p>    <h2><strong>目前支持的style</strong></h2>    <ul>     <li> <p>background-color:orange; View的背景色样式,冒号后是颜色参数,可以直接输入颜色英文or #ffffff这样的十六进制色值</p> </li>     <li> <p>color:#ffffff 如果含有文字,文字的颜色,冒号后是颜色参数,可以直接输入颜色英文or #ffffff这样的十六进制色值</p> </li>     <li> <p>font-size: 20px ; 如果含有文字,文字的字体大小,冒号后面是字号参数</p> </li>     <li> <p>border-color:red View的边框颜色,等同于layer.borderColor,冒号后是颜色参数,可以直接输入颜色英文or #ffffff这样的十六进制色值</p> </li>     <li> <p>border-width: 2px View的边框宽度,等同于layer.borderWidth,冒号后是宽度参数</p> </li>     <li> <p>text-align: center 如果含有文字,文字的左右居中对齐,等同于TextAlignment,参数可以输入left center right justify</p> </li>     <li> <p>border-radius: 2px View的边框圆角,等同于layer.cornerRadius,冒号后面是半径参数</p> </li>     <li> <p>text: abcdefg 如果含有文字,文字的内容,后面参数是字符串</p> </li>     <li> <p>font-family: fontname 如果含有文字,文字的字体,等同于UIFont fontWithName的name,也可以直接输入systemFont,boldSystemFont,italicSystemFont三个快捷输入</p> </li>     <li> <p>background-image: imagenamed 如果含有image,image的名字,等同于UIImage的imageNamed的name</p> </li>     <li> <p>text-shadow: 2px 如果含有文字,文字的阴影宽度,后面是数字参数</p> </li>     <li> <p>text-transform:uppercase 如果含有文字,文字的变化,包含uppercase,lowercase,capitalize三个值,全小写,全大写,首字母大写</p> </li>     <li> <p>text-decoration:underline 如果含有文字,文字加特殊处理,包含underline,line-through两个值,下划线,删除线</p> </li>     <li> <p>border-top: 3px solid #9AFF02 对UIView进行上右下左的单独边线处理,这个值是上边线,第一个参数是宽度,solid后面是颜色</p> </li>     <li> <p>border-right: 3px solid #9AFF02 对UIView进行上右下左的单独边线处理,这个值是右边线,第一个参数是宽度,solid后面是颜色</p> </li>     <li> <p>border-bottom: 3px solid #9AFF02 对UIView进行上右下左的单独边线处理,这个值是下边线,第一个参数是宽度,solid后面是颜色</p> </li>     <li> <p>border-left: 3px solid #9AFF02 对UIView进行上右下左的单独边线处理,这个值是左边线,第一个参数是宽度,solid后面是颜色</p> </li>    </ul>    <h2><strong>支持灵活扩展</strong></h2>    <p>上面提到的每一个style都是一个模块化组件,如果希望扩展新的style,只需要遵循并且实现模块化协议即可轻松地在整个框架里,加入全新的style模块</p>    <p>以 background-color 这个style模块为例</p>    <p>随便新建一个继承自NSObject的类,让这个类遵从 <VKCssStyleProtocol> 协议</p>    <pre>  <code class="language-objectivec">#import <Foundation/Foundation.h>  #import "VKCssStylePch.h"    @interfaceVKBackgroundcolorStyle:NSObject<VKCssStyleProtocol>    @end  </code></pre>    <p>然后在.m文件实现里,先使用 VK_REGISTE_ATTRIBUTE() 宏向框架注册,然后必须实现2个类方法协议</p>    <ul>     <li>+styleName: 实现这个协议决定于你写css的时候冒号前的名字</li>     <li>+setTarget: styleValue: 实现这个协议决定于你如何解读css里面冒号后面的参数,并且处理传入的target,也就是目标UIView</li>    </ul>    <pre>  <code class="language-objectivec">@implementationVKBackgroundcolorStyle    VK_REGISTE_ATTRIBUTE()    + (NSString*)styleName{  return@"background-color";  }    + (void)setTarget:(id)target styleValue:(id)value{  UIColor*color = [value VKIdToColor];  if([target isKindOfClass:[UIViewclass]]) {   [(UIView*)target setBackgroundColor:color];   }  }    @end  </code></pre>    <h2><strong>动态更新样式</strong></h2>    <p>VKCssClassManager 这个类负责管理所有的css样式表,我们希望这个css文件就好像配置表一样,可以动态下发,这样在未来发版之后,也能改变app的主题样式,自然就需要一套刷新机制</p>    <pre>  <code class="language-objectivec">+ (void)readBundleCssFile:(NSString*)cssFile;    + (void)readCssFilePath:(NSString*)cssFilePath;    + (void)reloadCssFile;    + (void)clearCssFile;  </code></pre>    <p>上面是 VKCssClassManager 的接口,由于bundle里的css文件是不可更新的,因此刷新机制与readBundleCssFile没啥关系,只有通过readCssFilePath路径加载的刷新机制才有意义</p>    <ul>     <li>reloadCssFile 的用处就是沿着原路径重新加载css,使用场景是新的css覆盖了旧CSS路径不变,在reloadCssFile的时候会自动触发clearCssFile;</li>     <li>clearCssFile 的用处是让cssClassManager清空目前所管理的所有class;</li>     <li>在不直接使用reloadCssFile的情况下,可以先执行clearCssFile,再执行readCssFilePath,从而实现清空css后加载新路径的css文件</li>    </ul>    <h2><strong>HotReloader</strong></h2>    <p>大家在Gif里看到了像playground一样,无需编译和重新运行,每改一行代码,界面就立刻实时生效的效果,主要是额外写了一个插件 HotReloader</p>    <p>由于HotReloader的设计初衷是给调试,高效的实时看效果用的,因此整个HotReloader通过编译控制,所有函数只有在模拟器编译的情况下才有效,真机下HotReloader回自动失效</p>    <p>这个HotReloader不是必须的,你完全可以不使用它,整个CssProtocol一样可以work</p>    <p>想要使用它需要先import头文件 #import "VKCssHotReloader.h" ,然后在准备加载Css的地方用预编译控制,控制模拟器下加载css的代码变为hotReloader监听Css</p>    <pre>  <code class="language-objectivec">#if TARGET_IPHONE_SIMULATOR  //playground调试  //JS测试包的本地绝对路径  NSString*rootPath = [[NSBundlemainBundle] objectForInfoDictionaryKey:@"projectPath"];;  NSString*cssPath = [NSStringstringWithFormat:@"%@%@", rootPath,@"/cssDemo.css"];     [VKCssHotReloader hotReloaderListenCssPath:cssPath];  #else   VKLoadBundleCss(@"cssDemo");  #endif  </code></pre>    <p>这个绝对路径一定要填Mac的磁盘文件路径哟,用过JSPatchPlaygroundTool的一定不会陌生</p>    <p>做完这件事之后还要注意2个事情</p>    <ul>     <li>在你打算开启调试的地方调用 [VKCssHotReloader startHotReloader]; (比如某个界面的ViewDidLoad)</li>     <li>在你打算停止调试的地方调用 [VKCssHotReloader endHotReloader]; (比如某个界面的dealloc)</li>    </ul>    <p>为什么要这么做,因为一旦当你startHotReloader的时候,所有进行过cssClass,cssStyle设置的view都会被建立一个监听,因此会造成View对象的额外持有导致的不释放,因此当你不打算HotReload了就要关闭这个监听endHotReloader</p>    <p>因为这样的设计有可能造成使用不当的内存Leak,所以对HotReloader的所有代码都进行了编译控制,只有模拟器下才会工作,真机orRelease包下,无论你怎么忘记写endHotReloader都不会造成Leak</p>    <p> </p>    <p>来自:http://awhisper.github.io/2016/11/01/cssprotocol/</p>    <p> </p>