历史版本13 :[通用]手机重布局 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1.描述编辑

由于手机屏幕比PC和PAD端小,因此针对下述三种场景时的模板制作中,手机端需要不同的布局功能。

场景一:

做好的表单含报表块等组件,在pc和pad以及手机上共用,在pc和pad端都是宽高自适应屏幕或者宽高等比例缩放,但是在手机上没有太大的布局要求,只需要在手机上面流式布局展现,即一行一个组件这种情况

场景二:

在手机上也采用原始布局,pc上想要和手机上共用一套模板,模板设计的时候建议以移动端效果为先

场景三:

在手机上采用原始布局,为手机专门制作的模板

针对上述场景,场景一需要手机重布局,而场景二、三则需要手机不重布局

注:2017.01.06以后的jar包,HTML5插件v2.7以后的版本支持表单body为绝对布局的重布局和保留布局属性。

2.示例编辑

模板在PC端显示的布局如下图:


2.1保留布局

设置手机不重布局时,手机端按照pc端的布局方式显示,设置方式如下图:

效果如下图:


2.2手机重布局

设置手机重布局时,手机上面流式布局展现,即一行一个组件这种情况,设置方式如下图:

注:默认重布局

效果如下图:

2.3图表组件高度自适应

原来app中表单重布局显示时,图表的高度是固定的,这个时候很多样式的报表效果就无法达到。IOS 8.3.1之后的版本或者安卓8.2.1之后的版本的app中图表块的高度将不是固定的,我们内置了一套图表高度的自适应逻辑,具体逻辑看3.1,根据设计的尺寸自动适应,如下图:


222

3.具体逻辑编辑

 
3.1手机上设置重布局

 手机上设置重布局时,组件缩放属性不影响组件的显示

a.手机重布局时,一行一个组件

b.手机重布局时,文本、数字、下拉框、下拉复选框、日期这些控件,固定高度显示

c.手机重布局时,报表块主体内容的高度根据数据自适应,没有最小高度,有最大高度限制,可以通过开关控制是否启用报表最大高度限制,且

最大高度可以自定义。

d.手机重布局时,图表组件自适应逻辑如下:

# 如果原始宽度小于等于手机宽度,则等比例放大到宽度充满

# 如果原始宽度大于手机宽度:

    图表宽度>高度,则以面积相等为原则,宽度压缩充满,有最大高度限制

    图表宽度<高度,则宽高比缩放


3.2手机上采用原布局

手机上采用原布局时,根据表单主体的组件缩放属性采用不同策略

a.手机采用原布局,表单主体组件缩放属性设置为双向自适应

   # 组件的宽高分别按照显示区域的宽高进行分配

   # 分配后,对于文本、数字、下拉框、下拉复选框、日期这些控件,控件高度固定,如果控件高度<组件高度,则多余部分为空白;如果控件

高度>组件高度,则控件显示部分(该情况时需用户在设计器中调整高度)


b.手机采用原布局,表单主体组件缩放属性设置为横向自适应

b.1、除了一行上只有一个报表块以外,例如左右有好几个组件等,组件按照设计宽高比进行自适应

b.2、对于文本、数字、下拉框、下拉复选框、日期这些控件,控件高度固定,如果控件高度<组件高度,则多余部分为空白;如果控件高度>组

件高度,则控件显示部分(该情况时需用户在设计器中调整高度)

b.3、当一个报表块占一行的时候,按照 3.1-d 的逻辑自适应显示

b.4、报表组件内部报表高度还是会受设置的报表块最大高度限制影响