CN106445284A - 画面显示方法和装置 - Google Patents

画面显示方法和装置 Download PDF

Info

Publication number
CN106445284A
CN106445284A CN201610819794.3A CN201610819794A CN106445284A CN 106445284 A CN106445284 A CN 106445284A CN 201610819794 A CN201610819794 A CN 201610819794A CN 106445284 A CN106445284 A CN 106445284A
Authority
CN
China
Prior art keywords
view
node
data structure
sub
web
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.)
Granted
Application number
CN201610819794.3A
Other languages
English (en)
Other versions
CN106445284B (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.)
Yonyou Network Technology Co Ltd
Original Assignee
Pomelo (beijing) Technology 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 Pomelo (beijing) Technology Co Ltd filed Critical Pomelo (beijing) Technology Co Ltd
Priority to CN201610819794.3A priority Critical patent/CN106445284B/zh
Publication of CN106445284A publication Critical patent/CN106445284A/zh
Application granted granted Critical
Publication of CN106445284B publication Critical patent/CN106445284B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input 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/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction 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
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明公开了一种画面显示方法和装置,其中,该方法包括:在需要显示画面的情况下,对预先配置的第一数据结构进行遍历,并对所述第一数据结构中各个节点所对应视图进行排版,其中,所述第一数据结构中包括多个节点,所述多个节点中包括对应于原生视图的节点以及对应于web视图的节点,所述遍历根据预先保存的所述多个节点之间的关联关系执行;根据排版结果显示所述原生视图和web视图。本发明通过构建包括原生视图节点和Web视图节点的数据结构并建立节点之间的关联关系,能够在排版并显示画面时既采用原生视图渲染又采用Web渲染,从而在保证渲染效率和用户体验的同时,降低了开发成本和复杂度,并且还有助于提高应用的开发效率。

Description

