FlexLib 3.4.0

FlexLib 3.4.0

测试已测试
语言语言 Obj-CObjective C
许可证 MIT
发布最后发布2024年8月

zhenglibao 维护。



FlexLib 3.4.0

FlexLib

CI Status Version License Platform

FlexLib

中文版

FlexLib 是一个专为 iOS 设计的 Objective-C 布局框架。它基于 flexbox 模型,该模型是网络布局的标准。因此,布局功能强大且易于使用。

使用 FlexLib,您可以比以前更快地编写 iOS UI,并具有更好的适应性。


屏幕截图

此演示是热预览

example0

您能想象几乎不需要代码就能实现以下效果吗?

example1 example2

自动避免键盘

example3

iPhone X 适配

iPhoneX


特性

  • 基于XML格式的布局
  • 自动变量绑定
  • 点击事件绑定
  • 支持布局属性(padding/margin/width/...)
  • 支持视图属性(例如:bgColor/fontSize/...)
  • 支持引用预定义样式
  • 视图属性可扩展
  • UILabel完全支持富文本
  • 支持模态视图
  • 表格单元格高度计算
  • 完美支持iPhoneX
  • 支持热预览
  • 自动调整视图以避免键盘遮挡
  • 键盘工具栏切换输入字段
  • 发布模式缓存支持
  • 支持Swift项目
  • 在一页中查看所有布局(Control+V)
  • 多语言支持

优势

  • Flexbox的速度比autolayout快得多。

compare result

  • Flexbox比autolayout更通用。Flexbox是网络和ReactNative、Weex、AsyncDisplayKit、Android等的标准。

  • FlexLib的可读性更好。别人写的autolayout真是无聊。

  • 对于以下图像等类似的页面,您不再需要UITableView。只需在一个XML中编写一切。这要简单得多,也更容易维护。

setting page

  • 对于复杂的UITableViewCell的高度计算,真的很无聊。有了FlexLib,所有计算都是自动的。

  • FlexScrollView(UIScrollView的子类)可以自动管理其内容大小。我确信这将为您节省大量时间。

  • 要显示或隐藏子视图,只需设置hidden属性。所有布局将自动刷新。

  • 热预览是魔法。您可以在不重启应用的情况下看到设备上的最终效果。

  • UILabel支持富文本文本和每个富文本部分的onPress,它还允许动态更改富文本。


用法

使用xml布局文件为ViewController

  • 使用xml文件编写布局。

以下是一个示例文件。

<?xml version="1.0" encoding="utf-8"?>

<UIView layout="flex:1,justifyContent:center,alignItems:center" attr="bgColor:white">
<UIView name="_test" onPress="onPressTest:" layout="width:40,height:40" attr="bgColor:lightGray"/>
</UIView>
  • 从FlexBaseVC派生子视图控制器类。
@interface FlexViewController : FlexBaseVC
{
    // these will be binded to those control with same name in xml file
    UIView* _test;
}
@end

@implementation FlexViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.navigationItem.title = @"FlexLib Demo";
}
// This function will bind to onPress event
- (void)onPressTest:(id)sender {
    TestVC* vc=[[TestVC 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
{
    UILabel* _name;
    UILabel* _model;
    UILabel* _sn;
    UILabel* _updatedBy;

    UIImageView* _return;
}
@end
@implementation TestTableCell
@end
  • 在cellForRowAtIndexPath回调中,调用initWithFlex构建单元格。在heightForRowAtIndexPath中,调用heightForWidth计算高度。
- (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文件。

  • 使用FlexFrameView加载xml文件,您可以设置框架或使其灵活。初始化后,可能需要调用layoutIfNeeded,然后再将其添加到其他视图。

  • 将此FlexFrameView添加到其他传统视图。

    //load TableHeader.xml as UITableView header
    
    CGRect rcFrame = CGRectMake(0, 0, [[UIScreen mainScreen] bounds].size.width, 0);
    FlexFrameView* header = [[FlexFrameView alloc]initWithFlex:@"TableHeader" Frame:rcFrame Owner:self];
    header.flexibleHeight = YES;
    [header layoutIfNeeded];
    
    _table.tableHeaderView = header;

热预览

您可以在这里看到它。


Swift项目的使用方法

  • 调整'Podfile'以使用框架

podfile

  • 从FlexBaseVC、FlexBaseTableCell等扩展你的swift类
  • 对于这些变量、onPress事件、类,你应该使用@objc关键字声明它们。例如

@objc


示例

要运行示例项目,克隆仓库,然后在XCode中打开Example/FlexLib.xcworkspace来运行。


属性参考

FlexLib支持两种类型的属性:布局属性和视图属性。布局属性遵循Yoga实现。视图属性可以使用FLEXSET宏进行扩展。

注意:当FlexLib无法识别你提供的属性时,它会输出日志。因此,在开发项目时,你不应该忽略日志。

布局属性

视图属性


FlexLib类

您可以在Wiki-FlexLib Classes获取


安装

FlexLib可以通过CocoaPods获取。要安装,只需将以下行添加到您的Podfile中

pod 'FlexLib'

Intellisense

您可以在Wiki-VSCode Intellisense找到它


常见问题解答

您可以在Wiki-FAQ找到它


关于Flexbox

CSS-felxbox

Yoga-felxbox


作者

zhenglibao,[email protected]。QQ群:687398178

如果您有问题,您可以

希望你会喜欢它。:)


许可证

FlexLib可在MIT许可证下使用。有关更多信息,请参阅LICENSE文件。