使用 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;
配置热更新步骤的图解如下:

最新回复(0)
/jishuv_2BxNepsLMGN7Q5DZC949qJYLSX7btRfgzv1WK_2FeJdKs_3D4674848
8 简首页