返回 登录
2

iOS新一代界面开发利器 —— FlexLib

FlexLib

english

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

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


屏幕截图

运行时动态更新界面:

example0

样例截图

example1
example2
example3

iPhoneX adaption

iPhoneX


特性

  • 基于xml格式的布局文件
  • 控件与变量自动绑定
  • 默认支持onPress事件
  • 支持大量的布局属性 (padding/margin/width/…)
  • 支持视图属性 (eg: bgColor/fontSize/…)
  • 支持引用预定义的风格
  • 视图属性支持扩展
  • 支持模态显示视图
  • 表格cell高度动态计算
  • 完美适配iPhone X
  • 支持运行时更新界面
  • 支持自动调整view的区域来躲避键盘
  • 支持键盘工具栏来切换输入框
  • release模式下支持使用缓存机制加快速度

使用方法

将xml布局文件用于视图控制器:

  • 编写xml布局文件,下面是一个样例:
<UIView layout="flex:1,justifyContent:center,alignItems:center" attr="bgColor:lightGray">
    <UIView layout="height:1,width:100%" attr="bgColor:red"/>
    <FlexScrollView name="_scroll" layout="flex:1,width:100%,alignItems:center" attr="vertScroll:true">
        <UILabel name="_label" attr="@:system/buttonText,text:You can run on iPhoneX,color:blue"/>
        <UIView onPress="onTest:" layout="@:system/button" attr="bgColor:#e5e5e5">
            <UILabel attr="@:system/buttonText,text:Test ViewController"/>
        </UIView>
        <UIView onPress="onTestTable:" layout="@:system/button" attr="bgColor:#e5e5e5">
            <UILabel attr="@:system/buttonText,text:Test TableView"/>
        </UIView>
        <UIView onPress="onTestScrollView:" layout="@:system/button" attr="bgColor:#e5e5e5">
            <UILabel attr="@:system/buttonText,text:Test ScrollView"/>
        </UIView>
        <UIView onPress="onTestModalView:" layout="@:system/button" attr="bgColor:#e5e5e5">
            <UILabel attr="@:system/buttonText,text:Test ModalView"/>
        </UIView>
        <UIView onPress="onTestLoginView:" layout="@:system/button" attr="bgColor:#e5e5e5">
            <UILabel attr="@:system/buttonText,text:Login Example"/>
        </UIView>
    </FlexScrollView>
</UIView>
  • 从FlexBaseVC派生自定义的视图控制器

@interface FlexViewController : FlexBaseVC
@end

@interface FlexViewController ()
{
    // these will be binded to those control with same name in xml file
    FlexScrollView* _scroll;
    UILabel* _label;
}
@end

@implementation FlexViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.navigationItem.title = @"FlexLib Demo";
}
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
- (void)onTest:(id)sender {
    TestVC* vc=[[TestVC alloc]init];
    [self presentViewController:vc animated:YES completion:nil];
}
- (void)onTestTable:(id)sender {
    TestTableVC* vc=[[TestTableVC alloc]init];
    [self presentViewController:vc animated:YES completion:nil];
}

@end
  • 像通常一样使用派生的试图控制器:

    FlexViewController *vc = [[FlexViewController alloc] init];

    UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:vc];
    self.window.rootViewController = nav;

    [self.window makeKeyAndVisible];

将xml布局用于TableCell:

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

  • 从FlexBaseTableCell派生子类:


@interface TestTableCell : FlexBaseTableCell
@end

@interface TestTableCell()
{
    UILabel* _name;
    UILabel* _model;
    UILabel* _sn;
    UILabel* _updatedBy;

    UIImageView* _return;
}
@end
@implementation TestTableCell
@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:nil reuseIdentifier:identifier];
    }
    return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if(_cell==nil){
        _cell = [[TestTableCell alloc]initWithFlex:nil reuseIdentifier: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方式,如下
    podfile

  • 从FlexBaseVC, FlexBaseTableCell派生自己的类

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

@objc


例子

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


属性参考

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

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

layout attributes

view attributes


安装

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

pod 'FlexLib'

关于Flexbox

CSS-flexbox

Yoga-flexbox

评论