CN104267887B - 基于应用窗口尺寸参数的应用页面自适应排版显示方法 - Google Patents

Abstract

本发明提供了一种基于应用窗口尺寸参数的应用页面自适应排版显示方法，其通过在的应用程序中增设页面动态排版程序，应用程序的页面动态排版程序便能够根据应用窗口尺寸自适应地对页面数据进行调整排版并加以显示，能够在服务器端和应用程序端两方面帮助降低开发难度，减少开发和维护的工作量；并且，在后期的更新、升级、维护过程中如果需要更改页面动态排版程序针对不同类型终端设备的页面数据排版显示方式，也只需要对应的调整版块基础模板即可，使得应用程序的开发、维护更加简便；此外，该方法所具备的灵活性、信息完整性以及实时自适应性，也使得其能够适应各种桌面级终端设备和移动终端设备对应用程序页面数据排版显示功能的需求。

Description

基于应用窗口尺寸参数的应用页面自适应排版显示方法

技术领域

本发明涉及信息处理技术和互联网络应用技术领域，具体涉及一种基于应用窗口尺寸参数的应用页面自适应排版显示方法。

背景技术

在计算机互联网时代，桌面级终端设备是人们上网的主要应用工具。而随着3G通信网络的普及和4G通信网络时代的到来，除了使用桌面级终端设备上网之外，越来越多的人使用移动终端设备上网。同时，移动终端设备硬件技术的进步，推动着移动设备的处理性能正在追赶、甚至超越桌面级终端设备，同时随着3G通信网络的普及和4G通信网络时代的到来，网络通信速率不再成为移动终端设备应用推广的瓶颈，因此人们开始越来越来越多的使用移动终端设备上网，使得移动终端设备逐渐成为人们上网使用频率最高的终端设备。

但是，由于桌面级终端设备与移动终端设备的屏幕显示尺寸差异较大，同时不同种类的移动终端设备的屏幕显示尺寸也存在差异，因此当应用程序在通过其应用窗口显示页面数据时，由于应用窗口受到屏幕显示尺寸的限制，导致应用程序在不同终端设备上其应用窗口的显示范围也存在很大差异。同时，目前很多新闻、资讯、社交类应用客户端以及网页浏览器等应用程序，往往需要从服务器端获取页面数据进行信息显示，但对于不同种类的终端设备，页面数据显示的效果却大不相同。例如，如果一款应用程序在显示应用页面时，如果以在桌面级终端设备上的排版显示方式在移动终端设备上加以显示，由于屏幕显示尺寸比例上的差异，就会导致移动终端设备上页面数据中的图片、文字、音频、视频、按钮、链接、组件等各类型数据元素都被压缩得很小，甚至于存在部分内容根本看不清楚的情况。

于是，对于终端应用开发者而言不得不面对一个难题：如何才能让应用程序在屏幕显示尺寸不同的终端设备上呈现同样的应用页面呢？

在现有技术中，很多应用程序开发针对于此问题的解决方法是，在服务器中构建应用程序的页面数据时，针对不同的终端设备分别设计和提供不同的应用页面版本的页面数据，比如专门设计和提供一个桌面级设备版本、一个iPad版本、一个iPad mini版本、一个iPhone版本等；针对来自不同终端设备应用程序的页面数据获取请求，服务器发回对应版本的页面数据，终端设备获取页面数据后，直接解析得到页面数据中的各类型数据元素及其在页面数据中的原始排布顺序，在应用窗口中按原始排布顺序进行数据元素的显示。这样做固然保证了不同终端设备上应用程序的页面数据显示效果，但是由于需要开发的应用页面版本较多，不仅使得页面数据的开发工作量增加，并且后续也需要对页面数据各个应用页面版分别开展更新、升级、维护等工作，而且一个应用程序需要同时支持多个不同应用页面版本的页面数据入口，以保证应用程序能够在不同的终端设备中支持相应应用页面版本的页面数据接收和显示，这也会大大增加应用程序架构设计的复杂度，带来应用程序开发和维护成本增加的问题。这些因素导致应用程序端和服务器数据端两方面的开发和维护成本都大幅增加。

发明内容

