使用 FlexLib 布局iOS页面

发现一个布局新利器，用写前端的方式来写iOS页面，这里做一个使用总结。

1.xml文件中标签元素有几大属性，分别是：name，layout，attr，onPress，对它们的解释如下：

name表示指定的元素，加载页面时需要进行元素的匹配；

layout表示指定的约束，可以是flex，flexDirection，justifyContent，width，height，alignItems，margin，marginLeft，marginRight等；

attr表示指定的样式，可以是bgColor，color，fontSize，linesNum，text，textAlignment，lineBreakMode；

onPress表示指定的方法，与OC中的@selector一样，方法名可以带冒号表示有参数；

2.继承于FlexLib中的类的控制器类或视图类，其视图或属性视图层次结构从下到上依次是：…vc.view/someView/cellContentView->FlexRootView->xml文件中最外层view…，会发现视图层比直接用原生写多出一层view，就是FlexRootView；

3.可以用FlexTouchView来代替原生UIButton的功能和样式，内部可以包含UILabel(文字)和UIImageView(图片)，还可以绑定事件；

4.标签元素的name属性不是必写的，当其对应的原生类中的属性在类中实际用到了才写，因为xml文件需要和原生页面进行元素属性的匹配，进而在页面中进行一系列操作或计算什么的，不仅要写，还要保持一致，否则就会匹配失败；如果用不到就不用写了；

5.独立的样式文件
可将元素的样式写在一个独立的.style文件中，一来方便调试，在臃肿的标签群中改某个标签对应的样式实在是一件很烦的事，二来可以将共同的样式提取出来，方便使用，减少代码冗余。在使用.style文件时，记得元素的layout和attr要分开写，一对style标签只对应某个元素的layout或attr，不要混写在一起，否则会出现代码警告或页面异常；

6.关于报错：

parser error : Extra content at the end of the document
Flexbox: xml parse failed: Error Domain=com.google.GDataXML Code=-1 "(null)"

出现这种错误的原因一般是xml文件的问题，自定义的类继承了FlexLib中的类，但工程中没有与之对应的xml文件。其实也不一定每个类都要继承FlexLib中的类，还按原生的写法来实现，混合写页面也是完全可以的；

7.关于热更新
为了方便开发阶段的调试，FlexLib提供了快捷键实时刷新UI的功能，只需要简单的配置一下即可。配置步骤如下：

1.在AppDelegate.m中的"didFinishLaunchingWithOptions"方法中添加首行代码：
  FlexRestorePreviewSetting();
  这句代码的作用是在App启动时开启热更新功能，仅限于Debug阶段中对使用xml布局的更新，原生代码布局的更新还是要重新编译和运行才可以；

2.开启 HTTP Server，在工程根目录下执行下面一行命令：
  python -m SimpleHTTPServer 8000   #for python 2.x
  python -m http.server 8000        #for python 3.x

3.设置 Base URL
  上述命令执行后，聚焦到模拟器上，使用快捷键 control+E 调出设置页面，点击setting，进行URL的设置；
  URL格式一般是：http://本机ip:端口号(端口号可用8000)/，然后保存，再创建目录索引即可；
  设置完成后就可以热更新了，使用快捷键command+R；

配置热更新步骤的图解如下：

参考文献：
https://juejin.im/post/5a33a6926fb9a045104a8d3c
https://github.com/zhenglibao/FlexLib
https://github.com/zhenglibao/FlexLib/wiki/Hot-preview

测试Demo：
https://github.com/xiaohuiCoding/XHFlexLibDemo