FlexLib
FlexLib
FlexLib 是一个专为 iOS 设计的 Objective-C 布局框架。它基于 flexbox 模型,该模型是网络布局的标准。因此,布局功能强大且易于使用。
使用 FlexLib,您可以比以前更快地编写 iOS UI,并具有更好的适应性。
屏幕截图
此演示是热预览
您能想象几乎不需要代码就能实现以下效果吗?
自动避免键盘
iPhone X 适配
特性
- 基于XML格式的布局
- 自动变量绑定
- 点击事件绑定
- 支持布局属性(padding/margin/width/...)
- 支持视图属性(例如:bgColor/fontSize/...)
- 支持引用预定义样式
- 视图属性可扩展
- UILabel完全支持富文本
- 支持模态视图
- 表格单元格高度计算
- 完美支持iPhoneX
- 支持热预览
- 自动调整视图以避免键盘遮挡
- 键盘工具栏切换输入字段
- 发布模式缓存支持
- 支持Swift项目
- 在一页中查看所有布局(Control+V)
- 多语言支持
优势
- Flexbox的速度比autolayout快得多。
-
Flexbox比autolayout更通用。Flexbox是网络和ReactNative、Weex、AsyncDisplayKit、Android等的标准。
-
FlexLib的可读性更好。别人写的autolayout真是无聊。
-
对于以下图像等类似的页面,您不再需要UITableView。只需在一个XML中编写一切。这要简单得多,也更容易维护。
-
对于复杂的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'以使用框架
- 从FlexBaseVC、FlexBaseTableCell等扩展你的swift类
- 对于这些变量、onPress事件、类,你应该使用@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
作者
zhenglibao,[email protected]。QQ群:687398178
如果您有问题,您可以
希望你会喜欢它。:)
许可证
FlexLib可在MIT许可证下使用。有关更多信息,请参阅LICENSE文件。