固定界面

1、实现方案分析

固定界面布局是以屏幕为最大展示区域，对屏幕进行网格化拆分，并添加元素的展示方式。固定界面布局采用弹性盒子模型对界面进行分隔，如下图

固定界面 - 图1

图中可以很清晰的从上到下划分为图标区域、表单区域、空白区域、底部文字区域四个部分。通过设定空白区域为弹性高度区域，可以很方便的使界面适配于任何分辨率。

注：通过滚动界面布局配合底部栏也可以实现类似布局，但如果再复杂一些。可以看出同样的界面可以由不同的布局方式实现，但每种布局方式有其更擅长的地方，选择合适的布局方案将会极大的减少开发难度。

固定界面方案中，如果加入了顶部或底部栏，由于内容区域被顶部栏和底部栏覆盖了部分区域，为了保证内容区域所有有效元素可见，需要在内容区域加入占位控件。滚动界面和固定界面的布局区别在于，滚动界面是按照从上到下可增长的方式进行布局，对高度没有限制，可以小于屏幕高度也可以高于屏幕高度，内容展示区域的高度随着内容增加而增加。固定界面布局是最大高度即为屏幕高度，所有元素放置于基于屏幕进行分隔的各个区域里面。

2、界面设计

2.1、新建界面并设定界面名称为fixed 固定界面 - 图2 2.2、在设计器中加入Page和纵向排布容器 固定界面 - 图3 2.3、在设计器中加入4个Box组件 固定界面 - 图4 2.4、调整Box的属性 固定界面 - 图5前两个元素我们设定宽度为100%，使其横向充满屏幕，设定其高度为80（默认为px)，使其纵向高80px。固定界面 - 图6最后一个元素我们设定宽度为100%，使其横向充满屏幕，设定其高度为20（默认为px)，使其纵向高20px。第三个元素，我们设定宽度为100%，使其横向充满屏幕，但纵向设定比率为1，使其纵向占满总高度减去另外三个BOX高度后的剩余高度。 2.5、保存界面设计并导出全部 固定界面 - 图7

3、代码分析

3.1、代码结构

通过设计器生成的代码包含三个文件fixed.html－包含布局框架的HTML代码fixed.css－包含布局框架中控件的个性化样式配置fixed.js－包含布局框架中控件的操作交互代码固定界面 - 图8

3.2、布局框架代码分析

在IDE中打开fixed.html文件，可以看到如下代码固定界面 - 图9上述代码中，可以看到我们在设计器中添加的页面、页面中固定区域控件和BOX控件。固定区域控件中，

是实际内容的承载容器，我们需要显示的内容最终都需要添加到其中。在固定区域中我们加入了4个BOX控件，其中第三个BOX控件我们通过class=”ub-f1”使其成为了一个高度弹性变化的BOX(ub-f1需要依赖其父元素中的ub<弹性盒子>和ub-ver<纵向排布>，才能起作用，具体参考后面界面元素弹性布局章节）。

3.3、布局框架样式分析

在设计界面时我们为控件定义了大小属性，我们打开fixed.css可以看到为控件设定的样式属性。固定界面 - 图10上述代码中通过控件的ID构建CSS样式类对象，对象中定义了width和height属性。都根据基础字体换算成了em。注：并不是所有高宽都会自动换算为em，例如边框宽度、边框圆角都是按照px进行计算