python 利器ios_iOS新一代界面开发利器 —— FlexLib

原标题：iOS新一代界面开发利器 —— FlexLib

FlexLib

english

FlexLib是用Obj-c语言编写的ios布局框架。 该布局框架基于flexbox模型，这个模型是web端的布局标准。基于flexbox模型，FlexLib提供了强大的布局能力，并且易于使用。

使用FlexLib, 可以大幅提高ios的界面开发速度，并且适应性更好。

屏幕截图

运行时动态更新界面:

样例截图

iPhoneX adaption

特性

基于xml格式的布局文件

控件与变量自动绑定

默认支持onPress事件

支持大量的布局属性 (padding/margin/width/…)

支持视图属性 (eg: bgColor/fontSize/…)

支持引用预定义的风格

视图属性支持扩展

支持模态显示视图

表格cell高度动态计算

完美适配iPhone X

支持运行时更新界面

支持自动调整view的区域来躲避键盘

支持键盘工具栏来切换输入框

release模式下支持使用缓存机制加快速度使用方法将xml布局文件用于视图控制器:

编写xml布局文件，下面是一个样例:

从FlexBaseVC派生自定义的视图控制器

@interfaceFlexViewController: FlexBaseVC

@end

@interfaceFlexViewController(){

// these will be binded to those control with same name in xml fileFlexScrollView* _scroll;

UILabel* _label; }

@end

@implementationFlexViewController- (

void)viewDidLoad { [

superviewDidLoad];

self

.navigationItem

.title= @

"FlexLib Demo"; } - (

void)didReceiveMemoryWarning { [

superdidReceiveMemoryWarning];

// Dispose of any resources that can be recreated.} - (

void)onTest:(

id)sender { TestVC* vc=[[TestVC alloc]init]; [

selfpresentViewController:vc animated:

YEScompletion:

nil]; } - (

void)onTestTable:(

id)sender { TestTableVC* vc=[[TestTableVC alloc]init]; [

selfpresentViewController:vc animated:

YEScompletion:

nil]; }

@end

像通常一样使用派生的试图控制器:FlexViewController *vc = [[FlexViewController alloc] init];

UINavigationController*nav = [[

UINavigationControlleralloc] initWithRootViewController:vc];

self

.window

.rootViewController= nav; [

self

.windowmakeKeyAndVisible]; 将xml布局用于TableCell:

编写xml布局文件，该布局文件与视图控制器使用的布局文件没有区别。

从FlexBaseTableCell派生子类:

@interfaceTestTableCell: FlexBaseTableCell

@end

@interfaceTestTableCell(){

UILabel* _name;

UILabel* _model;

UILabel* _sn;

UILabel* _updatedBy;

UIImageView* _

return; }

@end

@implementationTestTableCell

@end

在UITableView的回调函数cellForRowAtIndexPath中调用initWithFlex创建cell. 在 heightForRowAtIndexPath中调用heightForWidth计算cell的高度。- (nonnull

UITableViewCell*)tableView:(nonnull

UITableView*)tableView cellForRowAtIndexPath:(nonnull

NSIndexPath*)indexPath {

static

NSString*identifier = @

"TestTableCellIdentifier"; TestTableCell* cell = [tableView dequeueReusableCellWithIdentifier:identifier];

if(cell ==

nil) { cell = [[TestTableCell alloc]initWithFlex:

nilreuseIdentifier:identifier]; }

returncell; } - (

CGFloat)tableView:(

UITableView*)tableView heightForRowAtIndexPath:(

NSIndexPath*)indexPath {

if(_cell==

nil){ _cell = [[TestTableCell alloc]initWithFlex:

nilreuseIdentifier:

nil]; }

return[_cell heightForWidth:_table

.frame

.size

.width]; } 将xml布局用于普通视图:

编写xml布局文件

使用FlexRootView加载xml文件, 设置对应属性是其高度或者宽度可变

将FlexRootView添加到其他未使用flexbox进行布局的普通视图上。运行时编辑预览界面编辑预览视图控制器界面

在工作目录开启http服务器：

如果mac系统安装的是python2.7，可以在命令行通过如下命令开启：python -m SimpleHTTPServer 8000

在程序初始化的地方设置访问本机http服务器的基地址:

FlexSetPreviewBaseUrl(@”http://你本机的ip:端口号/FlexLib/res/”);

运行程序，打开要调试的视图控制器，在模拟器中按下Cmd+R来刷新界面. 注意：该快捷键仅在debug模式下可用.

注意：Cmd+R是在模拟器中当试图控制器处于显示状态时按下的，不是在xcode里边。baseurl是用来拼接资源的url用的。比如你设置的是’http://ip:port/abc/‘,而你需要访问TestVC，则最终的url将是’http://ip:port/abc/TestVC.xml’

编辑预览任意界面

按照前面方法开启http服务器并设置http基地址

设置资源加载方式

FlexSetLoadFunc(YES) or

FlexSetCustomLoadFunc(loadfunc)

这样程序运行后所有界面将通过http进行加载，如果网络速度慢可能会导致界面卡顿在Swift工程中使用

将Podfile文件调整为使用framework方式，如下

从FlexBaseVC, FlexBaseTableCell派生自己的类

对于需要进行事件绑定的变量、事件、和类名，需要使用@objc关键字声明，使其能够在obj-c中访问, 如下：

例子

下载代码, 打开Example/FlexLib.xcworkspace 即可运行.

属性参考

布局属性已经稳定，但视图属性仍然在快速增加中。你可以通过在工程中搜索FLEXSET来找到所有支持的视图属性。如果现有的视图属性不能满足要求，你也可以扩展属于自己的视图属性，然后在xml文件中使用.

注意：当FlexLib检测到任何不支持的属性时，将会在log窗口输出对应的日志，因此当你在开发项目时不要忽视他所输出的信息。

layout attributes

view attributes

安装

通过pod方式安装FlexLib，例子如下:

pod 'FlexLib'关于Flexbox

CSS-flexbox

Yoga-flexbox返回搜狐，查看更多

责任编辑：