画面显示方法和装置
技术领域
本发明涉及移动终端领域,并且特别地,涉及一种画面显示方法和装置。
背景技术
在目前常见的移动终端原生操作系统(例如,IOS或安卓操作系统)上,应用程序的图形用户界面渲染通常分为原生视图(View)渲染和浏览器内核视图(Webview)渲染。
在移动终端所显示的图形用户界面中往往包括多个视图,对于这些视图,目前主要是单一地通过原生视图渲染或web视图渲染的方式进行渲染。在采用原生视图渲染时,其缺陷是使用更加复杂,并且开发周期长成本高,但优点是渲染更加高效,用户体验好;相比于前者,web视图渲染的使用更加简单,开发周期较短、成本也比较低,但存在的缺陷是渲染相对滞后,用户体验较差。
目前,对于如何克服因为单独采用一种渲染方法而带来的缺陷,目前尚未提出有效的解决方案。
发明内容
针对相关技术中的问题,本发明提出一种画面显示方法和装置,既能够降低成本和复杂度,同时也能够克服渲染滞后的缺陷。
根据本发明的一个方面,提供了一种画面显示方法。
根据本发明的画面显示方法包括:
在需要显示画面的情况下,对预先配置的第一数据结构进行遍历,并对第一数据结构中各个节点所对应视图进行排版,其中,第一数据结构中包括多个节点,多个节点中包括对应于原生视图的节点以及对应于web视图的节点,遍历根据预先保存的多个节点之间的关联关系执行;
根据排版结果显示原生视图和web视图。
其中,根据本发明的画面显示方法可以进一步包括:
根据预先配置的第二数据结构,对第一数据结构进行节点的增加和/或删除,其中,第二数据结构中配置有多个子视图,在需要显示第二数据结构中子视图的情况下,在第一数据结构中增加对应于该子视图的节点;在需要停止显示第二数据数据结构中子视图的情况下,从第一数据结构中删除对应于该子视图的节点。
进一步地,在需要显示第二数据结构中子视图的情况下,如果接收到的插入请求中包含该子视图所依附的目标视图,则在第一数据结构中查找该目标视图所对应的节点,并在该节点下增加对应该子视图的子节点。
具体而言,在需要显示第二数据结构中子视图的情况下,如果接收到的插入请求中进一步包含该子视图与所依附的目标视图固定显示的指示信息,则在显示目标视图时,将子视图嵌入目标视图中以保持两者的位置相对固定;或者
如果接收到的插入请求中进一步包含该子视图不与所依附的目标视图固定显示的指示信息,则在显示目标视图时,对子视图和目标视图进行独立显示。
此外,根据本发明的画面显示方法可以进一步包括:
在对第一数据结构中各个节点所对应视图进行排版之前,确定需要显示画面的区域以及该区域的尺寸;
根据区域和尺寸,确定第一数据结构中各节点所对应视图的布局坐标和布局尺寸,并根据布局坐标和布局尺寸对第一数据结构中各节点所对应的视图进行排版。
此外,根据本发明的画面显示方法可以进一步包括:
在显示原生视图和web视图时,根据原生视图和web视图的叠放顺序进行显示。
此外,根据本发明的画面显示方法可以进一步包括:
根据原生视图和web视图所对应节点中包含的叠放顺序信息、或者根据原生视图和web视图所对应节点的入栈顺序,确定原生视图和web视图的叠放顺序。
此外,在根据排版结果显示原生视图和web视图时,在多个视图窗口中进行显示,并且根据指令在多个视图窗口之间进行切换。
可选地,上述第一数据结构中的每个节点包括以下信息:该节点的唯一标识、该节点所对应视图的类型、该节点所对应视图的参数;对于第一数据结构中的子节点,该节点进一步包括其父节点的位置信息。
可选地,第一数据结构中多个节点之间的关联关系通过链表和/或无序哈希表进行保存。
可选地,第一数据结构为文档对象模型DOM。
根据本发明的另一个方面,提供了一种画面显示装置。
根据本发明实施例的画面显示装置包括:
排版模块,用于在需要显示画面的情况下,对预先配置的第一数据结构进行遍历,并对第一数据结构中各个节点所对应视图进行排版,其中,第一数据结构中包括多个节点,多个节点中包括对应于原生视图的节点以及对应于web视图的节点,遍历根据预先保存的多个节点之间的关联关系执行;
显示模块,用于根据排版结果显示原生视图和web视图。
本发明通过构建包括原生视图节点和Web视图节点的数据结构并建立节点之间的关联关系,能够在排版并显示画面时既采用原生视图渲染又采用Web渲染,从而在保证渲染效率和用户体验的同时,降低了开发成本和复杂度,并且还有助于提高应用的开发效率。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是根据本发明实施例的画面显示方法的流程图;
图2是采用根据本发明实施例的画面显示方法渲染后所显示的界面示意图;
图3是根据本发明实施例的画面显示方法所采用的哈希链表的示意图;
图4是根据本发明实施例的画面显示方法中所采用的DOM示意图;
图5是根据本发明实施例的画面显示方法中插入和移除视图的操作示意图;
图6是根据本发明实施例的画面显示方法中对视图进行排版的示意图;
图7是根据本发明实施例的画面显示方法中对插入的视图进行嵌套或非嵌套的流程图;
图8a至图8c是根据本发明实施例的画面显示方法中对多个视图进行叠放显示的示意图;
图9是示出渲染生命周期的流程示意图;
图10是根据本发明实施例的画面显示装置的框图。
具体实施方式
此说明性实施方式的描述应与相应的附图相结合,附图应作为完整的说明书的一部分。在附图中,实施例的形状或是厚度可扩大,并以简化或是方便标示。再者,附图中各结构的部分将以分别描述进行说明,值得注意的是,图中未示出或未通过文字进行说明的元件,为所属技术领域中的普通技术人员所知的形式。
根据本发明的实施例,提供了一种画面显示方法。
如图1所示,根据本发明实施例的画面显示方法包括:
步骤S101,在需要显示画面的情况下,对预先配置的第一数据结构进行遍历,并对所述第一数据结构中各个节点所对应视图进行排版,其中,所述第一数据结构中包括多个节点,所述多个节点中包括对应于原生视图的节点以及对应于web视图的节点,所述遍历根据预先保存的所述多个节点之间的关联关系执行;
步骤S103,根据排版结果显示所述原生视图和web视图。
借助于本发明的方案,能够在IOS或安卓应用原生系统窗口中显示原生视图容器(Layout Container),其中包含原生视图(View)和Webview,且Webview中可以包含原生视图以及其他Webview。
下面将对本发明的各个技术环节进行分别描述。
实现原生视图容器数据结构DOM(Document Object Model,简称为DOM)
在一个实施例中,上述第一数据结构为可以是文档对象模型DOM。此时,可以理解为第一数据结构是DOM。
图4示出了DOM的结构。如图4所示,将终端设备屏幕可视区域抽象为视图DOM,DOM的根节点为继承自系统的原生视图容器,DOM的子节点元素由原生视图和浏览器内核视图构成。
视图DOM由保留插入顺序的链表(LinkedList)和无序哈希表(HashMap)共同构成的,哈希链表(LinkedHashMap)来建立数据结构,衔接节点之间的关系,具有可预知的迭代顺序,此实现提供所有可选的映射操作,加速视图DOM的访问和更新。哈希链表由具有双向(header)访问能力的链表和提供关键字(key)快速索引能力的哈希表混合组成。其中,哈希链表结构如图3所示。
在构建DOM时,应当为每个节点元素建立唯一标识(name),相对于父节点元素的左上角位置(x、y),尺寸(w、h)、外边距(margin)、内边距(padding)等属性。DOM中各个节点所对应的视图之间在内存上相互独立,通过DOM树数据结构建立彼此的等级关系,数据通讯等。
此外,还可以建立视图DOM操作接口开放机制,允许编程代码通过DOM操作用户界面。通过构建DOM的方式,实现了原生视图和浏览器内核视图之间的相互嵌入并堆叠渲染的混合能力,并且能够对设备屏幕用户界面元素的灵活定制和精确控制。
实现插入移除视图控制
在显示第一数据结构(DOM)中各个节点的视图过程中,还可以根据预先配置的第二数据结构,对所述第一数据结构进行节点的增加和/或删除,其中,所述第二数据结构中配置有多个子视图(这里,“子视图”与前面提到的第一数据结构中节点所对应的“视图”从本质上来说可以是相同的,可以同时包括原生视图和Web视图,“子视图”与“视图”的差别仅仅是“子视图”最开始并没有被配置到第一数据结构中,而是在后续进行插入显示的视图),在需要显示所述第二数据结构中子视图的情况下,在所述第一数据结构中增加对应于该子视图的节点;在需要停止显示所述第二数据数据结构中子视图的情况下,从所述第一数据结构中删除对应于该子视图的节点。
进一步地,在需要显示所述第二数据结构中子视图的情况下,如果接收到的插入请求中包含该子视图所依附的目标视图,则在所述第一数据结构中查找该目标视图所对应的节点,并在该节点下增加对应该子视图的子节点。
这样就能够在继承原生系统窗口排版及渲染的基础上,实现了独立的窗口排版算法和渲染管理。
如图5所示,在实际应用中,视图容器通过使用栈(Stack)结合对象数组(Array[])的数据结构(即,上述第二数据结构),实现对子视图元素的栈堆管理并保持内存引用,视图容器理论上可以插入足够多的子视图。
为了进行视图的及时插入,可以建立对视图DOM的全局监听和处理视图状态的存储,在适当的时间更新渲染缓存到设备屏幕。不仅如此,还可以通过出入栈管理所有原生视图和浏览器内核视图在屏幕上的插入和移除,以及实现视图焦点(focus view)控制、状态监听、内存缓存等操作。视图容器可以开放插入操作(insertView)和移除操作(removeView)等API接口,允许Javascript函数调用API将任意视图随时插入和移除,并指定渲染时的动画效果。
实现视图元素fixed定位处理
在一个实施例中,在需要显示所述第二数据结构中子视图的情况下,如果接收到的插入请求中进一步包含该子视图与所依附的目标视图固定显示的指示信息,则在显示所述目标视图时,将所述子视图嵌入所述目标视图中以保持两者的位置相对固定(将两者的位置相对固定是指,当用户操作屏幕进行滚动或平移操作时,子视图会随着目标视图一起运动)。这样,不仅将原生视图完全嵌入浏览器内核视图中,而且还定位在浏览器内核视图其渲染内容中的固定位置,使被插入的视图作为浏览器内核视图DOM的一个元素,跟随浏览器内核视图做滚动或者平移等渲染,彻底将原生视图和浏览器内核视图融为一体。
此外,如果接收到的所述插入请求中进一步包含该子视图不与所依附的目标视图固定显示的指示信息,则在显示所述目标视图时,对所述子视图和所述目标视图进行独立显示(此时,当用户操作屏幕进行滚动或平移操作时,目标视图将进行相应的滚动和平移,而此时子视图的位置将不会变化)。
具体而言,如图7所示,视图DOM在插入视图操作时,允许接收fixed(是否固定)以及fixedOn(被依附的目标视图)请求,获取用户期望的视图嵌套渲染效果;
之后,计算插入视图经排版运算后的位置及尺寸,假设为子视图(RectChild);
接下来,依据fixedOn为键,遍历视图DOM,检索出该被依附的目标视图;
然后,计算目标视图经排版运算后的位置及尺寸,假设为父视图(RectParent);
获取插入视图的绘制画布(canvas)上下文(context),及目标视图的绘制画布上下文,保存于内存,用于后续进行绘制内容的渲染缓存复制;
视图的绘制需实现支持硬件加速;
如果fixed为true,即用户期望插入视图嵌套到目标视图并固定在目标视图中,则将子视图(RectChild)拷贝到父视图(RectParent)区域,并用目标视图(相当于子视图(RectChild)的父节点所对应的视图)的绘制画布上下文进行绘制;通过本实施例,不仅将原生视图完全嵌入浏览器内核视图中,而且还定位(position)在浏览器内核视图其渲染内容中的固定位置(fixed),作为浏览器内核视图DOM的一个元素,跟随浏览器内核视图做滚动或者平移等渲染,彻底将原生视图和浏览器内核视图融为一体;
而如果fixed为false,则保持子视图(RectChild)独立,并使用插入视图的绘制画布上下文进行绘制(即,使用子视图(RectChild)本身的画布);
当设备屏幕触发视图内容滚动操作或滚动绘制操作时,需及时将子视图(RectChild)拷贝到父视图(RectParent),并更新渲染。
此外,参见图2,经过上述设置之后图2中右侧的原生视图M的fixed为true,所以该原生视图将随着其所依附的浏览器内核视图L一起滚动或平移,而最右侧的浏览器内核视图N的fixed为false,所以该浏览器内核视图N将不会跟随其所依附的浏览器内核视图L一起移动或滚动。
实现视图排版算法
在一个实施例中,在对视图进行排版之前,可以首先确定显示画面的区域以及该区域的尺寸;根据所述区域和所述尺寸,确定所述第一数据结构中各节点所对应视图的布局坐标和布局尺寸,并根据所述布局坐标和所述布局尺寸对所述第一数据结构中各节点所对应的视图进行排版。
如图6所示,在实际应用中,可以首先将终端设备屏幕可视区域左上角(0,0)至右下角(w,h)区域定义为可用排版区域;并定义偏移量,内边距,外边距,上边、下边、左边、右边等算法属性,将屏幕抽象为视图矩形空间;
之后,获取用户期望的视图数据,遍历视图DOM,并将数据转换成排版需要的layoutItem对象,再从layoutItem的属性转换成布局坐标top、left、right、bottom,并进行内存缓存;
然后,依据用户期望布局坐标,遍历视图DOM进行子视图丈量运算(measure),得到最终布局坐标(x,y)及尺寸(w,h);
接下来,依据最终布局坐标及尺寸,遍历视图DOM进行排版运算(layout),得到最终排版树(layout dom),该树确定了每个原生视图和浏览器内核视图在屏幕上的最终渲染区域(rect)。
实现视图Z-Order管理
在一个实施例中,根据本发明的图像显示方法还可以根据不同视图的叠放顺序来进行重叠显示。一方面,可以根据所述原生视图和所述web视图所对应节点中包含的叠放顺序信息确定所述原生视图和所述web视图的叠放顺序;另一方面,也可以根据所述原生视图和所述web视图所对应节点的入栈顺序,确定所述原生视图和所述web视图的叠放顺序。这样,能够让视图排版从二维的线性排版支持到三维立体层面,允许视图在z轴上进行灵活有序的交叉叠加,保证了渲染结果的从属关系,以及最终视觉效果上的井然有序
在实际应用中,首先可以根据视图入栈视图DOM的先后顺序,建立视图DOM元素的堆叠顺序(Z-Order);2)、堆叠顺序是当前视图元素在三维空间上,位于z轴上的值,数值越大表明元素的堆叠顺序越高,越靠近设备屏幕;
之后,通过遍历视图DOM的哈希链表(LinkedHashMap),运算得到堆叠顺序的有序列表zOrderList;
然后,可以建立堆叠上下文(Stacking Contex)数据结构,视图元素的堆叠顺序由该上下文联络;
接下来,可以将视图DOM的根节点,原生视图容器定义为堆叠上下文的根元素,最后插入视图DOM的视图将位于屏幕最上方;
在排版的过程中,如图8a所示,若发现视图A和视图B等多个视图存在交叉区域,则依据zOrderList中的顺序依次计算视图A与视图B等多个视图在z轴上的层次关系,在三维空间的Z轴方向上依次给各个视图赋予z-序属性,z-序越大离设备屏幕越近(如图8b所示);通过运算后去除交叉区域的空间,将视图还原回三维空间中的XY轴空间,即平面空间,确定最终的渲染顺序。如图8c所示,假设存在4个视图在z轴上有重合,以距离屏幕由远至近的顺序确定渲染顺序依次为“z-序:0”、“z-序:1”、“z-序:2”、以及“z-序:3”。
不仅如此,在一个具体实施例中,还可以开放bringViewToFront和sendViewToBack以及setViewIndex等API,允许Javascript调用API随时更新原生视图或浏览器内核视图的堆叠顺序;并且,还可以允许浏览器内核视图全局覆盖在原生视图容器上方,即屏幕最上方。
综上所述,根据本发明的一个具体实施例,可以综合以上描述的多个具体实现步骤。参见图9所示的渲染声明周期,在开始渲染后,可以进行丈量运算(measure)、排版(layout)、固定(fixed)等操作,并且确定z轴叠放顺序(z-order),之后,设备硬件进行画布绘制;在运行过程中等待用户的操作,并根据用户操作及时插入视图和移除视图。这样,就能够基于移动终端所搭载原生操作系统的窗口渲染,通过建立原生视图容器,DOM结构,管理视图插入移除占位,视图排版算法,视图Z-Order管理,视图fixed定位处理等技术实现混合渲染。此外,本发明还可以利用基于浏览器内核的引擎技术,帮助用户在不同移动终端操作系统上快速构建跨平台应用。同时,本发明的显示方案还可以多视图窗口的显示,将排版完成后的视图显示在多个视图窗口中,并且支持视图窗口之间的相互切换显示,从而提升应用的用户体验。
根据本发明的实施例,还提供了一种画面显示装置。
如图10所示,根据本发明实施例的画面显示装置包括:
排版模块11,用于在需要显示画面的情况下,对预先配置的第一数据结构进行遍历,并对所述第一数据结构中各个节点所对应视图进行排版,其中,所述第一数据结构中包括多个节点,所述多个节点中包括对应于原生视图的节点以及对应于web视图的节点,所述遍历根据预先保存的所述多个节点之间的关联关系执行;
显示模块12,用于根据排版结果显示所述原生视图和web视图。
其中,根据本发明的画面显示装置可以进一步根据预先配置的第二数据结构,对第一数据结构进行节点的增加和/或删除,其中,第二数据结构中配置有多个子视图,在需要显示第二数据结构中子视图的情况下,在第一数据结构中增加对应于该子视图的节点;在需要停止显示第二数据数据结构中子视图的情况下,从第一数据结构中删除对应于该子视图的节点。
进一步地,在一个实施例中,在需要显示第二数据结构中子视图的情况下,如果接收到的插入请求中包含该子视图所依附的目标视图,则在第一数据结构中查找该目标视图所对应的节点,并在该节点下增加对应该子视图的子节点。
具体而言,在一个实施例中,在需要显示第二数据结构中子视图的情况下,如果接收到的插入请求中进一步包含该子视图与所依附的目标视图固定显示的指示信息,则在显示模块12显示目标视图时,将子视图嵌入目标视图中以保持两者的位置相对固定;或者
如果接收到的插入请求中进一步包含该子视图不与所依附的目标视图固定显示的指示信息,则在显示模块12显示目标视图时,对子视图和目标视图进行独立显示。
此外,在一个实施例中,在对第一数据结构中各个节点所对应视图进行排版之前,根据本发明的画面显示装置可以预先确定需要显示画面的区域以及该区域的尺寸;
根据区域和尺寸,确定第一数据结构中各节点所对应视图的布局坐标和布局尺寸,并根据布局坐标和布局尺寸对第一数据结构中各节点所对应的视图进行排版。
此外,在一个实施例中,在显示原生视图和web视图时,根据本发明的画面显示装置可以根据原生视图和web视图的叠放顺序进行显示。具体而言,根据本发明的画面显示装置可以根据原生视图和web视图所对应节点中包含的叠放顺序信息、或者根据原生视图和web视图所对应节点的入栈顺序,确定原生视图和web视图的叠放顺序。
此外,在根据排版结果显示原生视图和web视图时,可以在一个或多个视图窗口中进行显示。在多个视图窗口显示时,可以根据用户输入的指令在多个视图窗口之间进行切换。
可选地,上述第一数据结构中的每个节点包括以下信息:该节点的唯一标识、该节点所对应视图的类型、该节点所对应视图的参数;对于第一数据结构中的子节点,该节点进一步包括其父节点的位置信息。
可选地,第一数据结构中多个节点之间的关联关系通过链表和/或无序哈希表进行保存。
可选地,第一数据结构为文档对象模型DOM。
综上所述,本发明能够重新组建移动终端的用户界面排版渲染方式,实现了由原生视图和浏览器内核视图共同构成的混合渲染,克服了单纯基于原生视图或web视图渲染存在的弊端,明显提高应用开发速度和应用运行效率,避免卡顿,提高了人机交互性以及用户体验。本发明可借助于模块化程序的设计机制,支持通过Java、Object-C等语言向Javascript扩展接口,可以通过Javascript控制混合视图的排版区域,渲染生命周期,渲染顺序,原生动画效果等属性,以及原生视图和浏览器内核视图之间的交互,层次关系等;本发明还支持硬件加速;支持原生视图完全定位(fixed)嵌入浏览器内核视图中,作为浏览器内核视图的一个元素,跟随其做滚动或者平移等渲染。
以上所述仅为本发明的较佳实施例而已,并不用以限制本发明,凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。

