用户界面显示方法、装置、计算机设备和存储介质与流程

本申请涉及图形界面交互技术领域，特别是涉及一种用户界面显示方法、装置、计算机设备和存储介质。

背景技术：

随着计算机设备技术的发展，利用计算机设备能够上网浏览数据，能够进行购物等等，因此特别是智能手机、平板电脑等移动终端已经成为人们日常生活中必不可少的工具。

用户通过浏览计算机设备的用户界面(userinterface，即ui)，并通过点选界面中的控件，可以实现用户的目标操作，如跳转到控件对应的目标页面，进行支付、登录等等。

但传统的用户界面显示中的控件是在固定位置显示固定字段的数据，如果所需显示的数据超过了固定字段的限制，超过的部分将会无法显示，若所需显示的数据，无法填满控件的固定字段，则会留下空白部分，导致页面不够美观，甚至用户无法看到完整的数据，对用户操作造成困扰。

技术实现要素：

基于此，有必要针对上述技术问题，提供一种用户界面显示方法、装置、计算机设备和存储介质。

一种用户界面显示方法，包括：

获取显示对象；

根据显示对象的数量确定控件的数量，控件用于显示显示对象；

根据控件所需显示的显示对象的显示尺寸，确定控件的显示尺寸；

依据各个控件的显示尺寸，在用户界面上加载各个控件。

在其中一个实施例中，显示对象包括一个显示元素或具有对应关系的多个显示元素；

控件包括子级控件和父级控件；一个子级控件用于显示一个显示元素；一个父级控件用于显示一个或多个子级控件。

在其中一个实施例中，根据显示对象的数量确定控件的数量的步骤，包括：

根据显示对象的数量确定父级控件的数量；

根据父级控件所需显示的显示对象中显示元素的数量，确定每个父级控件中子级控件的数量。

在其中一个实施例中，根据控件所需显示的显示对象的显示尺寸，确定控件的显示尺寸的步骤包括：

根据每个显示元素的显示尺寸确定对应子级控件的显示尺寸；

根据父级控件中所需显示的各个子级控件的显示尺寸确定父级控件的显示尺寸。

在其中一个实施例中，显示元素包括图像或文本。

在其中一个实施例中，控件的显示尺寸包括可调的显示高度及预设的显示宽度，当显示元素的类型为图像时，根据每个显示元素的显示尺寸确定对应子级控件的显示尺寸的步骤包括：

获取图像的预设显示高度；

根据图像的预设显示高度，确定对应的子级控件的显示高度。

在其中一个实施例中，控件的显示尺寸包括可调的显示高度及预设的显示宽度，当显示元素的类型为文本时，根据每个显示元素的显示尺寸确定对应子级控件的显示尺寸的步骤包括：

根据文本中字符的预设显示尺寸及文本中的字符数量，以及子级控件预设的显示宽度，确定文本在子级控件中显示所需的显示行数；

根据文本在子级控件中显示所需的显示行数及文本中字符的预设显示尺寸，确定子级控件的显示高度。

一种用户界面显示装置，装置包括：

显示对象获取模块，用于获取显示对象；

控件数量确定模块，用于根据显示对象的数量确定控件的数量，控件用于显示显示对象；

控件显示尺寸确定模块，用于根据控件所需显示的显示对象的显示尺寸，确定控件的显示尺寸；

控件加载模块，用于依据各个控件的显示尺寸，在用户界面上加载各个控件。

一种计算机设备，包括存储器和处理器，存储器存储有计算机程序，处理器执行计算机程序时实现以下步骤：

获取显示对象；

根据显示对象的数量确定控件的数量，控件用于显示显示对象；

根据控件所需显示的显示对象的显示尺寸，确定控件的显示尺寸，控件的显示尺寸包括可调的显示高度及预设的显示宽度；

在用户界面上加载各个控件。

一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

获取显示对象；

根据显示对象的数量确定控件的数量，控件用于显示显示对象；

根据控件所需显示的显示对象的显示尺寸，确定控件的显示尺寸，控件的显示尺寸包括可调的显示高度及预设的显示宽度；

依据各个控件的显示尺寸，在用户界面上加载各个控件。

上述用户界面显示方法、装置、计算机设备和存储介质，根据获取到的显示对象的数量，确定用于显示各个显示对象的控件的数量，根据每个控件所需显示的显示对象的显示尺寸，确定控件的显示尺寸，使控件适应显示对象的显示尺寸，避免出现显示对象无法完全显示或出现由于显示对象较小产生空白区域的问题，使得用户界面显示更加美观。

附图说明

图1为一个实施例中用户界面显示方法的应用环境图；

图2为一个实施例中用户界面显示方法的流程示意图；