针对现有技术中存在的上述不足，本发明的目的在于提供一种基于应用窗口尺寸参数的应用页面自适应排版显示方法，帮助降低开发难度，减少开发和维护的工作量，用以解决现有技术中针对终端设备应用程序的页面数据显示需要进行多版本开发而导致应用程序端和服务器数据端两方面的开发和维护成本较高的问题。

为实现上述目的，本发明采用的技术方案是：

基于应用窗口尺寸参数的应用页面自适应排版显示方法，由加载有应用程序的终端设备与服务器进行双向通信，调取应用程序从服务器获取页面数据进行显示；所述终端设备的应用程序中预设有页面动态排版程序，由页面动态排版程序根据当前应用窗口的尺寸参数创建相匹配的页面排版模板加载到应用窗口中，并将页面数据中各类型数据元素加载到应用窗口中的页面排版模板上加以排版显示。

上述基于应用窗口尺寸参数的应用页面自适应排版显示方法中，作为一种具体实施方案，该方法具体包括如下步骤：

1）终端设备的应用程序中的页面动态排版程序预设定有版块基础模板以及若干个应用窗口尺寸等级；所述版块基础模板中按照预设定规则将页面划分为若干个区块，每一个行区块中设有若干个版块；且每一个区块中的每一个版块均设定有列像素宽度值，并标记有版块所对应的应用窗口尺寸等级归属标识；所述版块的应用窗口尺寸等级归属标识用以指示相应版块在各个应用窗口尺寸等级下是否有效；

2）当终端设备调用应用程序向服务器发出页面数据获取请求时，页面动态排版程序获取当前应用窗口的尺寸参数，从而确定当前应用窗口尺寸所属的应用窗口尺寸等级；

3）页面动态排版程序调取预设定的版块基础模板，根据各个版块对应的应用窗口尺寸等级归属标识以及当前应用窗口尺寸所属的应用窗口尺寸等级，确定版块基础模板的各个区块中在当前应用窗口尺寸等级下有效的版块；

4）页面动态排版程序对版块基础模板的各个区块进行版块排版处理，并将排版后的版块基础模板作为当前应用窗口尺寸所匹配的页面排版模板；具体的版块排版处理方式为：对于每一个区块中在当前应用窗口尺寸等级下有效的各个版块逐行地进行排布，确保该区块中每一行所排布的各版块对应的列像素宽度值之和不超过当前应用窗口尺寸所占据的列像素宽度，若超过则换行排布；

5）终端设备的应用程序从服务器获取到页面数据后，解析得到页面数据中的各类型数据元素及其在页面数据中的原始排布顺序；

6）页面动态排版程序将当前应用窗口尺寸所匹配的页面排版模板加载到应用窗口中，并按照页面数据中各类型数据元素的原始排布顺序，将页面数据中的各类型数据元素依次加载到应用窗口中页面排版模板各个区块的各个版块中，实现对页面数据中各类型数据元素的排版处理，并加以显示；

7）页面动态排版程序实时监听应用程序的页面数据获取事件和应用窗口尺寸调整事件；当应用程序向服务器重新获取页面数据时，重新执行步骤2~6；当应用窗口尺寸发生调整时，页面动态排版程序重新获取当前应用窗口的尺寸参数，确定当前应用窗口尺寸所属的应用窗口尺寸等级，并重新执行步骤3、4和6。

上述基于应用窗口尺寸参数的应用页面自适应排版显示方法中，作为一种具体实施方案，所述页面动态排版程序获取的当前应用窗口的尺寸参数，至少包括应用窗口所占据的列像素宽度参数。

上述基于应用窗口尺寸参数的应用页面自适应排版显示方法中，作为一种具体实施方案，所述页面动态排版程序预设定的若干个应用窗口尺寸等级具体如下：

超小尺寸等级：应用窗口所占据的列像素小于768个像素点；

小尺寸等级：应用窗口所占据的列像素大于或等于768个像素点且小于992个像素点；

中等尺寸等级：应用窗口所占据的列像素大于或等于992个像素点且小于1200个像素点；

大尺寸等级：应用窗口所占据的列像素大于1200个像素点。

相比于现有技术，本发明具有以下有益效果：

