固定界面

1、实现方案分析

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

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

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

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

2、界面设计

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

3、代码分析

3.1、代码结构

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

3.2、布局框架代码分析

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

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

3.3、布局框架样式分析

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

还需要帮助吗? 联系我们
最新更新 8th Jul 2021