基于FlexBox的页面布局方法、装置及电子设备与流程

基于flexbox的页面布局方法、装置及电子设备
技术领域
1.本发明实施例涉及计算机技术领域，尤其涉及一种基于flexbox的页面布局方法、装置及电子设备。


背景技术：

2.现有技术中，页面布局往往通过手动方式完成，手动布局即通过设置视图x坐标、y坐标、宽度值及高度值来实现定位，且需要进行繁碎的计算，布局效率低。


技术实现要素：

3.本发明实施例提供一种基于flexbox的页面布局方法、装置及电子设备，以解决现有的页面布局步骤繁多，布局效率低的问题。
4.为了解决上述技术问题，本发明是这样实现的：第一方面，本发明实施例提供了一种基于flexbox的页面布局方法，包括：接收到用户通过交互端发送的扩展指令，所述扩展指令用于指示现有页面中的被扩展页面；对所述被扩展页面进行扩展，得到扩展层；所述扩展层与所述被扩展页面之间的布局信息相同；接收到用户通过所述交互端发送的视图添加指令，所述视图添加指令包括待添加视图以及待添加视图的布局属性；根据所述待添加视图的布局属性进行布局计算，并根据所述布局计算的计算结果将所述待添加视图添加至所述扩展层。
5.可选地，根据所述待添加视图的布局属性进行布局计算，并根据所述布局计算的计算结果将所述待添加视图添加至所述扩展层，包括：检测所述扩展层是否存在添加完成的视图；若所述检测的检测结果为所述扩展层存在所述添加完成的视图，获取所述扩展层上最近添加的所述添加完成的视图的布局属性；根据所述待添加视图的布局属性以及最近添加的所述添加完成的视图的布局属性进行所述布局计算，并根据所述布局计算的计算结果将所述待添加视图添加至所述扩展层；若所述检测的检测结果为所述扩展层不存在所述添加完成的视图，根据所述待添加视图的布局属性进行布局计算，并根据所述布局计算的计算结果将所述待添加视图添加至所述扩展层。
6.可选地，所述待添加视图的布局属性包括与后一视图之间的间距值；根据所述待添加视图的布局属性以及最近添加的所述添加完成的视图的布局属性进行所述布局计算，包括：根据最近添加的所述添加完成的视图的布局属性，计算得到最近添加的所述添加
完成的视图的最大横坐标的坐标值，将所述最大横坐标的坐标值与所述与后一视图之间的间距值相加，得到所述待添加视图的布局位置的横坐标的坐标值。
7.可选地，所述待添加视图的布局属性包括以下至少一项：宽度值、高度值、对齐方式、与后一视图之间的间距值。
8.可选地，根据所述待添加视图的布局属性进行布局计算，包括：根据所述待添加视图的布局属性，采用layout布局方法进行所述布局计算。
9.可选地，根据所述待添加视图的布局属性，采用layout布局方法进行所述布局计算，包括：检验所述待添加视图是否包含嵌套视图；若所述检验的检验结果为所述待添加视图包含所述嵌套视图，采用深度优先遍历方式对所述待添加视图进行遍历得到所述待添加视图中全部的所述嵌套视图；根据所述嵌套视图的布局属性，采用layout布局方法进行所述布局计算，并根据所述布局计算的计算结果将所述嵌套视图添加至所述扩展层。
10.可选地，应用于ios系统，采用layout布局方法进行所述布局计算，包括：检测ios系统中的runloop执行情况；根据所述runloop执行情况，将所述layout布局方法的执行优先级设置为高于ios系统的渲染优先级。
11.第二方面，本发明实施例提供了一种基于flexbox的页面布局装置，包括：接收模块，用于接收到用户通过交互端发送的扩展指令，所述扩展指令用于指示现有页面中的被扩展页面；对所述被扩展页面进行扩展，得到扩展层；所述扩展层与所述被扩展页面之间的布局信息相同；执行模块，用于接收到用户通过所述交互端发送的视图添加指令，所述视图添加指令包括待添加视图以及待添加视图的布局属性；所述执行模块，还用于根据所述待添加视图的布局属性进行布局计算，并根据所述布局计算的计算结果将所述待添加视图添加至所述扩展层。
12.第三方面，本发明实施例提供了一种电子设备，包括处理器，存储器及存储在所述存储器上并可在所述处理器上运行的程序或指令，所述程序或指令被所述处理器执行时实现如第一方面中任一项所述的基于flexbox的页面布局方法中的步骤。
13.第四方面，本发明实施例提供了一种可读存储介质，所述可读存储介质上存储程序或指令，所述程序或指令被处理器执行时实现如第一方面中任一项所述的基于flexbox的页面布局方法中的步骤。
14.在本发明实施例中，通过接收到用户通过交互端发送的扩展指令，对被扩展页面进行扩展，得到扩展层；避免了在新生成页面时需要重新定义新生成页面的布局信息，简化了新生成页面的步骤，提高了生成效率。并且，通过接收到用户通过交互端发送的视图添加指令，视图添加指令包括待添加视图以及待添加视图的布局属性；根据待添加视图的布局
属性进行布局计算，并根据布局计算的计算结果将待添加视图添加至扩展层，避免了手动设置视图x坐标、y坐标、宽度值及高度值来实现定位，需要繁碎计算的问题，本发明实施例视图布局效率高。
附图说明
15.通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：图1为本发明实施例基于flexbox的页面布局方法的流程示意图之一；图2为本发明实施例基于flexbox的页面布局方法的流程示意图之二；图3为本发明实施例基于flexbox的页面布局方法的流程示意图之三；图4为嵌套视图的布局示意图；图5为检验嵌套视图的流程示意图；图6为本发明实施例基于flexbox的页面布局方法的流程示意图之四；图7为本发明实施例基于flexbox的页面布局装置的原理框图；图8为本发明实施例电子设备的原理框图。
具体实施方式
16.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
17.flexbox，（通常称为灵活框模块）被设计为一维布局模型，并且是一种可以在界面中的项目之间提供空间分布并具有强大的对齐功能的方法。当将flexbox描述为一维时，是指flexbox一次处理一个维度中的布局-无论是行还是列。flexbox的两个轴：主轴和横轴。
18.主轴：主轴由flex-direction定义，具有四个可能的值：row；row-reverse；column；column-reverse。横轴：交叉轴垂直于主轴。
19.本发明实施例提供了一种基于flexbox的页面布局方法，参见图1所示，图1为本发明实施例基于flexbox的页面布局方法的流程示意图之一，包括：步骤11：接收到用户通过交互端发送的扩展指令，扩展指令用于指示现有页面中的被扩展页面；对被扩展页面进行扩展，得到扩展层；扩展层与被扩展页面之间的布局信息相同；步骤12：接收到用户通过交互端发送的视图添加指令，视图添加指令包括待添加视图以及待添加视图的布局属性；步骤13：根据待添加视图的布局属性进行布局计算，并根据布局计算的计算结果将待添加视图添加至扩展层。
20.本发明实施例中，现有页面为具有一组子视图的父视图。该父视图通过flexbox布局将这组子视图统一管理起来。步骤11中，扩展指令用于指示现有页面中的被扩展页面，即扩展指令用于指示一组子视图中的一子视图或至少两子视图为被扩展页面。
21.步骤11中，对被扩展页面进行扩展，得到扩展层；示例性的，在ios系统下，通过uiview的分类扩展一个堆栈stack属性，通过runtime给它生成关联对象，这样stack就承载这个view所有的布局信息，而无需要手动创建一个stackview盖在这个view上面，同时这个stack会根据view当前的frame大小生成对应的大小的stack。
22.uistackview是基于autolayout的一种管理多个子视图的控件，uistackview提供了一个高效的接口用于平铺一行或一列的视图组合。对于嵌入到stackview的视图，不用再添加自动布局的约束了。stackview管理这些子视图的布局，并帮你自动布局约束。
23.autolayout布局对程序员更友好，可以通过约束，指定各子视图之间的关系进行快速的布局，比如：上侧间距top、左侧间距left、下侧间距bottom、右侧间距right、宽度width、高度height，是一种相对布局。但是由于autolayout需要将所有约束通过求解线性方程组来计算出frame值，比较消耗cpu资源，特别是在比较复杂页面渲染的时候不够流畅，可能要考虑将autolayout改成用frame直接布局。
24.步骤13：根据待添加视图的布局属性进行布局计算，并根据布局计算的计算结果将待添加视图添加至扩展层。示例性的，在ios系统下，创建一个水平方向布局的horstack，依次添加a，b，c视图，分别给它们设置好布局属性，调用layout方法进行布局计算。根据布局计算结果进行布局过程中，维护一个变量x=0，用于记录当前水平的最大位置。计算a的frame值后，更新x值为a的最右边，那么在计算b的frame值时，x为b的最左边位置，计算b的frame值后，再更新x值，如果中间有space值，则x=x+space。这样一轮循环以后，a，b，c的frame值都已经计算好了。
25.本发明实施例中，根据布局计算的计算结果将待添加视图添加至扩展层，包括：当待添加视图的数量为至少两个的情况下，先保存待添加视图的布局属性，所有子视图布局完成之后，再执行layout方法更新所有子视图，以将所有被存储布局属性的待添加视图存储至扩展层。
26.在本发明实施例中，通过接收到用户通过交互端发送的扩展指令，对被扩展页面进行扩展，得到扩展层；避免了在新生成页面时需要重新定义新生成页面的布局信息，简化了新生成页面的步骤，提高了生成效率。并且，通过接收到用户通过交互端发送的视图添加指令，视图添加指令包括待添加视图以及待添加视图的布局属性；根据待添加视图的布局属性进行布局计算，并根据布局计算的计算结果将待添加视图添加至扩展层，避免了手动设置视图x坐标、y坐标、宽度值及高度值来实现定位，需要繁碎计算的问题，本发明实施例视图布局效率高。
27.本发明的一些实施例中，可选地，参见图2所示，图2为本发明实施例基于flexbox的页面布局方法的流程示意图之二；根据待添加视图的布局属性进行布局计算，并根据布局计算的计算结果将待添加视图添加至扩展层，包括：步骤21：检测扩展层是否存在添加完成的视图；步骤22：若检测的检测结果为扩展层存在添加完成的视图，获取扩展层上最近添加的添加完成的视图的布局属性；根据待添加视图的布局属性以及最近添加的添加完成的视图的布局属性进行布局计算，并根据布局计算的计算结果将待添加视图添加至扩展层；步骤23：若检测的检测结果为扩展层不存在添加完成的视图，根据待添加视图的布局属性进行布局计算，并根据布局计算的计算结果将待添加视图添加至扩展层。
28.示例性的，根据布局计算结果进行布局过程中，维护一个变量x=0，用于记录当前水平的最大位置。若检测的检测结果为扩展层存在添加完成的待添加视图，则x不是初始变量，而是已经被更新过的变量，即当前变量x不为0。比如已经完成a的布局，此时，x值为a的最右边，那么在计算b的frame值时，x为b的最左边位置；计算b的frame值后，再更新x值，如果中间有space值，则x=x+space。这样一轮循环以后，a，b，c的frame值都已经计算好了。
29.本发明的一些实施例中，可选地，待添加视图的布局属性包括与后一视图之间的间距值；根据待添加视图的布局属性以及最近添加的添加完成的视图的布局属性进行布局计算，包括：根据最近添加的所述添加完成的视图的布局属性，计算得到最近添加的所述添加完成的视图的最大横坐标的坐标值，将所述最大横坐标的坐标值与所述与后一视图之间的间距值相加，得到所述待添加视图的布局位置的横坐标的坐标值。
30.本发明的一些实施例中，可选地，待添加视图的布局属性包括以下至少一项：宽度值、高度值、对齐方式、与后一视图之间的间距值。
31.示例性的，在ios系统下，stack可设置的布局属性有width、height、multipliedby（相对于父视图的大小）、space（跟后一个视图之间的间距）、flex、alignment（对齐方式）、hidden（隐藏后，后面视图自动布局）。
32.本发明的一些实施例中，可选地，根据待添加视图的布局属性进行布局计算，包括：根据待添加视图的布局属性，采用layout布局方法进行布局计算。
33.本发明的一些实施例中，可选地，参见图3所示，图3为本发明实施例基于flexbox的页面布局方法的流程示意图之三，根据待添加视图的布局属性，采用layout布局方法进行布局计算，包括：步骤31：检验待添加视图是否包含嵌套视图；步骤32：若检验的检验结果为待添加视图包含嵌套视图，采用深度优先遍历方式对待添加视图进行遍历得到待添加视图中全部的嵌套视图；步骤33：根据嵌套视图的布局属性，采用layout布局方法进行布局计算，并根据布局计算的计算结果将嵌套视图添加至扩展层。
34.深度优先遍历，又称深度优先搜索，是一种在开发爬虫早期使用较多的方法。它的目的是要达到被搜索结构的叶结点(即那些不包含任何超链的html文件)。在一个html文件中，当一个超链被选择后，被链接的html文件将执行深度优先搜索，即在搜索其余的超链结果之前必须先完整地搜索单独的一条链。深度优先搜索沿着html文件上的超链走到不能再深入为止，然后返回到某一个html文件，再继续选择该html文件中的其他超链。当不再有其他超链可选择时，说明搜索已经结束。
35.深度优先搜索属于图算法的一种，英文缩写为dfs即depth first search。其过程简要来说是对每一个可能的分支路径深入到不能再深入为止，而且每个节点只能访问一次。
36.本实施例中，嵌套视图即为待添加视图本身并不是单一的视图，而是具体关联了一组或至少两组嵌套视图，嵌套视图的布局属性可以与待添加视图相同，也可以与不相同。
37.示例性的，参见图4所示，图4为嵌套视图的布局示意图；参见图5所示，图5为检验
嵌套视图的流程示意图；待添加视图a为嵌套视图，即a包含着一组视图：d、e、f；并且待添加视图a为一个垂直方向verstack，即d、e、f三者为纵向布局。计算a之前，会进行类型判断，如果是stack类型，那么就执行a的layout方法。在view的layout方法里调用了a的layout方法，此时，通过深度优先遍历来解决嵌套stackview的计算问题，对待添加视图a进行遍历得到待添加视图a中全部的嵌套视图d、e、f；根据嵌套视图d、e、f的布局属性，采用layout布局方法进行布局计算，并根据布局计算的计算结果将嵌套视d、e、f图添加至扩展层。等a的layout执行完成之后，a的frame大小也就确定了，接下来依次计算b、c的frame。其中，待添加视图b为嵌套视图，即b包含着一组视图：g、h，i；待添加视图b为一个水平方向verstack，即g、h，i三者为横向布局。
38.本发明的一些实施例中，可选地，应用于ios系统，参见图6所示，图6为本发明实施例基于flexbox的页面布局方法的流程示意图之四，采用layout布局方法进行布局计算，包括：步骤41：检测ios系统中的runloop执行情况；步骤42：根据runloop执行情况，将layout布局方法的执行优先级设置为高于ios系统的渲染优先级。
39.示例性的，ios系统uikit进行视图渲染和刷新时，并不是每次计算得到frame值就立即进行渲染的，而是会把多次修改打包起来，一次性进行渲染，这一次时间的间隔，就是一次runloop的循环，app启动的时候，系统会注册监听runloop的kcfrunloopbeforewaiting和kcfrunloopexit。在这两个时机，会通知系统进行渲染。
40.本发明实施例中，注册监听kcfrunloopbeforewaiting和kcfrunloopexit，但是优先级比系统渲染要高，在系统进行绘制之前执行layout方法，将所有stackview里的视图frame值计算好，这样在一次runloop周期之内，stackview自动更新了它们。
41.本发明的一些实施例中，可选地，stackview还需要增加一个属性isneedlayout来标记是否需要更新，如果stackview内的属性发生过变化，那么isneedlayout=true，更新完成后isneedlayout=false，isneedlayout=false时，监听runloop回调并不会再执行layout了。这个地方的标记实际上是相当于系统view的setneedslayout，而stackview的layout方法相当于view的layoutifneeded方法。因此通过了解ios渲染原理，实现了类似系统控件的功能。
42.本发明实施例提供了一种基于flexbox的页面布局装置，参见图7所示，图7为本发明实施例基于flexbox的页面布局装置的原理框图，基于flexbox的页面布局装置70包括：接收模块71，用于接收到用户通过交互端发送的扩展指令，扩展指令用于指示现有页面中的被扩展页面；对被扩展页面进行扩展，得到扩展层；扩展层与被扩展页面之间的布局信息相同；执行模块72，用于接收到用户通过交互端发送的视图添加指令，视图添加指令包括待添加视图以及待添加视图的布局属性；执行模块72，还用于根据待添加视图的布局属性进行布局计算，并根据布局计算的计算结果将待添加视图添加至扩展层。
43.本发明的一些实施例中，可选地，执行模块72，还用于检测所述扩展层是否存在添加完成的视图；
执行模块72，还用于若所述检测的检测结果为所述扩展层存在所述添加完成的视图，获取所述扩展层上最近添加的所述添加完成的视图的布局属性；根据所述待添加视图的布局属性以及最近添加的所述添加完成的视图的布局属性进行所述布局计算，并根据所述布局计算的计算结果将所述待添加视图添加至所述扩展层；执行模块72，还用于若所述检测的检测结果为所述扩展层不存在所述添加完成的视图，根据所述待添加视图的布局属性进行布局计算，并根据所述布局计算的计算结果将所述待添加视图添加至所述扩展层。
44.本发明的一些实施例中，可选地，所述待添加视图的布局属性包括与后一视图之间的间距值；执行模块72，还用于根据最近添加的所述添加完成的视图的布局属性，计算得到最近添加的所述添加完成的视图的最大横坐标的坐标值，将所述最大横坐标的坐标值与所述与后一视图之间的间距值相加，得到所述待添加视图的布局位置的横坐标的坐标值。
45.本发明的一些实施例中，可选地，执行模块72，还用于根据所述待添加视图的布局属性，采用layout布局方法进行所述布局计算。
46.本发明的一些实施例中，可选地，执行模块72，还用于检验所述待添加视图是否包含嵌套视图；执行模块72，还用于若所述检验的检验结果为所述待添加视图包含所述嵌套视图，采用深度优先遍历方式对所述待添加视图进行遍历得到所述待添加视图中全部的所述嵌套视图；执行模块72，还用于根据所述嵌套视图的布局属性，采用layout布局方法进行所述布局计算，并根据所述布局计算的计算结果将所述嵌套视图添加至所述扩展层。
47.本发明的一些实施例中，可选地，应用于ios系统，执行模块72，还用于检测ios系统中的runloop执行情况；执行模块72，还用于根据所述runloop执行情况，将所述layout布局方法的执行优先级设置为高于ios系统的渲染优先级。
48.本技术实施例提供的基于flexbox的页面布局装置能够实现图1至图6的方法实施例实现的各个过程，并达到相同的技术效果，为避免重复，这里不再赘述。
49.本发明实施例提供了一种电子设备80，参见图8所示，图8为本发明实施例电子设备80的原理框图，包括处理器81，存储器82及存储在存储器82上并可在处理器81上运行的程序或指令，程序或指令被处理器执行时实现本发明的任一项基于flexbox的页面布局方法中的步骤。
50.本发明实施例提供了一种可读存储介质，可读存储介质上存储程序或指令，程序或指令被处理器执行时实现如上述任一项的基于flexbox的页面布局方法的实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
51.其中，所述的可读存储介质，如只读存储器（read-only memory，简称rom）、随机存取存储器（random access memory，简称ram）、磁碟或者光盘等。
52.上面结合附图对本发明的实施例进行了描述，但是本发明并不局限于上述的具体
实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本发明的启示下，在不脱离本发明宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本发明的保护之内。