图3为一个实施例中用户界面显示示意图；

图4为一个实施例中确定控件的数量步骤的流程示意图；

图5为一个实施例中确定控件的显示尺寸步骤的流程示意图；

图6为一个实施例中确定子级控件的显示尺寸步骤的流程示意图；

图7为另一个实施例中确定子级控件的显示尺寸步骤的流程示意图；

图8为一个实施例中用户界面显示装置的结构框图；

图9为一个实施例中控件数量确定模块的结构框图；

图10为一个实施例中控件显示尺寸确定模块的结构框图；

图11为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请提供的用户界面显示方法，可以应用于如图1所示的应用环境中。其中，计算机设备102通过网络与服务器104通过网络进行通信。计算机设备可以从服务器获取显示对象，当需要显示于用户界面上时，根据显示对象的数量确定控件的数量，根据控件所需显示的显示对象的显示显示尺寸，确定控件的显示尺寸，在计算机设备的用户界面上加载各个控件，显示各个控件。其中，计算机设备可以但不限于是各种智能手机、平板电脑和便携式可穿戴设备。

在一个实施例中，如图2所示，提供了一种用户界面显示方法，以该方法应用于图1中的计算机设备为例进行说明，包括步骤100至400：

步骤100，获取显示对象。

其中，显示对象是在用户界面中所需要显示的内容，可以包括图像和文本，也可以仅仅包括图像或文本中的一种。显示对象可以通过网络向服务器请求获取，也可以是预先存储于计算机设备数据库中的。

步骤200，根据显示对象的数量确定控件的数量，控件用于显示显示对象。

本发明中的控件指用于开发构建用户界面的控件，用于显示用户界面所需显示的显示对象，根据获取的显示对象的数量，确定控件的数量，调取相应数量的控件。一个控件可以显示一个或多个显示对象。

步骤300，根据控件所需显示的显示对象的显示尺寸，确定控件的显示尺寸。

在一个实施例中，当显示对象为文本时，其显示尺寸取决于文本的预设字体、字号、行高及文本的数量；当显示对象为图像时，显示尺寸取决于图像的预设像素大小；当显示对象既包括文本又包括图像时，显示尺寸需要综合考虑两种类型的决定因素。

根据每个控件所需显示的显示对象的显示尺寸，调整控件的显示尺寸，进行适应性调整，保证控件的显示尺寸能够满足显示对象的显示需要，将显示对象完整地显示于用户界面中，避免造成显示对象显示不完整或是控件的显示尺寸过大使控件中存在无显示的空白区域，保证用户界面的显示美观度。

步骤400，依据各个控件的显示尺寸，在用户界面上加载各个控件。

在用户界面中加载各个控件，并将每个控件需要显示的显示对象显示于各个控件中。

上述用户界面显示方法中，根据获取到的显示对象的数量，确定用于显示各个显示对象的控件的数量，根据每个控件所需显示的显示对象的显示尺寸，确定控件的显示尺寸，使控件适应显示对象的显示尺寸，避免出现显示对象无法完全显示或出现由于显示对象较小产生空白区域的问题，使得用户界面显示更加美观。

在其中一个实施例中，显示对象包括一个显示元素或具有对应关系的多个显示元素；控件包括子级控件和父级控件；一个子级控件用于显示一个显示元素；一个父级控件用于显示一个或多个子级控件。

显示对象由显示元素的组成，显示元素信息类型分为文本元素和图像元素。父级控件相当于用于容纳子级控件的容器，一个父级控件可以容纳多个子级控件，但一个子级控件只对应于一个父级控件。在本实施例中，每个父级控件用于对应显示一个显示对象，当显示对象只有一个显示元素时，父级控件中显示一个子级控件，该子级控件显示该显示元素；当显示对象包括具有对应关系的多个显示元素时，父级控件中显示与显示元素数量相等的子级控件，每个子级控件显示一个对应的显示元素，各个子级控件按照预设的排布规则排布显示于父级控件中，在一些实施例中可以是s型排布。

在一个实施例中，如图3所示，一个显示对象为应用程序中一个商品的相关信息，包括显示元素：商品图像、商品名称、价格及销量，一个父级控件(实线框表示)用于显示该商品的全部显示元素，每个显示元素各用一个子级控件(虚线框表示)进行显示，每个用户界面可以显示一个或一个以上父级控件。

在一些实施例中，对于在控件中显示的显示元素，当检测到对任一显示元素的触控操作且任一显示元素具有响应功能时，基于任一显示元素，对触控操作进行响应。

在其中一个实施例中，如图4所示，根据显示对象的数量确定控件的数量的步骤，包括步骤210至220：