Claims (10)

1.一种画面显示方法,其特征在于,包括:
在需要显示画面的情况下,对预先配置的第一数据结构进行遍历,并对所述第一数据结构中各个节点所对应视图进行排版,其中,所述第一数据结构中包括多个节点,所述多个节点中包括对应于原生视图的节点以及对应于web视图的节点,所述遍历根据预先保存的所述多个节点之间的关联关系执行;
根据排版结果显示所述原生视图和web视图。
2.根据权利要求1所述的画面显示方法,其特征在于,进一步包括:
根据预先配置的第二数据结构,对所述第一数据结构进行节点的增加和/或删除,其中,所述第二数据结构中配置有多个子视图,在需要显示所述第二数据结构中子视图的情况下,在所述第一数据结构中增加对应于该子视图的节点;在需要停止显示所述第二数据数据结构中子视图的情况下,从所述第一数据结构中删除对应于该子视图的节点。
3.根据权利要求2所述的画面显示方法,其特征在于,在需要显示所述第二数据结构中子视图的情况下,如果接收到的插入请求中包含该子视图所依附的目标视图,则在所述第一数据结构中查找该目标视图所对应的节点,并在该节点下增加对应该子视图的子节点。
4.根据权利要求3所述的画面显示方法,其特征在于,在需要显示所述第二数据结构中子视图的情况下,如果接收到的插入请求中进一步包含该子视图与所依附的目标视图固定显示的指示信息,则在显示所述目标视图时,将所述子视图嵌入所述目标视图中以保持两者的位置相对固定;或者
如果接收到的所述插入请求中进一步包含该子视图不与所依附的目标视图固定显示的指示信息,则在显示所述目标视图时,对所述子视图和所述目标视图进行独立显示。
5.根据权利要求1所述的画面显示方法,其特征在于,进一步包括:
在对所述第一数据结构中各个节点所对应视图进行排版之前,确定需要显示画面的区域以及该区域的尺寸;
根据所述区域和所述尺寸,确定所述第一数据结构中各节点所对应视图的布局坐标和布局尺寸,并根据所述布局坐标和所述布局尺寸对所述第一数据结构中各节点所对应的视图进行排版。
6.根据权利要求1所述的画面显示方法,其特征在于,进一步包括:
在显示所述原生视图和web视图时,根据所述原生视图和所述web视图的叠放顺序进行显示。
7.根据权利要求6所述的画面显示方法,其特征在于,进一步包括:
根据所述原生视图和所述web视图所对应节点中包含的叠放顺序信息、或者根据所述原生视图和所述web视图所对应节点的入栈顺序,确定所述原生视图和所述web视图的叠放顺序。
8.根据权利要求1至7中任一项所述的画面显示方法,其特征在于,在根据排版结果显示所述原生视图和web视图时,在多个视图窗口中进行显示,并且根据指令在所述多个视图窗口之间进行切换。
9.根据权利要求1至7中任一项所述的画面显示方法,其特征在于,
所述第一数据结构中的每个节点包括以下信息:该节点的唯一标识、该节点所对应视图的类型、该节点所对应视图的参数;对于所述第一数据结构中的子节点,该节点进一步包括其父节点的位置信息;
所述第一数据结构中多个节点之间的关联关系通过链表和/或无序哈希表进行保存;
所述第一数据结构为文档对象模型DOM。
10.一种画面显示装置,其特征在于,包括:
排版模块,用于在需要显示画面的情况下,对预先配置的第一数据结构进行遍历,并对所述第一数据结构中各个节点所对应视图进行排版,其中,所述第一数据结构中包括多个节点,所述多个节点中包括对应于原生视图的节点以及对应于web视图的节点,所述遍历根据预先保存的所述多个节点之间的关联关系执行;
显示模块,用于根据排版结果显示所述原生视图和web视图。
CN201610819794.3A 2016-09-13 2016-09-13 画面显示方法和装置 Active CN106445284B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610819794.3A CN106445284B (zh) 2016-09-13 2016-09-13 画面显示方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610819794.3A CN106445284B (zh) 2016-09-13 2016-09-13 画面显示方法和装置