1、本发明基于应用窗口尺寸参数的应用页面自适应排版显示方法，通过在的应用程序中增设页面动态排版程序，只需在服务器端设置一个版本的页面数据，应用程序的页面动态排版程序便能够根据应用窗口尺寸自适应地对页面数据进行调整排版并加以显示，能够在在服务器端和应用程序端两方面帮助降低开发难度，减少开发和维护的工作量，很好地解决了现有技术中针对终端设备应用程序的页面数据显示需要进行多版本开发而导致应用程序端和服务器数据端两方面的开发和维护成本较高的问题。

2、本发明基于应用窗口尺寸参数的应用页面自适应排版显示方法中，对页面排版模板的生成以及根据该页面排版模板对页面数据的排版显示，都依据预设定的版块基础模板和应用窗口尺寸等级而进行，因此在后期的更新、升级、维护过程中如果需要更改页面动态排版程序针对不同类型终端设备的页面数据排版显示方式，也只需要对应的调整版块基础模板即可，进一步地帮助减少了应用程序在开发和维护方面的工作量。

3、本发明的应用页面自适应排版显示方法，还能够很好地保证应用页面自适应排版显示的灵活性和信息完整性，并且能够实时的保持对应用窗口尺寸的自适应性，能够适应各种桌面级终端设备和移动终端设备对应用程序页面数据排版显示功能的需求。

附图说明

图1为本发明基于应用窗口尺寸参数的应用页面自适应排版显示方法的流程图。

具体实施方式

针对于现有技术中对终端设备应用程序的页面数据显示需要进行多版本开发，而导致应用程序端和服务器数据端两方面的开发和维护成本较高的问题，本发明提供了一种基于应用窗口尺寸参数的应用页面自适应排版显示方法。该应用页面自适应排版显示方法依然由加载有应用程序的终端设备与服务器进行双向通信，调取应用程序从服务器获取页面数据进行显示；但与现有技术所不同的是，在终端设备的应用程序中还预设有页面动态排版程序，由页面动态排版程序根据当前应用窗口的尺寸参数创建相匹配的页面排版模板加载到应用窗口中，并将页面数据中各类型数据元素加载到应用窗口中的页面排版模板上加以排版显示。

可以看到，本发明的应用页面自适应排版显示方法，通过在的应用程序中增设页面动态排版程序，只需在服务器端设置一个版本的页面数据，应用程序的页面动态排版程序便能够根据应用窗口尺寸自适应地对页面数据进行调整排版并加以显示。这样以来，在服务器端，针对于应用程序的页面数据开发，只需要构建一个统一版本的页面数据，不再划分多个版本，并且页面数据的更新、升级、维护等工作也只需要针对该统一版本进行，避免了页面数据前期开发工作量大、后期维护成本高的问题。同时，在应用程序端，也只需要设置统一版本页面数据的数据入口，不需要针对不同版本开发多个数据入口，避免了因数据入口需适应多版本导致应用程序架构设计复杂化的问题。从而，本发明基于应用窗口尺寸参数的应用页面自适应排版显示方法，很好地解决了现有技术中针对终端设备应用程序的页面数据显示需要进行多版本开发而导致应用程序端和服务器数据端两方面的开发和维护成本较高的问题。

具体而言，本发明基于应用窗口尺寸参数的应用页面自适应排版显示方法的流程如图1所示，该方法具体包括如下步骤：

1）终端设备的应用程序中的页面动态排版程序预设定有版块基础模板以及若干个应用窗口尺寸等级；所述版块基础模板中按照预设定规则将页面划分为若干个区块，每一个行区块中设有若干个版块；且每一个区块中的每一个版块均设定有列像素宽度值，并标记有版块所对应的应用窗口尺寸等级归属标识；所述版块的应用窗口尺寸等级归属标识用以指示相应版块在各个应用窗口尺寸等级下是否有效；

2）当终端设备调用应用程序向服务器发出页面数据获取请求时，页面动态排版程序获取当前应用窗口的尺寸参数，从而确定当前应用窗口尺寸所属的应用窗口尺寸等级；

3）页面动态排版程序调取预设定的版块基础模板，根据各个版块对应的应用窗口尺寸等级归属标识以及当前应用窗口尺寸所属的应用窗口尺寸等级，确定版块基础模板的各个区块中在当前应用窗口尺寸等级下有效的版块；

