CN107273081B - 对多个组件进行显示的方法、介质、装置和计算设备 - Google Patents

对多个组件进行显示的方法、介质、装置和计算设备 Download PDF

Info

Publication number
CN107273081B
CN107273081B CN201710496969.6A CN201710496969A CN107273081B CN 107273081 B CN107273081 B CN 107273081B CN 201710496969 A CN201710496969 A CN 201710496969A CN 107273081 B CN107273081 B CN 107273081B
Authority
CN
China
Prior art keywords
components
component
display
height
internal
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201710496969.6A
Other languages
English (en)
Other versions
CN107273081A (zh
Inventor
王玮
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Netease Hangzhou Network Co Ltd
Original Assignee
Netease Hangzhou Network Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Netease Hangzhou Network Co Ltd filed Critical Netease Hangzhou Network Co Ltd
Priority to CN201710496969.6A priority Critical patent/CN107273081B/zh
Publication of CN107273081A publication Critical patent/CN107273081A/zh
Application granted granted Critical
Publication of CN107273081B publication Critical patent/CN107273081B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
    • G06F3/1407—General aspects irrespective of display type, e.g. determination of decimal point position, display with fixed or driving decimal point, suppression of non-significant zeros
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0483—Interaction with page-structured environments, e.g. book metaphor

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Controls And Circuits For Display Device (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明的实施方式提供了一种对多个组件进行显示的方法。该方法包括，基于各组件的显示项目的外形数据和各组件的内部布局需求，确定各组件的内部约束条件，基于显示区域的尺寸和各组件之间的相对空间关系，确定各组件之间的外部约束条件，根据内部约束条件和外部约束条件，确定各组件的显示参数，以及根据显示参数，在显示区域中显示多个组件。通过内部约束条件和外部约束条件确定各组件的显示参数，本发明的方法可以自动地确定显示参数，从而显著降低了内容被截断，或者不同组件之间发生重叠的情况，并且减少了用户的操作成本，为用户带来了更好的体验。此外，本发明的实施方式提供了一种介质、装置和计算设备。

Description

对多个组件进行显示的方法、介质、装置和计算设备
技术领域
本发明的实施方式涉及计算机技术领域，更具体地，本发明的实施方式涉及对多个组件进行显示的方法、介质、装置和计算设备。
背景技术
本部分旨在为权利要求书中陈述的本发明的实施方式提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。
在人机交互过程中，相对于文字显示，图像显示具有更加直观的优势，从而被广泛使用。例如，对数据信息的展示，大量数据的阅读给用户带来困难。对此，目前很多数据处理应用程序都提供了对数据自动绘图的功能，所绘制的图表通常包括图例、图形等多个组件。
发明内容
但是，出于方便实现的原因，现有技术通常都采用固定区域的方法来绘制组件。然而，在某些情况下由于组件中内容的不可预知，有可能提前分配的固定空间不充足，导致内容被截断，或者不同组件之间发生重叠的问题，影响整体的美观性和可读性。
因此，在现有技术中，人工调整各组件显示参数是非常令人烦恼的过程。
为此，非常需要一种对多个组件进行显示的改进方法，以减轻用户人工调整组件显示参数所带来的负担。
在本上下文中，本发明的实施方式期望提供一种对显示区域中的多个组件进行显示的方法、介质、装置和计算设备。
在本发明实施方式的第一方面中，提供了一种方法，包括：基于各组件的显示项目的外形数据和各组件的内部布局需求，确定各组件的内部约束条件，基于所述显示区域的尺寸和各组件之间的相对空间关系，确定所述各组件之间的外部约束条件，根据所述内部约束条件和所述外部约束条件，确定所述各组件的显示参数，以及根据所述显示参数，在所述显示区域中显示所述多个组件。
在本发明的一个实施例中，该各组件的显示参数包括组件实际占用的宽度和高度，
其中，第i个组件的内部约束条件包括：
Wi＝Fwi(Wgi,Hgi)；
Hi＝Fhi(Wgi,Hgi)；
各组件之间显示参数的外部约束条件为：
Wgi＝Cwi(W,W1,W2,W3,…,Wn)；
Hgi＝Chi(H,H1,H2,H3,…,Hn)；
其中，n为组件的个数，i为小于或等于n的自然数，W/H为显示区域可用的总体宽度/高度,W1,W2,…,Wn和H1,H2,…,Hn分别为所述多个组件的实际占用的宽度和高度，Wg1,Wg2,…,Wgn和Hg1,Hg2,…Hgn分别为所述多个组件可用的最大宽度和高度，Fwi/Fhi分别为第i个组件自身布局器的宽度/高度分量，Cwi/Chi分别为第i个组件与其他组件之间的外部约束条件。
在本发明的另一实施例中，该组件的内部布局需求包括所述组件内部的元素数量和/或各元素尺寸的空间占用需求。
在本发明的又一个实施例中，该各组件之间的相对空间关系包括各组件之间的相对位置关系和/或相对尺寸关系。
在本发明实施方式的第二方面中，提供了一种介质，其上存储有可执行指令，所述指令被处理单元执行时使所述处理单元执行上述方法。
在本发明实施方式的第三方面中，提供了一种装置，包括：内部约束模块、外部约束模块、参数确定模块以及显示模块。内部约束模块用于基于各组件的显示项目的外形数据和各组件的内部布局需求，确定各组件的内部约束条件。外部约束模块用于基于所述显示区域的尺寸和各组件之间的相对空间关系，确定所述各组件之间的外部约束条件。参数确定模块用于根据所述内部约束条件和所述外部约束条件，确定所述各组件的显示参数。显示模块用于根据所述显示参数，在所述显示区域中显示所述多个组件。
在本发明的一个实施例中，该各组件的显示参数包括组件实际占用的宽度和高度，
其中，第i个组件的内部约束条件包括：
Wi＝Fwi(Wgi,Hgi)；
Hi＝Fhi(Wgi,Hgi)；
各组件之间显示参数的外部约束条件为：
Wgi＝Cwi(W,W1,W2,W3,…,Wn)；
Hgi＝Chi(H,H1,H2,H3,…,Hn)；
其中，n为组件的个数，i为小于或等于n的自然数，W/H为显示区域可用的总体宽度/高度,W1,W2,…,Wn和H1,H2,…,Hn分别为所述多个组件的实际占用的宽度和高度，Wg1,Wg2,…,Wgn和Hg1,Hg2,…Hgn分别为所述多个组件可用的最大宽度和高度，Fwi/Fhi分别为第i个组件自身布局器的宽度/高度分量，Cwi/Chi分别为第i个组件与其他组件之间的外部约束条件。
在本发明的另一实施例中，该组件的内部布局需求包括所述组件内部的元素数量和/或各元素尺寸的空间占用需求。
在本发明的又一个实施例中，该各组件之间的相对空间关系包括各组件之间的相对位置关系和/或相对尺寸关系。
在本发明实施方式的第四方面中，提供了一种计算设备，包括处理单元以及存储单元。该存储单元上存储有可执行指令，所述指令被所述处理单元执行时使所述处理单元执行上述方法。
根据本发明实施方式的内部约束条件和所述外部约束条件确定显示参数，可以合理地自动确定显示参数，而无需人工调整，从而显著地降低了导致内容被截断，或者不同组件之间发生重叠的情况，并且减少了用户的操作成本，为用户带来了更好的体验。
附图说明
通过参考附图阅读下文的详细描述，本发明示例性实施方式的上述以及其他目的、特征和优点将变得易于理解。在附图中，以示例性而非限制性的方式示出了本发明的若干实施方式，其中：
图1示意性地示出了根据本发明实施例的包括多组件的显示图像；
图2示意性地示出了根据本发明实施例的对多个组件进行显示的方法；
图3示意性地示出了根据本发明实施例的对多个组件进行显示的介质；
图4示意性地示出了根据本发明实施例的对多个组件进行显示的装置；以及
图5示意性地示出了根据本发明实施例的对多个组件进行显示的计算设备。
在附图中，相同或对应的标号表示相同或对应的部分。
具体实施方式
下面将参考若干示例性实施方式来描述本发明的原理和精神。应当理解，给出这些实施方式仅仅是为了使本领域技术人员能够更好地理解进而实现本发明，而并非以任何方式限制本发明的范围。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。
本领域技术人员知道，本发明的实施方式可以实现为一种系统、装置、设备、方法或计算机程序产品。因此，本公开可以具体实现为以下形式，即：完全的硬件、完全的软件(包括固件、驻留软件、微代码等)，或者硬件和软件结合的形式。
根据本发明的实施方式，提出了一种对多个组件进行显示的方法、介质、装置和计算设备。
在本文中，需要理解的是，所涉及的像素表示组成数字图像的基本单元。所涉及的尺寸、宽度、高度是以相对像素关系来确定的。此外，附图中的任何元素数量均用于示例而非限制，以及任何命名都仅用于区分，而不具有任何限制含义。
下面参考本发明的若干代表性实施方式，详细阐释本发明的原理和精神。
发明概述
本发明人发现，在多组件图像的显示过程中，各个组件的布局需要考虑包括各组件的显示项目的外形数据和各组件的内部布局需求在内的内部约束条件，以及包括显示区域的尺寸和各组件之间的相对空间关系在内的各组件之间的外部约束条件，才能合理地确定每个组件的显示参数，实现多组件图像的合理布局。
在介绍了本发明的基本原理之后，下面具体介绍本发明的各种非限制性实施方式。
应用场景总览
首先参考图1，图1示意性地示出了根据本发明实施例的多组件图像。
如图1所示，该图像包括多个组件110、120和130。组件可以用于显示不同的对象。例如，组件110可用于显示图片，组件120可以用于显示多组文字、数字或符号等文本内容，如图1中的附图标记121、122、123 和124所示，组件130也可以用于显示多组文本内容，如图1中的附图标记131、132和133所示。
然而，若以现有技术中通常采用的固定区域的方式设置每个组件的显示参数，例如组件的尺寸等，则可能出现影响整体美观性和可读性的情况。例如，当组件130的宽度固定时，若其内部的一条文本信息131过长且不可换行，则会出现由于组件130的空间不充足，导致文本信息131的内容被截断的情况。又如，在组件120的宽度和高度尺寸固定的情况下，当组件120内部的不同文本信息121、122、123或124的内容较长时，不同文本信息121、122、123或124之间会发生重叠，影响整体的美观性和可读性。为了看到完整的组件内容，用户不得不手动调整组件的显示参数。
应当理解，图1中的组件和文本内容的数目和多个组件的相对空间关系仅仅是示意性的。根据实现需要，可以具有任意数目的组件和文本内容，以及其他形式的相对空间关系。
示例性方法
下面结合图1的应用场景，参考图2来描述根据本发明示例性实施方式的用于对显示区域中的多个组件进行显示的方法。需要注意的是，上述应用场景仅是为了便于理解本发明的精神和原理而示出，本发明的实施方式在此方面不受任何限制。相反，本发明的实施方式可以应用于适用的任何场景。
如图2所示，该方法包括操作S210～S240。
在操作S210，基于各组件的显示项目的外形数据和各组件的内部布局需求，确定各组件的内部约束条件。
在操作S220，基于所述显示区域的尺寸和各组件之间的相对空间关系，确定所述各组件之间的外部约束条件。
然后，在操作S230，根据所述内部约束条件和所述外部约束条件，确定所述各组件的显示参数。
最后，在操作S240，根据所述显示参数，在所述显示区域中显示所述多个组件。
该方法考虑了包括各组件的显示项目的外形数据和各组件的内部布局需求在内的内部约束条件，以及包括显示区域的尺寸和各组件之间的相对空间关系在内的各组件之间的外部约束条件，从而合理地确定每个组件的显示参数，实现多组件图像的合理布局。
根据本发明示例性实施例，各组件的显示项目的外形数据包括表示组件的所显示出的形状等数据，例如矩形、椭圆形、箭头等。上述组件的形状可以持续地通过线条给出显示，也可以仅在某些特定情况下，例如选中该组件时，才进行显示。例如，某一组件可以不具有边框，而仅在被单击选中时，该组件周围以一虚线框作为边框显示。对于不同的外形数据，组件内部可用的空间也可以不相同。例如，矩形文本框的组件，一般会在该矩形的四个边的内部保留一定宽度的留白，以避免文字与所述矩形边框过近甚至相互影响。对于椭圆型文本框的组件，即使内部文字的不超过该组件的宽度和高度，也可能在某一角度上超过椭圆的边框，因此，对于同样面积的椭圆形组件，相对于矩形组件，其可用的空间较小。
根据本发明示例性实施例，各组件的内部布局需求包括所述组件内部的元素数量和/或各元素尺寸的空间占用需求。以图1所示意出的组件130 为例，对于组件130，其内部包括文本信息131、132和133，作为组件130 内部的元素。相应地，组件130内部的元素数量为3。元素尺寸的空间占用需求可以包括宽度需求和/或高度需求。例如，文本信息131为上述三个文本信息中长度最长的一个，在不允许换行的情况下，文本信息131的长度构成了组件130的一个宽度需求。而文本信息的数量构成了组件130的一个高度需求。
在操作S210，根据本发明示例性实施例，结合各组件的显示项目的外形数据和各组件的内部布局需求，即可确定各组件的内部约束条件。以组件120为例，根据其外形数据确定的内部可用空间的情况，例如组件上下各需要留白15像素，又根据其内部布局需求，内部元素的高度为70像素，由此可以确定出组件120的一个内部约束条件为，其高度为元素的高度70 像素加组件上下留白的高度30像素，即组件120的高度为100像素。
根据本发明示例性实施例，所述显示区域的尺寸包括用于显示多个组件的可用区域的尺寸。
根据本发明示例性实施例，各组件之间的相对空间关系包括各组件之间的相对位置关系和/或相对尺寸关系。例如，如图1所示的多个组件，其中，组件120与组件110相邻，位于组件110的下方，并与组件110的宽度相同，组件130与组件110相邻，位于组件110的左方，并与组件110 的高度相同。以上相对位置关系和相对尺寸关系即为图1中的多个组件的相对空间关系。
在操作S220，根据本发明示例性实施例，结合显示区域的尺寸和各组件之间的相对空间关系，即可确定所述各组件之间的外部约束条件。以组件130为例，组件130与其他组件之间的外部约束条件包括，组件130的高度与组件110的高度相同，其与组件120的高度的和为显示区域可用的总体高度，组件130的宽度与组件120的宽度的和为显示区域可用的总体宽度。
根据本发明示例性实施例，该各组件的显示参数包括组件实际占用的宽度和高度，
其中，第i个组件的内部约束条件包括：
Wi＝Fwi(Wgi,Hgi)；
Hi＝Fhi(Wgi,Hgi)；
各组件之间显示参数的外部约束条件为：
Wgi＝Cwi(W,W1,W2,W3,…,Wn)；
Hgi＝Chi(H,H1,H2,H3,…,Hn)；
其中，n为组件的个数，i为小于或等于n的自然数，W/H为显示区域可用的总体宽度/高度,W1,W2,…,Wn和H1,H2,…,Hn分别为所述多个组件的实际占用的宽度和高度，Wg1,Wg2,…,Wgn和Hg1,Hg2,…Hgn分别为所述多个组件可用的最大宽度和高度，Fwi/Fhi分别为第i个组件自身布局器的宽度/高度分量，Cwi/Chi分别为第i个组件与其他组件之间的外部约束条件。
其中，第i个组件自身布局器可以是一个函数，其在给定第i个组件的最大可用空间的情况下，能够输出该组件实际占用的空间信息。进一步地，该函数在执行过程中，还可以根据组件自己的需要完成内部元素的布局。
实施例一：
根据本发明示例性实施例，在操作S210中确定出，组件120的内部约束条件包括，组件120的高度为X，组件130的内部约束条件为，组件130 的宽度为Y。而对于组件120的宽度和组件130的高度，以及组件110的宽度和高度，则充满其可用的空间即可。另外，可用显示区域的总体宽度 W和高度H是确定的。
在上述公式中，设组件110、120、130分别对应i＝1、2、3。那么，对于组件110：
W1＝Fw1(Wg1,Hg1)，其中Fw1(W，H)＝W；
H1＝Fh1(Wg1,Hg1)，其中Fh1(W，H)＝H。
对于组件120：
W2＝Fw2(Wg2,Hg2)，其中Fw2(W，H)＝W；
H2＝Fh2(Wg2,Hg2)，其中Fh2(W，H)＝X。
对于组件130：
W3＝Fw3(Wg3,Hg3)，其中Fw3(W，H)＝Y；
H3＝Fh3(Wg3,Hg3)，其中Fh3(W，H)＝H。
根据本发明示例性实施例，在操作S220中确定出，各组件之间的外部约束条件包括，组件120与组件110的宽度相同，其与组件130的宽度的和为显示区域的总体宽度W，组件130与组件110的高度相同，其与组件 120的高度的和为显示区域的总体高度H。那么：
Wg2＝Cw2(W,W1,W2,W3)，其中Cw2(W,W1,W2,W3)＝W-W3；
Hg2＝Ch2(H,H1,H2,H3),其中Ch2(H,H1,H2,H3)＝X；
Wg3＝Cw3(W,W1,W2,W3),其中Cw3(W,W1,W2,W3)＝Y；
Hg3＝Ch3(H,H1,H2,H3)，其中Ch3(H,H1,H2,H3)＝H-H2；
Wg1＝Cw1(W,W1,W2,W3)，其中Cw1(W,W1,W2,W3)＝W2；以及
Hg1＝Ch1(H,H1,H2,H3)，其中Ch1(H,H1,H2,H3)＝H3。
综合上述约束条件，求解可得到：
W1＝W-Y；
H1＝H-X；
W2＝W-Y；
H2＝X；
W3＝Y；以及
H3＝H-X。
根据本发明示例性实施例，显示区域的宽度W、高度H、组件120的高度X、以及组件130的宽度Y是确定的，例如，该显示区域的W为2000 像素，高度为1500像素，由内部约束条件确定的组件120的高度为100，确定的组件130的宽度为200，那么，组件110、120和130的所有宽度和高度都可以根据上述表达式确定下来。
实施例二：
根据本发明示例性实施例，组件120的元素个数为可变的，在可变状态下，其内容可以自动确定。在操作S210中确定出，组件120的内部约束条件包括，将组件120的元素密度确定为Z，组件130的内部约束条件为，组件130的宽度根据其内部元素中最长元素的长度以及组件130左右留白的宽度所确定。
特别地，在满足组件120的元素密度为Z时，若元素之间产生重叠，还可以将元素的方向旋转90度，并根据其中最长元素的长度以及组件120 上下留白的高度确定组件120的高度。
本实施例的其他约束条件与上述实施例一相同，此处不再赘述。
对于组件110：
W1＝Fw1(Wg1,Hg1)，其中Fw1(W，H)＝W；
H1＝Fh1(Wg1,Hg1)，其中Fh1(W，H)＝H。
对于组件120：
W2＝Fw2(Wg2,Hg2)，其中Fw2(W，H)＝W；
H2＝Fh2(Wg2,Hg2)，其中Fh2(W，H)的实现过程包括，根据可用空间的宽度以及给定元素密度确定出元素的数量，并进一步确定出每个元素的内容，判断在该密度下元素内容是否会发生重叠，若不重叠，则根据元素的像素高度确定组件120的高度，否则，将元素的方向旋转90度，找出最长元素，根据最长元素的长度以及组件120上下留白的高度确定组件120 的高度。
对于组件130：
W3＝Fw3(Wg3,Hg3)，其中Fw3(W，H)的实现包括，找出最长元素，根据最长元素的长度以及组件130左右留白的宽度确定组件130的宽度；
H3＝Fh3(Wg3,Hg3)，其中Fh3(W，H)＝H。
以及外部约束条件：
Wg2＝Cw2(W,W1,W2,W3)，其中Cw2(W,W1,W2,W3)＝W-W3；
Hg2＝Ch2(H,H1,H2,H3),其中Ch2(H,H1,H2,H3)＝X；
Wg3＝Cw3(W,W1,W2,W3),其中Cw3(W,W1,W2,W3)＝Y；
Hg3＝Ch3(H,H1,H2,H3)，其中Ch3(H,H1,H2,H3)＝H-H2；
Wg1＝Cw1(W,W1,W2,W3)，其中Cw1(W,W1,W2,W3)＝W2；以及
Hg1＝Ch1(H,H1,H2,H3)，其中Ch1(H,H1,H2,H3)＝H3。
综合上述约束条件，求解可得到各组件的显示参数(Wi，Hi)。
根据本发明示例性实施例，显示区域的宽度W、高度H、以及组件 120的元素密度Z是可以确定的，例如，该显示区域的W为2000像素，高度为1500像素，由内部约束条件确定的组件120的元素密度为3个/100像素，那么，结合组件120和130中各元素的宽度和高度，即可确定组件110、120和130的所有宽度和高度。
通过以上两个实施例的介绍，本领域技术人员很容易根据需要构建适合的布局器Fi，并结合外部约束条件求解显示参数，从而实现自动地确定显示参数，便于在操作S240中，根据显示参数，在显示区域中显示多个组件。
示例性介质
本发明示例性实施方式提供了一种计算机可读存储介质，存储有计算机可执行指令，上述指令在被处理单元执行时用于实现上述方法实施例中任一项上述的用于对显示区域中的多个组件进行显示的方法。
在一些可能的实施方式中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在计算设备上运行时，所述程序代码用于使所述计算设备执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施方式的用于图表的数据处理方法中的步骤，例如，所述计算设备可以执行如图2中所示的操作S210：基于各组件的显示项目的外形数据和各组件的内部布局需求，确定各组件的内部约束条件；操作S220：基于所述显示区域的尺寸和各组件之间的相对空间关系，确定所述各组件之间的外部约束条件；操作S230：根据所述内部约束条件和所述外部约束条件，确定所述各组件的显示参数；以及操作S240，根据所述显示参数，在所述显示区域中显示所述多个组件。
所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。
如图3所示，描述了根据本发明的实施方式的对显示区域中的多个组件进行显示的程序产品30，其可以采用便携式紧凑盘只读存储器 (CD-ROM)并包括程序代码，并可以在计算设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括——但不限于——电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。
可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于——无线、有线、光缆，RF等等，或者上述的任意合适的组合。
可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言——诸如Java，C++等，还包括常规的过程式程序设计语言——诸如“C”，语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)一连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。
示例性装置
在介绍了本发明示例性实施方式的介质之后，接下来，参考图4对本发明示例性实施方式的一种对显示区域中的多个组件进行显示的装置。
如图4所示，对多个组件进行显示的装置400可以包括内部约束模块410、外部约束模块420、参数确定模块430和显示模块420。其中：
内部约束模块410，例如执行上述参考图2描述的操作S210，用于基于各组件的显示项目的外形数据和各组件的内部布局需求，确定各组件的内部约束条件。
外部约束模块420，例如执行上述参考图2描述的操作S220，用于基于所述显示区域的尺寸和各组件之间的相对空间关系，确定所述各组件之间的外部约束条件。
参数确定模块430，例如执行上述参考图2描述的操作S230，用于根据所述内部约束条件和所述外部约束条件，确定所述各组件的显示参数。
显示模块420，例如执行上述参考图2描述的操作S240，用于根据所述显示参数，在所述显示区域中显示所述多个组件。
此外，在本示例实施例中，该各组件的显示参数包括组件实际占用的宽度和高度，
其中，第i个组件的内部约束条件包括：
Wi＝Fwi(Wgi,Hgi)；
Hi＝Fhi(Wgi,Hgi)；
各组件之间显示参数的外部约束条件为：
Wgi＝Cwi(W,W1,W2,W3,…,Wn)；
Hgi＝Chi(H,H1,H2,H3,…,Hn)；
其中，n为组件的个数，i为小于或等于n的自然数，W/H为显示区域可用的总体宽度/高度,W1,W2,…,Wn和H1,H2,…,Hn分别为所述多个组件的实际占用的宽度和高度，Wg1,Wg2,…,Wgn和Hg1,Hg2,…Hgn分别为所述多个组件可用的最大宽度和高度，Fwi/Fhi分别为第i个组件自身布局器的宽度/高度分量，Cwi/Chi分别为第i个组件与其他组件之间的外部约束条件。
在本示例实施例中，该组件的内部布局需求包括所述组件内部的元素数量和/或各元素尺寸的空间占用需求。
在本示例实施例中，该各组件之间的相对空间关系包括各组件之间的相对位置关系和/或相对尺寸关系。
由于发明的示例实施例的信息呈现设备400的各个功能模块与上述信息呈现方法的示例实施例的步骤对应，因此在此不再赘述。
示例性计算设备
在介绍了本发明示例性实施方式的方法、介质和装置之后，接下来，参考图5对本发明示例性实施方式的一种计算设备，用于对显示区域中的多个组件进行显示。
所属技术领域的技术人员能够理解，本发明的各个方面可以实现为系统、方法或程序产品。因此，本发明的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“系统”。
在一些可能的实施方式中，根据本发明的计算设备可以至少包括至少一个处理单元、以及至少一个存储单元。其中，所述存储单元存储有程序代码，当所述程序代码被所述处理单元执行时，使得所述处理单元执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施方式的信息呈现方法中的步骤。例如，所述处理单元可以执行如图2中所示的操作S210：基于各组件的显示项目的外形数据和各组件的内部布局需求，确定各组件的内部约束条件；操作S220：基于所述显示区域的尺寸和各组件之间的相对空间关系，确定所述各组件之间的外部约束条件；操作S230：根据所述内部约束条件和所述外部约束条件，确定所述各组件的显示参数；以及操作S240，根据所述显示参数，在所述显示区域中显示所述多个组件。
下面参照图5来描述根据本发明的这种实施方式的计算设备50。图 5所示的信息呈现设备50仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。
如图5所示，信息呈现设备50以通用计算设备的形式表现。信息呈现设备50的组件可以包括但不限于：上述至少一个处理单元501、上述至少一个存储单元502、连接不同系统组件(包括存储单元502和处理单元 501)的总线503。
总线503表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器、外围总线、图形加速端口、处理器或者使用多种总线结构中的任意总线结构的局域总线。
存储单元502可以包括易失性存储器形式的可读介质，例如随机存取存储器(RAM)5021和/或高速缓存存储器5022，还可以进一步包括只读存储器(ROM)5023。
存储单元502还可以包括具有一组(至少一个)程序模块5024的程序/实用工具5025，这样的程序模块5024包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。
计算设备50也可以与一个或多个外部设备504(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与计算设备50交互的设备通信，和/或与使得信息呈现设备50能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口505进行。并且，计算设备50还可以通过网络适配器506与一个或者多个网络(例如局域网(LAN)，广域网(WAN) 和/或公共网络，例如因特网)通信。如图所示，网络适配器506通过总线 503与计算设备50的其它模块通信。应当明白，尽管图中未示出，可以结合计算设备50使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。
应当注意，尽管在上文详细描述中提及了对显示区域中的多个组件进行显示的装置的若干单元/模块或子单元/模块，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本发明的实施方式，上文描述的两个或更多单元/模块的特征和功能可以在一个单元/模块中具体化。反之，上文描述的一个单元/模块的特征和功能可以进一步划分为由多个单元/模块来具体化。
此外，尽管在附图中以特定顺序描述了本发明方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。
虽然已经参考若干具体实施方式描述了本发明的精神和原理，但是应该理解，本发明并不限于所公开的具体实施方式，对各方面的划分也不意味着这些方面中的特征不能组合以进行受益，这种划分仅是为了表述的方便。本发明旨在涵盖所附权利要求的精神和范围内所包括的各种修改和等同布置。

Claims (4)

1.一种对显示区域中的多个组件进行显示的方法，所述多个组件中的每个组件包括至少一个显示项目，所述方法包括：
基于各组件的显示项目的外形数据和各组件的内部布局需求，确定各组件的内部约束条件，其中，所述组件的内部布局需求包括所述组件内部的元素数量和各元素尺寸的空间占用需求；
基于所述显示区域的尺寸和各组件之间的相对空间关系，确定所述各组件之间的外部约束条件，其中，所述各组件之间的相对空间关系包括所述各组件之间的相对位置关系和相对尺寸关系；
根据所述内部约束条件和所述外部约束条件，确定所述各组件的显示参数，其中，所述各组件的显示参数包括组件实际占用的宽度和高度，
其中，第i个组件的内部约束条件包括：
Wi＝Fwi(Wgi，Hgi)；
Hi＝Fhi(Wgi，Hgi)；
各组件之间显示参数的外部约束条件为：
Wgi＝Cwi(W，W1，W2，W3，…，Wn)；
Hgi＝Chi(H，H1，H2，H3，…，Hn)；
其中，n为组件的个数，i为小于或等于n的自然数，W/H为显示区域可用的总体宽度/高度，W1，W2，…，Wn和H1，H2，…，Hn分别为所述多个组件的实际占用的宽度和高度，Wg1，Wg2，…，Wgn和Hg1，Hg2，…Hgn分别为所述多个组件可用的最大宽度和高度，Fwi/Fhi分别为第i个组件自身布局器的宽度/高度分量，Cwi/Chi分别为第i个组件与其他组件之间的外部约束条件；以及
根据所述显示参数，在所述显示区域中显示所述多个组件。
2.一种计算机可读存储介质，其上存储有可执行指令，所述指令被处理单元执行时使所述处理单元执行根据权利要求1所述的方法。
3.一种对显示区域中的多个组件进行显示的装置，所述多个组件中的每个组件包括至少一个显示项目，所述装置包括：
内部约束模块，用于基于各组件的显示项目的外形数据和各组件的内部布局需求，确定各组件的内部约束条件，其中，所述组件的内部布局需求包括所述组件内部的元素数量和各元素尺寸的空间占用需求；
外部约束模块，用于基于所述显示区域的尺寸和各组件之间的相对空间关系，确定所述各组件之间的外部约束条件，其中，所述各组件之间的相对空间关系包括各组件之间的相对位置关系和相对尺寸关系；
参数确定模块，用于根据所述内部约束条件和所述外部约束条件，确定所述各组件的显示参数，其中，所述各组件的显示参数包括组件实际占用的宽度和高度，
其中，第i个组件的内部约束条件包括：
Wi＝Fwi(Wgi，Hgi)；
Hi＝Fhi(Wgi，Hgi)；
各组件之间显示参数的外部约束条件为：
Wgi＝Cwi(W，W1，W2，W3，…，Wn)；
Hgi＝Chi(H，H1，H2，H3，…，Hn)；
其中，n为组件的个数，i为小于或等于n的自然数，W/H为显示区域可用的总体宽度/高度，W1，W2，…，Wn和H1，H2，…，Hn分别为所述多个组件的实际占用的宽度和高度，Wg1，Wg2，…，Wgn和Hg1，Hg2，…Hgn分别为所述多个组件可用的最大宽度和高度，Fwi/Fhi分别为第i个组件自身布局器的宽度/高度分量，Cwi/Chi分别为第i个组件与其他组件之间的外部约束条件；以及
显示模块，用于根据所述显示参数，在所述显示区域中显示所述多个组件。
4.一种计算设备，包括：
处理单元；以及
存储单元，其上存储有可执行指令，所述指令被所述处理单元执行时使所述处理单元执行根据权利要求1所述的方法。
CN201710496969.6A 2017-06-20 2017-06-20 对多个组件进行显示的方法、介质、装置和计算设备 Active CN107273081B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710496969.6A CN107273081B (zh) 2017-06-20 2017-06-20 对多个组件进行显示的方法、介质、装置和计算设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710496969.6A CN107273081B (zh) 2017-06-20 2017-06-20 对多个组件进行显示的方法、介质、装置和计算设备

Publications (2)

Publication Number Publication Date
CN107273081A CN107273081A (zh) 2017-10-20
CN107273081B true CN107273081B (zh) 2020-12-11

Family

ID=60068256

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710496969.6A Active CN107273081B (zh) 2017-06-20 2017-06-20 对多个组件进行显示的方法、介质、装置和计算设备

Country Status (1)

Country Link
CN (1) CN107273081B (zh)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109375971B (zh) * 2018-09-14 2020-07-31 浙江口碑网络技术有限公司 页面的布局方法及装置、存储介质、电子装置
CN113687809A (zh) * 2020-05-18 2021-11-23 北京沃东天骏信息技术有限公司 信息显示方法及装置、以及电子设备和可读存储介质
CN114764329A (zh) * 2021-01-14 2022-07-19 华为技术有限公司 一种ui界面自适应约束求解方法及相关装置

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101523887A (zh) * 2006-09-28 2009-09-02 惠普开发有限公司 具有最大页面覆盖率的图形组件布局
CN101971204A (zh) * 2007-10-01 2011-02-09 惠普开发有限公司 利用基于相对位置的控制在页面上布置图形对象

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7743322B2 (en) * 2003-09-30 2010-06-22 Hewlett-Packard Development Company, L.P. Automatic photo album page layout
US20120054072A1 (en) * 2010-08-31 2012-03-01 Picaboo Corporation Automatic content book creation system and method based on a date range
US8643673B1 (en) * 2011-09-30 2014-02-04 Google Inc. Methods and apparatus for improving the typical running time of the bellman-ford algorithm

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101523887A (zh) * 2006-09-28 2009-09-02 惠普开发有限公司 具有最大页面覆盖率的图形组件布局
CN101971204A (zh) * 2007-10-01 2011-02-09 惠普开发有限公司 利用基于相对位置的控制在页面上布置图形对象

Also Published As

Publication number Publication date
CN107273081A (zh) 2017-10-20

Similar Documents

Publication Publication Date Title
JP6884797B2 (ja) アプリケーションプログラム処理方法及び端末デバイス
US10162498B2 (en) Providing selection areas for selectable objects in graphical interface
US20160299640A1 (en) Optimized joint document review
US9250780B2 (en) Information processing method and electronic device
US20110197165A1 (en) Methods and apparatus for organizing a collection of widgets on a mobile device display
CN107273081B (zh) 对多个组件进行显示的方法、介质、装置和计算设备
US20120311501A1 (en) Displaying graphical object relationships in a workspace
CN109634609B (zh) 动态弹窗的显示方法、系统、设备及存储介质
US9135885B2 (en) Resolution independent client side rendering
CN110990014B (zh) 骨架屏页面代码的生成方法、装置、服务器及存储介质
AU2016256364B2 (en) Rendering graphical assets natively on multiple screens of electronic devices
CN110806847A (zh) 一种分布式多屏幕显示方法、装置、设备及系统
US20150067482A1 (en) Method for layout of speech bubbles associated with characters in an image
CN107168738A (zh) 一种应用工具的管理方法、装置、设备和存储介质
CN107562324B (zh) 数据显示控制的方法和终端
US20170315773A1 (en) Virtualizing Applications for Per-Monitor Displaying
CN113761871A (zh) 富文本渲染方法、装置、电子设备以及存储介质
CN109992268B (zh) 弹框实现方法、装置、电子设备、存储介质
CN115390976A (zh) 界面设计的布局方法、界面的展示方法及相关设备
US10296185B2 (en) Viewing selected zoomed content
CN114253536A (zh) 界面设计组件的调用方法、终端设备以及可读存储介质
CN107766605B (zh) 智能手表布局适配方法、装置、设备及存储介质
CN114327208B (zh) 一种图例展示方法、装置、存储介质及终端
CN109783100B (zh) 查看用户界面元素属性的方法、装置及电子设备
CN112306339B (zh) 用于显示图像的方法和装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant