弹性布局CFlexLayout,继承于CLayout,支持CLayout的所有属性和方法。
弹性布局称为 Flex 容器,简称"容器"。容器默认存在两根轴:水平的主轴和垂直的交叉轴。它的的所有子元素称为 Flex 项目(flex item),简称"项目"。项目默认沿主轴排列。
容器相关的属性和方法
主轴的方向
- 通过XML属性控制如下:
Direction="Row"
Direction="RowReverse"
Direction="Column"
Direction="ColumnReverse"
- 通过C++程序代码调用方法控制如下:
virtual void SetDirection(Direction nDirection);
换行方式
- 通过XML属性控制如下:
Wrap="NoWrap"
Wrap="Wrap"
Wrap="WrapReverse"
- 通过C++程序代码调用方法控制如下:
virtual void SetWrap(Wrap nWrap);
主轴对齐方式
- 通过XML属性控制如下:
JustifyContent="Start"
JustifyContent="End"
JustifyContent="Center"
JustifyContent="Between"
JustifyContent="Around"
- 通过C++程序代码调用方法控制如下:
virtual void SetJustifyContent(FlexAlign nJustifyContent);
交叉轴对齐方式
- 通过XML属性控制如下:
AlignItems="Start"
AlignItems="End"
AlignItems="Center"
AlignItems="Between"
AlignItems="Around"
- 通过C++程序代码调用方法控制如下:
virtual void SetAlignItems(FlexAlign nAlignItems);
主轴线对齐方式
- 通过XML属性控制如下:
AlignContent="Start"
AlignContent="End"
AlignContent="Center"
AlignContent="Between"
AlignContent="Around"
- 通过C++程序代码调用方法控制如下:
virtual void SetAlignContent(FlexAlign nAlignContent);
项目相关的属性和方法
设置视图放大系数
- 通过XML属性控制如下:
Grow="10"
- 通过C++程序代码调用方法控制如下:
virtual void SetGrow(LONG nGrow);
设置视图缩小系数
- 通过XML属性控制如下:
Shrink="10"
- 通过C++程序代码调用方法控制如下:
virtual void SetShrink(LONG nShrink);
示例
效果图
布局文件
<RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="NoWrap">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout>
效果图
布局文件
<RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="Wrap">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout>
效果图
布局文件
<RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="Row" Wrap="WrapReverse">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout>
效果图
布局文件
<RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="RowReverse" Wrap="NoWrap">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout>
效果图
布局文件
<RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="RowReverse" Wrap="Wrap">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
</FlexLayout>
</RelativeLayout>
效果图
布局文件
<RelativeLayout Width="MatchParent" Height="340">
<FlexLayout AlignParentLeft="20" AlignParentTop="20" AlignParentRight="20" AlignParentBottom="20" Background="ID_COLOR_DEFAULT1" Direction="RowReverse" Wrap="WrapReverse">
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='1' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='2' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='3' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='4' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='5' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='6' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='7' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT8">
<TextView Text='8' Width="MatchParent" Height="MatchParent" HorzAlign="Center" Font="ID_FONT_H4" Color="ID_COLOR_WHITE"/>
</RelativeLayout>
<RelativeLayout Width="240" Height="100" Background="ID_COLOR_DEFAULT5">
<TextView Text='9' Width="MatchParent" Height="MatchParent" HorzAlign