4）页面动态排版程序对版块基础模板的各个区块进行版块排版处理，并将排版后的版块基础模板作为当前应用窗口尺寸所匹配的页面排版模板；具体的版块排版处理方式为：对于每一个区块中在当前应用窗口尺寸等级下有效的各个版块逐行地进行排布，确保该区块中每一行所排布的各版块对应的列像素宽度值之和不超过当前应用窗口尺寸所占据的列像素宽度，若超过则换行排布；

5）终端设备的应用程序从服务器获取到页面数据后，解析得到页面数据中的各类型数据元素及其在页面数据中的原始排布顺序；

6）页面动态排版程序将当前应用窗口尺寸所匹配的页面排版模板加载到应用窗口中，并按照页面数据中各类型数据元素的原始排布顺序，将页面数据中的各类型数据元素依次加载到应用窗口中页面排版模板各个区块的各个版块中，实现对页面数据中各类型数据元素的排版处理，并加以显示；

7）页面动态排版程序实时监听应用程序的页面数据获取事件和应用窗口尺寸调整事件；当应用程序向服务器重新获取页面数据时，重新执行步骤2~6；当应用窗口尺寸发生调整时，页面动态排版程序重新获取当前应用窗口的尺寸参数，确定当前应用窗口尺寸所属的应用窗口尺寸等级，并重新执行步骤3、4和6。

通过上述流程可以看到，在终端设备上，应用程序中的页面动态排版程序通过预设定的版块基础模板以及若干个应用窗口尺寸等级，能够根据当前应用窗口尺寸所属的应用窗口尺寸等级自适应地调整版块基础模板的版块排版方式，生成当前应用窗口尺寸所匹配的页面排版模板，在获取和解析页面数据后，便加载当前应用窗口尺寸所匹配的页面排版模板进行各类型数据元素的排版和显示。因此，在应用程序的开发过程中，相比于现有技术而言，只需要增加关于页面动态排版程序的开发工作，并且一次开发的页面动态排版程序在各种屏幕显示尺寸不同的终端设备上都能适用，无需针对不同类型的终端设备分别单独开发页面动态排版程序，开发工作量小；即便在后期的更新、升级、维护过程中需要更改页面动态排版程序针对不同类型终端设备的页面数据排版显示方式，也只需要在版块基础模板中改动需要进行调整的行区块包含的列版块个数、或者改动需要进行调整的列版块的列像素宽度值、或者改动需要进行调整的列版块所对应的应用窗口尺寸等级归属标识即可，无需改动页面动态排版程序的其它排版控制部分；由此，进一步地帮助减少应用程序在开发和维护方面的工作量。

同时，在本发明的应用页面自适应排版显示方法中，由于版块基础模板中每一个区块中的每一个版块均设定有列像素宽度值，并标记有版块所对应的应用窗口尺寸等级归属标识，当前应用窗口尺寸所匹配的页面排版模板的生成以及根据该页面排版模板对页面数据的排版显示，都是以版块对应的应用窗口尺寸等级归属标识和列像素宽度值为依据而进行的，由此保证了应用页面自适应排版显示的灵活性和信息完整性。因为，在当前应用窗口尺寸所匹配的页面排版模板的生成过程中，需要先根据应用窗口尺寸等级归属标识确定版块基础模板的各个区块中在当前应用窗口尺寸等级下有效的版块，使得每个区块中的有效版块排布形式具备了一定的灵活性。例如，对于应用页面中一个需要三个版块进行排版显示的区块，在版块基础模板中该区块则可以建立六个版块，其中三个版块设定的列像素宽度值较大，且标记的应用窗口尺寸等级指示其在较大的应用窗口尺寸下有效，而另外三个版块设定的列像素宽度值较小，且标记的应用窗口尺寸等级指示其在较小的应用窗口尺寸下有效；这样以来，在当前应用窗口尺寸较大的情况下，该区块中将会设定列像素宽度值较大的三个版块为有效并进行相应页面数据的排版显示，使得该区块中每个版块都具有较大的显示区域；而在当前应用窗口尺寸较小的情况下，该区块中则会设定列像素宽度值较小的三个版块为有效并进行相应页面数据的排版显示，相应缩小每个版块的显示区域。页面动态排版程序根据版块基础模板对页面数据排版的灵活性，也使得在前期开发过程中可以通过增强版块基础模板的多样性，来实现应用页面自适应排版显示的丰富性，同时可以帮助减少后续因排版显示的丰富性需求而对页面动态排版程序进行更新、升级的工作量。此外，在当前应用窗口尺寸所匹配的页面排版模板的生成过程中，还需要根据列像素宽度值对版块基础模板的各个区块中的有效版块进行逐行排布处理，即便对于屏幕显示尺寸较小的终端设备，由于其应用窗口尺寸较小，页面动态排版程序将对区块中的有效版块换行排布，而避免出现因版块排布宽度超出应用窗口尺寸所占据的列像素宽度导致部分版块无法显示的问题，确保区块中各版块的信息完整性；同时，由于区块中的每个版块设定的列像素宽度值也确保了版块自身具有一定的信息显示区域，避免了因应用窗口尺寸较小时将版块压缩而导致显示区域过小而无法有效显示页面数据的问题，确保了版块自身进行信息显示的完整性。

不仅如此，通过上述流程还可以看到，在本发明的应用页面自适应排版显示方法中，终端设备上应用程序的页面动态排版程序还会实时监听应用程序的页面数据获取事件和应用窗口尺寸调整事件，当应用程序向服务器重新获取页面数据时，或者应用窗口尺寸发生调整时，页面动态排版程序都会根据新的应用窗口尺寸重新生成相匹配的页面排版模板，重新完成对页面数据的排版和显示。这样便能够保证应用程序对于应用页面的排版显示能够实时的保持对应用窗口尺寸的自适应性。

作为具体实施而言，本发明基于应用窗口尺寸参数的应用页面自适应排版显示方法由于在页面排版模板的生成和对页面数据的排版显示过程中，都需要借助当前应用窗口所占据的列像素宽度作为依据，因此应用程序的页面动态排版程序在获取的当前应用窗口的尺寸参数时，至少应当包括获取应用窗口所占据的列像素宽度参数。同时，页面动态排版程序中若干个应用窗口尺寸等级的设定，也可以基于应用窗口所占据的列像素宽度来进行划分。例如，可以采用如下的应用窗口尺寸等级划分方式：

超小尺寸等级：应用窗口所占据的列像素小于768个像素点，用于针对屏幕显示尺寸较小的手机等移动终端设备；

小尺寸等级：应用窗口所占据的列像素大于或等于768个像素点且小于992个像素点，用于针对屏幕显示尺寸较大的手机、或者屏幕显示尺寸较小平板电脑的等移动终端设备；

中等尺寸等级：应用窗口所占据的列像素大于或等于992个像素点且小于1200个像素点，用于针对屏幕显示尺寸较大的平板电脑等移动终端设备、或者屏幕显示尺寸较小的桌面级终端设备；

大尺寸等级：应用窗口所占据的列像素大于1200个像素点，用于针对屏幕显示尺寸较大的桌面级终端设备。

这样的应用窗口尺寸等级划分方式，能够覆盖目前市场上主流的移动终端设备和桌面级终端设备的屏幕显示尺寸，并且比较符合移动终端设备和桌面级终端设备基于屏幕显示尺寸的细分规律及其对页面数据显示的排版需求。

综上所述，本发明基于应用窗口尺寸参数的应用页面自适应排版显示方法，通过在的应用程序中增设页面动态排版程序，只需在服务器端设置一个版本的页面数据，应用程序的页面动态排版程序便能够根据应用窗口尺寸自适应地对页面数据进行调整排版并加以显示，能够在在服务器端和应用程序端两方面帮助降低开发难度，减少开发和维护的工作量，很好地解决了现有技术中针对终端设备应用程序的页面数据显示需要进行多版本开发而导致应用程序端和服务器数据端两方面的开发和维护成本较高的问题。并且，该方法中对页面排版模板的生成以及根据该页面排版模板对页面数据的排版显示，都依据预设定的版块基础模板和应用窗口尺寸等级而进行，因此在后期的更新、升级、维护过程中如果需要更改页面动态排版程序针对不同类型终端设备的页面数据排版显示方式，也只需要对应的调整版块基础模板即可，进一步地帮助减少了应用程序在开发和维护方面的工作量。此外，本发明的应用页面自适应排版显示方法，还能够很好地保证应用页面自适应排版显示的灵活性和信息完整性，并且能够实时的保持对应用窗口尺寸的自适应性，能够适应各种桌面级终端设备和移动终端设备对应用程序页面数据排版显示功能的需求。

