发明内容
针对相关技术中的问题,本发明提出一种画面显示方法和装置,既能够降低成本和复杂度,同时也能够克服渲染滞后的缺陷。
根据本发明的一个方面,提供了一种画面显示方法。
根据本发明的画面显示方法包括:
在需要显示画面的情况下,对预先配置的第一数据结构进行遍历,并对第一数据结构中各个节点所对应视图进行排版,其中,第一数据结构中包括多个节点,多个节点中包括对应于原生视图的节点以及对应于web视图的节点,遍历根据预先保存的多个节点之间的关联关系执行;
根据排版结果显示原生视图和web视图。
其中,根据本发明的画面显示方法可以进一步包括:
根据预先配置的第二数据结构,对第一数据结构进行节点的增加和/或删除,其中,第二数据结构中配置有多个子视图,在需要显示第二数据结构中子视图的情况下,在第一数据结构中增加对应于该子视图的节点;在需要停止显示第二数据数据结构中子视图的情况下,从第一数据结构中删除对应于该子视图的节点。
进一步地,在需要显示第二数据结构中子视图的情况下,如果接收到的插入请求中包含该子视图所依附的目标视图,则在第一数据结构中查找该目标视图所对应的节点,并在该节点下增加对应该子视图的子节点。
具体而言,在需要显示第二数据结构中子视图的情况下,如果接收到的插入请求中进一步包含该子视图与所依附的目标视图固定显示的指示信息,则在显示目标视图时,将子视图嵌入目标视图中以保持两者的位置相对固定;或者
如果接收到的插入请求中进一步包含该子视图不与所依附的目标视图固定显示的指示信息,则在显示目标视图时,对子视图和目标视图进行独立显示。
此外,根据本发明的画面显示方法可以进一步包括:
在对第一数据结构中各个节点所对应视图进行排版之前,确定需要显示画面的区域以及该区域的尺寸;
根据区域和尺寸,确定第一数据结构中各节点所对应视图的布局坐标和布局尺寸,并根据布局坐标和布局尺寸对第一数据结构中各节点所对应的视图进行排版。
此外,根据本发明的画面显示方法可以进一步包括:
在显示原生视图和web视图时,根据原生视图和web视图的叠放顺序进行显示。
此外,根据本发明的画面显示方法可以进一步包括:
根据原生视图和web视图所对应节点中包含的叠放顺序信息、或者根据原生视图和web视图所对应节点的入栈顺序,确定原生视图和web视图的叠放顺序。
此外,在根据排版结果显示原生视图和web视图时,在多个视图窗口中进行显示,并且根据指令在多个视图窗口之间进行切换。
可选地,上述第一数据结构中的每个节点包括以下信息:该节点的唯一标识、该节点所对应视图的类型、该节点所对应视图的参数;对于第一数据结构中的子节点,该节点进一步包括其父节点的位置信息。
可选地,第一数据结构中多个节点之间的关联关系通过链表和/或无序哈希表进行保存。
可选地,第一数据结构为文档对象模型DOM。
根据本发明的另一个方面,提供了一种画面显示装置。
根据本发明实施例的画面显示装置包括:
排版模块,用于在需要显示画面的情况下,对预先配置的第一数据结构进行遍历,并对第一数据结构中各个节点所对应视图进行排版,其中,第一数据结构中包括多个节点,多个节点中包括对应于原生视图的节点以及对应于web视图的节点,遍历根据预先保存的多个节点之间的关联关系执行;
显示模块,用于根据排版结果显示原生视图和web视图。
本发明通过构建包括原生视图节点和Web视图节点的数据结构并建立节点之间的关联关系,能够在排版并显示画面时既采用原生视图渲染又采用Web渲染,从而在保证渲染效率和用户体验的同时,降低了开发成本和复杂度,并且还有助于提高应用的开发效率。
具体实施方式
此说明性实施方式的描述应与相应的附图相结合,附图应作为完整的说明书的一部分。在附图中,实施例的形状或是厚度可扩大,并以简化或是方便标示。再者,附图中各结构的部分将以分别描述进行说明,值得注意的是,图中未示出或未通过文字进行说明的元件,为所属技术领域中的普通技术人员所知的形式。
根据本发明的实施例,提供了一种画面显示方法。
如图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)嵌入浏览器内核视图中,作为浏览器内核视图的一个元素,跟随其做滚动或者平移等渲染。
以上所述仅为本发明的较佳实施例而已,并不用以限制本发明,凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。