步骤210，根据显示对象的数量确定父级控件的数量。

在本实施例中，每个父级控件显示一个显示对象，因此父级控件的数量与显示对象的数量相同，根据获取的显示对象的数量即可确定父级控件的数量，可以调取相应数量的父级控件。

步骤220，根据父级控件所需显示的显示对象中显示元素的数量，确定每个父级控件中子级控件的数量。

父级控件中的每个子级控件分别对应显示对象中的一个显示元素，根据显示对象中显示元素的数量即可确定每个父级控件中的子级控件的数量，将各个父级控件中的子级控件进行累加，即可确定子级控件的总数量，可以调取相应数量的子级控件。

在其中一个实施例中，如图5所示，根据控件所需显示的显示对象的显示尺寸，确定控件的显示尺寸的步骤，包括步骤310至320：

步骤310，根据每个显示元素的显示尺寸确定对应子级控件的显示尺寸。

在一些实施例中，显示元素的显示尺寸为获取显示对象前已经被预设的，在另一些实施例中，可以是根据计算机设备发送的获取请求后进行预设的，计算机设备在请求中包括子级控件及父级控件二者的预设显示宽度，服务器在接收到获取请求后，根据子级控件及父级控件二者的预设显示宽度对显示元素的显示尺寸进行预设后再发送至计算机设备。

子级控件用于显示显示对象中的显示元素，为了保证用户界面的显示更加美观，根据显示元素的显示尺寸，确定子级控件的显示尺寸，使得显示元素在子级控件中能够显示完整，又不会造成子级控件显示尺寸过大留下空白区域。

步骤320，根据父级控件中所需显示的各个子级控件的显示尺寸确定父级控件的显示尺寸。

由于子级控件在父级控件的排布方式和显示位置是根据预设的排布规则确定的，因此确定了子级控件的显示尺寸，即可确定父级控件的显示尺寸。

在一些实施例中，父级控件的显示宽度为预设值，当父级控件中每行显示的子级控件为两个及以上时，判断该行所显示的子级控件中哪一个子级控件的显示高度最高，根据该显示高度最高的子级控件的显示高度，确定父级控件的该行的显示高度，例如，当父级控件中有三个子级控件分别为a、b、c,显示高度分别为a＝a，b＝b，c＝c，且b>c>a，则根据子级控件b的显示高度b确定父级控件该行的显示高度。将父级控件每行的显示高度进行累加，即可确定父级控件的显示高度。

在其中一个实施例中，显示元素包括图像或文本。

对应显示图像类型显示元素的子级控件可以是图像控件，也可以是自定义控件；对应显示文本类型显示元素的子级控件可以是文本控件，也可以是自定义控件，本领域技术人员可以根据开发需要进行选择。

在其中一个实施例中，如图6所示，控件的显示尺寸包括可调的显示高度及预设的显示宽度，当显示元素的类型为图像时，根据每个显示元素的显示尺寸确定对应子级控件的显示尺寸的步骤，包括步骤311至312：

步骤311，获取图像的预设显示高度。

图像的显示高度为预设值，获取子级控件所需显示的显示元素的图像预设显示高度。

步骤312，根据图像的预设显示高度，确定对应的子级控件的显示高度。

在本实施例中，子级控件的显示宽度为预设值，因为需要保证子级控件中的显示位置和排布方式不会受到显示元素尺寸的影响，子级控件的显示尺寸只需确定显示高度即可确定，根据显示元素的图像预设显示高度，确定对应的子级控件的显示高度。

在其中一个实施例中，如图7所示，控件的显示尺寸包括可调的显示高度及预设的显示宽度，当显示元素的类型为文本时，根据每个显示元素的显示尺寸确定对应子级控件的显示尺寸的步骤，包括步骤313至314：

步骤313，根据文本中字符的预设显示尺寸及文本中的字符数量，以及子级控件预设的显示宽度，确定文本在子级控件中显示所需的显示行数。

显示元素的字符预设显示尺寸取决于预设的字号、字体及行高等，根据文本中的字符预设显示尺寸及文本中的字符数量，由于子级控件预设的显示宽度是预设的，因此可以确定文本在子级控件中所需的显示行数。

步骤314，根据文本在子级控件中显示所需的显示行数及文本中字符的预设显示尺寸，确定子级控件的显示高度。

根据文本的字符预设行高，及文本在子级控件中所需的显示行数，即可确定文本在子级控件中的显示高度，进而确定子级控件的显示高度。

应该理解的是，虽然图2-7的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图2-7中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

在其中一个实施例中，如图8所示，提供了一种用户界面显示装置，包括：显示对象获取模块500、控件数量确定模块600、控件显示尺寸确定模块700和控件加载模块800，其中：