Publications (2)

Publication Number Publication Date
CN106445284A true CN106445284A (zh) 2017-02-22
CN106445284B CN106445284B (zh) 2019-04-23

Family

ID=58168799

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610819794.3A Active CN106445284B (zh) 2016-09-13 2016-09-13 画面显示方法和装置

Country Status (1)

Country Link
CN (1) CN106445284B (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108427590A (zh) * 2018-02-09 2018-08-21 福建星网锐捷通讯股份有限公司 一种ui动态布局的实现方法
CN109063202A (zh) * 2018-09-13 2018-12-21 北京三快在线科技有限公司 在混合界面应用中实现弹窗的方法、装置以及计算机设备
CN109558159A (zh) * 2018-12-11 2019-04-02 网易(杭州)网络有限公司 游戏中用户界面的更新方法和装置
CN113436344A (zh) * 2021-06-25 2021-09-24 广联达科技股份有限公司 一种引用视图的显示方法、系统及图像显示设备
WO2023083071A1 (zh) * 2021-11-11 2023-05-19 北京沃东天骏信息技术有限公司 视图交互方法、装置、电子设备及计算机可读介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060026558A1 (en) * 2004-07-19 2006-02-02 Joerg Beringer Hybrid contextual floor plans for object instances
CN102665128A (zh) * 2012-04-27 2012-09-12 北京人民广播电台 时间轴形式的内容定制方法和装置
US20130253963A1 (en) * 2012-03-22 2013-09-26 Lunar Cow Design Interactive mapping system and related methods
WO2013143878A3 (en) * 2012-03-27 2013-12-12 Telefonica, S.A. A method and a system to generate personalized selection of items for a given user in an online computing system
CN104050274A (zh) * 2014-06-25 2014-09-17 国家电网公司 一种html页面嵌套方法及装置
CN105205077A (zh) * 2014-06-25 2015-12-30 广州市动景计算机科技有限公司 页面排版方法、装置及系统

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060026558A1 (en) * 2004-07-19 2006-02-02 Joerg Beringer Hybrid contextual floor plans for object instances
US20130253963A1 (en) * 2012-03-22 2013-09-26 Lunar Cow Design Interactive mapping system and related methods
WO2013143878A3 (en) * 2012-03-27 2013-12-12 Telefonica, S.A. A method and a system to generate personalized selection of items for a given user in an online computing system
CN102665128A (zh) * 2012-04-27 2012-09-12 北京人民广播电台 时间轴形式的内容定制方法和装置
CN104050274A (zh) * 2014-06-25 2014-09-17 国家电网公司 一种html页面嵌套方法及装置
CN105205077A (zh) * 2014-06-25 2015-12-30 广州市动景计算机科技有限公司 页面排版方法、装置及系统

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108427590A (zh) * 2018-02-09 2018-08-21 福建星网锐捷通讯股份有限公司 一种ui动态布局的实现方法
CN108427590B (zh) * 2018-02-09 2021-02-05 福建星网锐捷通讯股份有限公司 一种ui动态布局的实现方法
CN109063202A (zh) * 2018-09-13 2018-12-21 北京三快在线科技有限公司 在混合界面应用中实现弹窗的方法、装置以及计算机设备
CN109063202B (zh) * 2018-09-13 2022-01-25 北京三快在线科技有限公司 在混合界面应用中实现弹窗的方法、装置以及计算机设备
CN109558159A (zh) * 2018-12-11 2019-04-02 网易(杭州)网络有限公司 游戏中用户界面的更新方法和装置
CN109558159B (zh) * 2018-12-11 2022-02-15 网易(杭州)网络有限公司 游戏中用户界面的更新方法和装置
CN113436344A (zh) * 2021-06-25 2021-09-24 广联达科技股份有限公司 一种引用视图的显示方法、系统及图像显示设备
WO2023083071A1 (zh) * 2021-11-11 2023-05-19 北京沃东天骏信息技术有限公司 视图交互方法、装置、电子设备及计算机可读介质

Also Published As

Publication number Publication date
CN106445284B (zh) 2019-04-23

Similar Documents

Publication Publication Date Title
CN106445284A (zh) 画面显示方法和装置
CN109710909B (zh) 内容获取方法、装置、终端及存储介质
CN110096277A (zh) 一种动态页面展示方法、装置、电子设备及存储介质
CN103870558B (zh) 页面渲染方法和遮罩层创建方法
CN101493751B (zh) 一种嵌入式图形系统的多窗口管理器
CN102467488A (zh) 一种文字处理文档异步加载的方法
CN104995622B (zh) 用于图形函数的合成器支持
CN101276275A (zh) 一种针对机顶盒的软件开发可视化编辑方法
CN103473041B (zh) 一种可视化的数据处理方法及系统
CN106648608A (zh) 一种灵活方便的流程图构建方法
AU2015315608B2 (en) Layout engine
CN106162302B (zh) 一种Launcher主界面的编排方法、装置及智能电视
CN105786301A (zh) 多窗口系统下切换显示对象的方法及其装置
US7409642B2 (en) Method and system for applying user interface elements to data
CN107438194A (zh) 一种智能电视ui对象绘制方法及智能电视
CN114780077A (zh) 网页可视化编辑的装置及方法
CN112445400A (zh) 视觉图形创建方法、装置、终端及计算机可读存储介质
CN106649725A (zh) 一种页面切换方法及装置
CN108920143A (zh) 一种用于人机交互软件的快速开发方法
Wenhua et al. Studies on visual scene process system of aircraft assembly
JP2003122567A (ja) 多次元プログラミング装置及び多次元プログラミング方法。
CN103246426A (zh) 一种实现对多个图标进行处理的方法及装置
CN107038176B (zh) 网络图页面渲染方法、装置及设备
CN102801936A (zh) 实现在屏显示的方法
JP2022113626A (ja) レンダリング方法、装置、電子機器及び記憶媒体

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant
TR01 Transfer of patent right

Effective date of registration: 20190423

Address after: Fourth Floor, F Block, East Gate, Cultural and Educational Industrial Park, No. 44 North Third Ring Road, Haidian District, Beijing, 100000

Patentee after: Grapefruit (Beijing) Mobile Technology Co., Ltd.

Address before: 100000 Taixiang Business Building 508, No. 1 Longxiang Road, Haidian District, Beijing

Patentee before: Pomelo (Beijing) Technology Co., Ltd.

TR01 Transfer of patent right
TR01 Transfer of patent right

Effective date of registration: 20211105

Address after: 100094 No. 68 North Qing Road, Beijing, Haidian District

Patentee after: YONYOU NETWORK TECHNOLOGY Co.,Ltd.

Address before: Fourth Floor, F Block, East Gate, Cultural and Educational Industrial Park, No. 44 North Third Ring Road, Haidian District, Beijing, 100000

Patentee before: POMELO(BEIJING)MOBILE TECHNOLOGY CO.,LTD.

TR01 Transfer of patent right