FlexLib2

flexbox最初是web端布局方案，现在已经应用在多个平台。

Android、iOS都有单独的实现，Android的实现是google的flexbox-layout，iOS的实现是Facebook的yoga。

这里提供一种方案，使得同一份XML布局文件可以在Android和iOS上跨端使用。

XML文件语法

完全依照Android写法。只需要添加少量代码，即可在iOS上展示同样的布局。

支持的flexbox属性

采用namespace前缀app 双端通用的flexbox属性及值如下

key	value
flexDirection	row/row_reverse/column/column_reverse
flexWrap	nowrap/wrap/wrap_reverse
alignItems	flex_start/flex_end/center/baseline/stretch
alignContent	flex_start/flex_end/center/space_between/space_around/stretch
layout_alignSelf	auto/flex_start/flex_end/center/baseline/stretch
justifyContent	flex_start/flex_end/center/space_between/spce_around

这几个属性iOS端的yoga不支持：layout_flexBasisPercent，layout_flexGrow，layout_flexShrink

宽/高/margin/padding

因为Android和iOS的布局尺寸单位不等同，所以有必要区分双端的相关属性。具体可以参考这里。

下列表格展示双端通用的属性名，但使用的namespace不一样，属性值也有一些差异，比如Android值后面加dp，iOS值可以是数字，可以是一个百分数。

特别指出一下，android:width=match_parent相对应ios:width=100%。

key	android	ios
layout_margin(-/Start/End/Top/Bottom/Left/Right)	follow Android doc	float num value/percent num
padding(-/Start/End/Top/Bottom/Left/Right)	follow Android doc	float num value/percent num
layout_width	follow Android doc	float num value/percent num
layout_height	follow Android doc	float num value/percent num
layout_(min/max)Width	follow Android doc	float num value/percent num
layout_(min/max)Height	follow Android doc	float num value/percent num

类定义

对应关系如下

Android class name	iOS class name
com.google.android.flexbox.FlexboxLayout	UIView
TextView	UILabel
HorizontalScrollView	UIScrollView
ScrollView	UIScrollView
FrameLayout	UIView
View	UIView
ImageView	UIImageView
EditText	UITextView
ScrollView	UIScrollView
ListView	UITableView

其余可以通过更高优先级的ios:class指定。

iOS特有属性

namespace ios 可以添加以下特有属性

key	value
name	变量名，需要在代码里声明
onPress	方法名，需要在代码里声明
class	类名，创建相应类时，优先于XML元素名
style	参考system.style

其余属性，可以查看ViewExt目录下Category的声明。

一些例子

项目Example的界面是通过XML编写的。

另外，flexbox-layout本身有一些测试XML，Example/android_test下面是对这些测试例子进行了适配iOS的结果，除了包含yoga不支持属性的XML，其余的，运行结果跟Android上一致。

安装

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

pod 'FlexLib2'

兼容FlexLib

scripts目录提供了转换脚本，使用方法：

转换单个XML文件：

 ./scripts/flex_xml_trans.py /path/old_style.xml

转换目录下所有XML文件：

 ./scripts/flex_xml_trans.py /path

该项目Example里的XML文件，皆通过此脚本从FlexLib转换而来。

感谢

感谢FlexLib作者zhenglibao。

本项目基于FlexLib开发，关于基本使用方法、特性、性能，可以移步到FlexLib进行了解。

联系方式

优先：提issues

email：zionfong@gmail.com

版权

FlexLib is available under the MIT license. See the LICENSE file for more info.

---