显示对象获取模块500，用于获取显示对象；

控件数量确定模块600，用于根据显示对象的数量确定控件的数量，控件用于显示显示对象；

控件显示尺寸确定模块700，用于根据控件所需显示的显示对象的显示尺寸，确定控件的显示尺寸；

控件加载模块800，用于依据各个控件的显示尺寸，在用户界面上加载各个控件。

在其中一个实施例中，如图9所示，控件数量确定模块600包括：

父级控件数量确定模块610，用于根据显示对象的数量确定父级控件的数量；

子级控件数量确定模块620，用于根据父级控件所需显示的显示对象中显示元素的数量，确定每个父级控件中子级控件的数量。

在其中一个实施例中，如图10所示，控件显示尺寸确定模块700包括：

子级控件显示尺寸确定模块710，用于根据每个显示元素的显示尺寸确定对应子级控件的显示尺寸；

父级控件显示尺寸确定模块720，用于根据父级控件中所需显示的各个子级控件的显示尺寸确定父级控件的显示尺寸。

在其中一个实施例中，控件的显示尺寸包括可调的显示高度及预设的显示宽度，当显示元素的类型为图像时，子级控件显示尺寸确定模块710包括：

图像显示高度获取模块，用于获取图像的预设显示高度；

子级控件显示高度第一确定模块，用于根据图像的预设显示高度，确定对应的子级控件的显示高度。

在其中一个实施例中，控件的显示尺寸包括可调的显示高度及预设的显示宽度，当显示元素的类型为文本时，子级控件显示尺寸确定模块710包括：

文本显示行数确定模块，用于根据文本中字符的预设显示尺寸及文本中的字符数量，以及子级控件预设的显示宽度，确定文本在子级控件中显示所需的显示行数；

子级控件显示高度第二确定模块，用于根据文本在子级控件中显示所需的显示行数及文本中字符的预设显示尺寸，确定子级控件的显示高度。

关于用户界面显示装置的具体限定可以参见上文中对于用户界面显示方法的限定，在此不再赘述。上述用户界面显示装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图11所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种用户界面显示方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图11中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现以下步骤：

获取显示对象；

根据显示对象的数量确定控件的数量，控件用于显示显示对象；

根据控件所需显示的显示对象的显示尺寸，确定控件的显示尺寸；

依据各个控件的显示尺寸，在用户界面上加载各个控件。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

根据显示对象的数量确定父级控件的数量；

根据父级控件所需显示的显示对象中显示元素的数量，确定每个父级控件中子级控件的数量。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

根据每个显示元素的显示尺寸确定对应子级控件的显示尺寸；

根据父级控件中所需显示的各个子级控件的显示尺寸确定父级控件的显示尺寸。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

获取图像的预设显示高度；

根据图像的预设显示高度，确定对应的子级控件的显示高度。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

根据文本中字符的预设显示尺寸及文本中的字符数量，以及子级控件预设的显示宽度，确定文本在子级控件中显示所需的显示行数；

根据文本在子级控件中显示所需的显示行数及文本中字符的预设显示尺寸，确定子级控件的显示高度。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

获取显示对象；

根据显示对象的数量确定控件的数量，控件用于显示显示对象；

根据控件所需显示的显示对象的显示尺寸，确定控件的显示尺寸；

依据各个控件的显示尺寸，在用户界面上加载各个控件。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

根据显示对象的数量确定父级控件的数量；

根据父级控件所需显示的显示对象中显示元素的数量，确定每个父级控件中子级控件的数量。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

根据每个显示元素的显示尺寸确定对应子级控件的显示尺寸；

根据父级控件中所需显示的各个子级控件的显示尺寸确定父级控件的显示尺寸。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

获取图像的预设显示高度；

根据图像的预设显示高度，确定对应的子级控件的显示高度。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

根据文本中字符的预设显示尺寸及文本中的字符数量，以及子级控件预设的显示宽度，确定文本在子级控件中显示所需的显示行数；

根据文本在子级控件中显示所需的显示行数及文本中字符的预设显示尺寸，确定子级控件的显示高度。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(rom)、可编程rom(prom)、电可编程rom(eprom)、电可擦除可编程rom(eeprom)或闪存。易失性存储器可包括随机存取存储器(ram)或者外部高速缓冲存储器。作为说明而非局限，ram以多种形式可得，诸如静态ram(sram)、动态ram(dram)、同步dram(sdram)、双数据率sdram(ddrsdram)、增强型sdram(esdram)、同步链路(synchlink)dram(sldram)、存储器总线(rambus)直接ram(rdram)、直接存储器总线动态ram(drdram)、以及存储器总线动态ram(rdram)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。