最后说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或者等同替换，而不脱离本发明技术方案的宗旨和范围，其均应涵盖在本发明的权利要求范围当中。

Claims (3)

1.基于应用窗口尺寸参数的应用页面自适应排版显示方法，由加载有应用程序的终端设备与服务器进行双向通信，调取应用程序从服务器获取页面数据进行显示；其特征在于，所述终端设备的应用程序中预设有页面动态排版程序，由页面动态排版程序根据当前应用窗口的尺寸参数创建相匹配的页面排版模板加载到应用窗口中，并将页面数据中各类型数据元素加载到应用窗口中的页面排版模板上加以排版显示；

该方法具体包括如下步骤：

1）终端设备的应用程序中的页面动态排版程序预设定有版块基础模板以及若干个应用窗口尺寸等级；所述版块基础模板中按照预设定规则将页面划分为若干个区块，每一个行区块中设有若干个版块；且每一个区块中的每一个版块均设定有列像素宽度值，并标记有版块所对应的应用窗口尺寸等级归属标识；所述版块的应用窗口尺寸等级归属标识用以指示相应版块在各个应用窗口尺寸等级下是否有效；

2）当终端设备调用应用程序向服务器发出页面数据获取请求时，页面动态排版程序获取当前应用窗口的尺寸参数，从而确定当前应用窗口尺寸所属的应用窗口尺寸等级；

3）页面动态排版程序调取预设定的版块基础模板，根据各个版块对应的应用窗口尺寸等级归属标识以及当前应用窗口尺寸所属的应用窗口尺寸等级，确定版块基础模板的各个区块中在当前应用窗口尺寸等级下有效的版块；

4）页面动态排版程序对版块基础模板的各个区块进行版块排版处理，并将排版后的版块基础模板作为当前应用窗口尺寸所匹配的页面排版模板；具体的版块排版处理方式为：对于每一个区块中在当前应用窗口尺寸等级下有效的各个版块逐行地进行排布，确保该区块中每一行所排布的各版块对应的列像素宽度值之和不超过当前应用窗口尺寸所占据的列像素宽度，若超过则换行排布；

5）终端设备的应用程序从服务器获取到页面数据后，解析得到页面数据中的各类型数据元素及其在页面数据中的原始排布顺序；

6）页面动态排版程序将当前应用窗口尺寸所匹配的页面排版模板加载到应用窗口中，并按照页面数据中各类型数据元素的原始排布顺序，将页面数据中的各类型数据元素依次加载到应用窗口中页面排版模板各个区块的各个版块中，实现对页面数据中各类型数据元素的排版处理，并加以显示；

7）页面动态排版程序实时监听应用程序的页面数据获取事件和应用窗口尺寸调整事件；当应用程序向服务器重新获取页面数据时，重新执行步骤2~6；当应用窗口尺寸发生调整时，页面动态排版程序重新获取当前应用窗口的尺寸参数，确定当前应用窗口尺寸所属的应用窗口尺寸等级，并重新执行步骤3、4和6。

2.根据权利要求1所述基于应用窗口尺寸参数的应用页面自适应排版显示方法，其特征在于，所述页面动态排版程序获取的当前应用窗口的尺寸参数，至少包括应用窗口所占据的列像素宽度参数。

3.根据权利要求2所述基于应用窗口尺寸参数的应用页面自适应排版显示方法，其特征在于，所述页面动态排版程序预设定的若干个应用窗口尺寸等级具体如下：

超小尺寸等级：应用窗口所占据的列像素小于768个像素点；

小尺寸等级：应用窗口所占据的列像素大于或等于768个像素点且小于992个像素点；

中等尺寸等级：应用窗口所占据的列像素大于或等于992个像素点且小于1200个像素点；

大尺寸等级：应用窗口所占据的列像素大于1200个像素点。