旋屏界面展示方法及装置制造方法
【专利摘要】一种旋屏界面展示方法，包括：获取起始旋屏事件，获取界面窗口，获取所述界面窗口的界面截图；根据所述界面截图生成遮挡视图并添加到所述界面窗口中；获取界面视图，将所述界面视图由所述界面窗口移除，并将所述界面视图缓存；获取结束旋屏事件，获取缓存的界面视图，将所述界面视图重绘并添加到所述界面窗口中，所述遮挡视图遮挡所述由缓存获取到的界面视图；将所述遮挡视图由所述界面窗口移除。此外，还提供了一种旋屏界面展示装置。上述旋屏界面展示方法及装置能够提高展示速度。
【专利说明】旋屏界面展示方法及装置
【技术领域】
[0001]本发明涉及移动互联网【技术领域】，特别是涉及一种旋屏界面展示方法及装置。
【背景技术】
[0002]随着移动互联网技术的发展，智能终端已得到广泛应用，例如智能手机、平板电脑等。智能终端通常具有一定长宽比(通常为4:3和16:9)的显示屏。由于智能终端的便携性，当智能终端在旋转90度时，可根据智能终端的旋转方向展示旋屏界面，即将显示屏内的显示内容在旋转方向上相应地旋转90度。
[0003]例如，在IOS系统中，可通过HWebView等界面视图组件加载、解析、排版和渲染显示界面，当智能终端旋屏90度时，则可根据屏幕尺寸重新排版界面内容。
[0004]然而，传统技术中，对于显示内容较多的界面，例如链接较多的门户网站的网页界面，在旋屏时，界面视图需要花费大量时间根据屏幕尺寸对界面内容重新排版和渲染后，再展示旋屏界面，使得旋屏界面展示的速度较慢，从而影响用户体验。
【发明内容】
[0005]基于此，有必要提供一种能提高展示速度的旋屏界面展示方法。
[0006]一种旋屏界面展示方法，包括:
[0007]获取起始旋屏事件，获取界面窗口，获取所述界面窗口的界面截图；
[0008]根据所述界面截图生成遮挡视图并添加到所述界面窗口中；
[0009]获取界面视图，将所述界面视图由所述界面窗口移除，并将所述界面视图缓存；
[0010]获取结束旋屏事件，获取缓存的界面视图，将所述界面视图重绘并添加到所述界面窗口中，所述遮挡视图遮挡所述由缓存获取到的界面视图；
[0011]将所述遮挡视图由所述界面窗口移除。
[0012]此外，还有必要提供一种能提高展示速度的旋屏界面展示装置。
[0013]一种旋屏界面展示装置，包括:
[0014]界面截图获取模块，用于获取起始旋屏事件，获取界面窗口，获取所述界面窗口的界面截图；
[0015]遮挡视图生成模块，用于根据所述界面截图生成遮挡视图并添加到所述界面窗口中；
[0016]界面视图移除模块，用于获取界面视图，将所述界面视图由所述界面窗口移除，并将所述界面视图缓存；
[0017]界面视图重绘模块，用于获取结束旋屏事件，获取缓存的界面视图，将所述界面视图重绘并添加到所述界面窗口中，所述遮挡视图遮挡所述由缓存获取到的界面视图；
[0018]遮挡视图移除模块，用于将所述遮挡视图由所述界面窗口移除。
[0019]上述旋屏界面展示方法及装置，在起始旋屏事件触发时，没有先等待界面窗口中的界面视图重绘完毕后再展示旋屏动画，而是通过获取界面窗口的界面截图，并根据界面截图生成遮挡视图来代替界面视图的可视效果。且在结束旋屏事件触发时重绘界面视图，然后移除遮挡视图，使得旋屏过程中的可视效果与传统技术的可视效果相同。由于获取界面截图并生成遮挡视图的时间损耗远远小于重绘界面视图的时间损耗，使得展示速度得到了提闻，从而提闻了用户体验。
【专利附图】
【附图说明】
[0020]图1为一个实施例中旋屏界面展示方法的流程图；
[0021]图2为一个实施例中智能终端竖屏状态的界面效果图；
[0022]图3为一个实施例中智能终端横屏状态的界面效果图；
[0023]图4为另一个实施例中智能终端横屏状态的界面效果图；
[0024]图5为一个实施例中旋屏界面展示装置的结构示意图。
【具体实施方式】
[0025]在一个实施例中，如图1所示，一种旋屏界面展示方法，包括以下步骤:
[0026]步骤S102，获取起始旋屏事件，获取界面窗口，获取界面窗口的界面截图。
[0027]界面窗口即智能终端中用于展示应用的显示内容的窗口。如图2和图3所示，智能终端的显示区域内通常包括任务栏和界面窗口两部分，任务栏显示显示操作系统信息；界面窗口则显示应用的显示内容(如图2和图3中的网页内容)。
[0028]起始旋屏事件即对智能终端进行旋转操作后，智能终端在开始旋转显示屏中的界面窗口之前触发的事件。起始旋屏事件对应有相应的事件处理函数。可通过事件处理函数调用系统提供的截图函数截取界面窗口的界面截图。
[0029]例如，在IOS 系统中，函数 WillAnimateRotationToInterfaceOrientation (以下简称起始旋屏事件响应函数)即为与捕获到的起始旋屏事件对应的事件处理函数。可通过在该事件处理函数调用IOS系统提供的截图函数来截取界面截图。
[0030]步骤S104，根据界面截图生成遮挡视图并添加到界面窗口中。
[0031]在智能终端的操作系统中，界面内容的展示对象以界面视图的形式存在。例如，在IOS系统中在展示网页内容时，其展示对象即为nWebView组件。遮挡视图即位于界面视图上层且用于遮挡界面视图的视图层。
[0032]在一个实施例中，可通过预设的视图层级设置函数设置遮挡视图与界面视图的层级关系，从而使得遮挡视图能够将界面视图遮挡。例如，可通过设置遮挡视图和界面视图的层级关系来使遮挡视图位于界面视图的上层，从而将其遮挡。
[0033]在一个实施例中，根据旋转后的界面截图生成遮挡视图的步骤之前还可获取显示屏的长宽比，根据长宽比调整界面截图。
[0034]在本实施例中，根据长宽比调整界面截图的步骤可具体为:根据长宽比对界面截图进行拉伸处理。
[0035]例如，如图2和图3所示，若捕获到起始旋转事件时，智能终端处于竖屏状态(即智能终端由竖屏状态向横屏状态旋转)，则可将界面截图按照获取到的显示屏的长宽比进行拉伸，使得界面截图的宽度由显示屏的宽度扩展至显示屏的长度。同样，若智能终端由横屏状态向竖屏状态旋转，则将界面截图的宽度由显示屏的长度收缩至显示屏的宽度。[0036]在另一个实施例中，根据长宽比调整界面截图的步骤可具体为:根据长宽比对界面截图进行对称补白，并将界面截图居中。
[0037]例如，如图2和图4所示，若捕获到起始旋转事件时，智能终端处于竖屏状态(即智能终端由竖屏状态向横屏状态旋转)，则可通过对界面截图进行对称补白后使其宽度由显示屏的宽度扩展至显示屏的长度，并将界面截图居中。需要说明的是，对称补白所使用的背景色可以是任意颜色、背景图等。
[0038]经过拉伸或居中处理的界面截图即可完整地模拟旋转后界面视图，且可将界面视图完全遮挡。
[0039]步骤S106，获取界面视图，将界面视图由界面窗口移除，并将界面视图缓存。
[0040]将界面视图由界面窗口移除，可以使智能终端不需要花费时间开始重新绘制界面视图中的显示内容而直接展示旋屏的动画。也就是说，界面窗口在添加了遮挡视图并移除了界面视图之后，可立即显示与该遮挡视图的旋屏动画，而不用等待界面视图重绘完成后再将其整体显示，从而加快了展示速度。
[0041]可预定义用于缓存的全局变量，通过将界面视图赋值给该全局变量将其缓存。
[0042]步骤S108，获取结束旋屏事件，获取缓存的界面视图，将界面视图重绘并添加到界面窗口中，遮挡视图遮挡由缓存获取到的界面视图。
[0043]结束旋屏事件即界面窗口停止旋转时触发的事件。结束旋屏事件同样也对应有相应的事件处理函数。在一个实施例中，可通过事件处理函数获取全局变量的值来获取缓存的界面视图。
[0044]在一个实施例中，将界面视图重绘的步骤可具体为:根据长宽比重绘界面视图。
[0045]本实施例中，生成遮挡视图时对界面截图的操作为拉伸处理，则可通过将界面视图对应的显示内容中各显示元素的横坐标和纵坐标均乘以长宽比来生成界面视图，从而使得生成的界面视图的可视效果与拉伸后的界面截图相同。
[0046]在另一个实施例中，生成遮挡视图时对界面截图的操作为居中处理，则可先根据长宽比在显示内容两侧生成对称的补白元素，使其显示内容和补白元素的宽度之和为显示屏的长度。然后通过将界面视图对应的显示内容中各显示元素的横坐标平移补白元素的宽度值来生成界面视图。需要说明的是，补白元素对应的补白颜色与前述的对称补白所采用的背景色、背景图一致。
[0047]将由缓存获取到的界面视图添加到界面窗口中的步骤之前可获取遮挡视图的层级。可根据获取到的遮挡视图的层级将界面视图添加到界面窗口中，且使得遮挡视图遮挡由缓存获取到的界面视图。也就是说，在将界面视图添加到界面窗口中的过程中，可通过层级设置函数将界面视图置于遮挡视图的下层，使得遮挡视图遮挡由缓存获取到的界面视图。
[0048]步骤S110，将遮挡视图由界面窗口移除。
[0049]在一个实施例中，在将遮挡视图由界面窗口移除的步骤之前还可等待界面视图重绘完毕，使得遮挡视图和界面视图的显示效果的替换实现无缝连接，从而让用户无法感觉到遮挡视图的存在，使得整个过程透明化。
[0050]在一个实施例中，如图5所示，一种旋屏界面展示装置，包括界面截图获取模块102、遮挡视图生成模块104、界面视图移除模块106、界面视图重绘模块108以及遮挡视图移除模块110，其中:
[0051]界面截图获取模块102，用于获取起始旋屏事件，获取界面窗口，获取界面窗口的界面截图。
[0052]界面窗口即智能终端中用于展示应用的显示内容的窗口。如图2和图3所示，智能终端的显示区域内通常包括任务栏和界面窗口两部分，任务栏显示显示操作系统信息；界面窗口则显示应用的显示内容(如图2和图3中的网页内容)。
[0053]起始旋屏事件即对智能终端进行旋转操作后，智能终端在开始旋转显示屏中的界面窗口之前触发的事件。起始旋屏事件对应有相应的事件处理函数。界面截图获取模块102可用于通过事件处理函数调用系统提供的截图函数截取界面窗口的界面截图。
[0054]例如，在IOS 系统中，函数 WillAnimateRotationToInterfaceOrientation (以下简称起始旋屏事件响应函数)即为与捕获到的起始旋屏事件对应的事件处理函数。可通过在该事件处理函数调用IOS系统提供的截图函数来截取界面截图。
[0055]遮挡视图生成模块104，用于根据界面截图生成遮挡视图并添加到界面窗口中。
[0056]在智能终端的操作系统中，界面内容的展示对象以界面视图的形式存在。例如，在IOS系统中在展示网页内容时，其展示对象即为nWebView组件。遮挡视图即位于界面视图上层且用于遮挡界面视图的视图层。
[0057]在一个实施例中，遮挡视图生成模块104可用于通过预设的视图层级设置函数设置遮挡视图与界面视图的层级关系，从而使得遮挡视图能够将界面视图遮挡。例如，可通过设置遮挡视图和界面视图的层级关系来使遮挡视图位于界面视图的上层，从而将其遮挡。
[0058]在一个实施例中，遮挡视图生成模块104还可用于可获取显示屏的长宽比，根据长宽比调整界面截图。
[0059]在本实施例中，遮挡视图生成模块104还可用于根据长宽比对界面截图进行拉伸处理。
[0060]例如，如图2和图3所示，若捕获到起始旋转事件时，智能终端处于竖屏状态(即智能终端由竖屏状态向横屏状态旋转)，则可将界面截图按照获取到的显示屏的长宽比进行拉伸，使得界面截图的宽度由显示屏的宽度扩展至显示屏的长度。同样，若智能终端由横屏状态向竖屏状态旋转，则将界面截图的宽度由显示屏的长度收缩至显示屏的宽度。
[0061]在另一个实施例中，遮挡视图生成模块104还可用于根据长宽比对界面截图进行对称补白，并将界面截图居中。
[0062]例如，如图2和图4所示，若捕获到起始旋转事件时，智能终端处于竖屏状态(即智能终端由竖屏状态向横屏状态旋转)，则可通过对界面截图进行对称补白后使其宽度由显示屏的宽度扩展至显示屏的长度，并将界面截图居中。需要说明的是，对称补白所使用的背景色可以是任意颜色、背景图等。
[0063]经过拉伸或居中处理的界面截图即可完整地模拟旋转后界面视图，且可将界面视图完全遮挡。
[0064]界面视图移除模块106，用于获取界面视图，将界面视图由界面窗口移除，并将界面视图缓存。
[0065]将界面视图由界面窗口移除，可以使智能终端不需要花费时间开始重新绘制界面视图中的显示内容而直接展示旋屏的动画。也就是说，界面窗口在添加了遮挡视图并移除了界面视图之后，可立即显示与该遮挡视图的旋屏动画，而不用等待界面视图重绘完成后再将其整体显示，从而加快了展示速度。
[0066]界面视图移除模块106还可用于预定义用于缓存的全局变量，通过将界面视图赋值给该全局变量将其缓存。
[0067]界面视图重绘模块108，用于获取结束旋屏事件，获取缓存的界面视图，将界面视图重绘并添加到界面窗口中，遮挡视图遮挡由缓存获取到的界面视图。
[0068]结束旋屏事件即界面窗口停止旋转时触发的事件。结束旋屏事件同样也对应有相应的事件处理函数。在一个实施例中，界面视图重绘模块108可用于通过事件处理函数获取全局变量的值来获取缓存的界面视图。
[0069]在一个实施例中，界面视图重绘模块108用于根据长宽比重绘界面视图。
[0070]本实施例中，生成遮挡视图时对界面截图的操作为拉伸处理，则界面视图重绘模块108可用于通过将界面视图对应的显示内容中各显示元素的横坐标和纵坐标均乘以长宽比来生成界面视图，从而使得生成的界面视图的可视效果与拉伸后的界面截图相同。
[0071]在另一个实施例中，生成遮挡视图时对界面截图的操作为居中处理，则界面视图重绘模块108可用于可先根据长宽比在显示内容两侧生成对称的补白元素，使其显示内容和补白元素的宽度之和为显示屏的长度。然后通过将界面视图对应的显示内容中各显示元素的横坐标平移补白元素的宽度值来生成界面视图。需要说明的是，补白元素对应的补白颜色与前述的对称补白所采用的背景色、背景图一致。
[0072]界面视图重绘模块108还可用于获取遮挡视图的层级，根据获取到的遮挡视图的层级将界面视图添加到界面窗口中，且使得遮挡视图遮挡由缓存获取到的界面视图。也就是说，在将界面视图添加到界面窗口中的过程中，界面视图重绘模块108可用于通过层级设置函数将界面视图置于遮挡视图的下层，使得遮挡视图遮挡由缓存获取到的界面视图。
[0073]遮挡视图移除模块110，用于将遮挡视图由界面窗口移除。
[0074]在一个实施例中，遮挡视图移除模块110还可用于先等待界面视图重绘完毕，再将遮挡视图由界面窗口移除，使得遮挡视图和界面视图的显示效果的替换实现无缝连接，从而让用户无法感觉到遮挡视图的存在，使得整个过程透明化。
[0075]上述旋屏界面展示方法及装置，在起始旋屏事件触发时，没有先等待界面窗口中的界面视图重绘完毕后再展示旋屏动画，而是通过获取界面窗口的界面截图，并根据界面截图生成遮挡视图来代替界面视图的可视效果。且在结束旋屏事件触发时重绘界面视图，然后移除遮挡视图，使得旋屏过程中的可视效果与传统技术的可视效果相同。由于获取界面截图并生成遮挡视图的时间损耗远远小于重绘界面视图的时间损耗，使得展示速度得到了提闻，从而提闻了用户体验。
[0076]本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory, ROM)或随机存储记忆体(Random AccessMemory, RAM)等。
[0077]以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。
【权利要求】
1.一种旋屏界面展示方法，包括: 获取起始旋屏事件，获取界面窗口，获取所述界面窗口的界面截图； 根据所述界面截图生成遮挡视图并添加到所述界面窗口中； 获取界面视图，将所述界面视图由所述界面窗口移除，并将所述界面视图缓存； 获取结束旋屏事件，获取缓存的界面视图，将所述界面视图重绘并添加到所述界面窗口中，所述遮挡视图遮挡所述由缓存获取到的界面视图； 将所述遮挡视图由所述界面窗口移除。
2.根据权利要求1所述的旋屏界面展示方法，其特征在于，所述根据所述旋转后的界面截图生成遮挡视图的步骤之前可包括: 获取显示屏的长宽比； 根据所述长宽比调整所述界面截图。
3.根据权利要求2所述的旋屏界面展示方法，其特征在于，所述根据所述长宽比调整所述界面截图的步骤为: 根据所述长宽比对所述界面截图进行拉伸处理。
4.根据权利要求2所述的旋屏界面展示方法，其特征在于，所述根据所述长宽比调整所述界面截图的步骤为: 根据所述长宽比对所述界面截图进行对称补白，并将所述界面截图居中。
5.根据权利要求1至4任一项所述的旋屏界面展示方法，其特征在于，所述将所述界面视图重绘的步骤为: 根据所述长宽比重绘界面视图。
6.一种旋屏界面展示装置，其特征在于，包括: 界面截图获取模块，用于获取起始旋屏事件，获取界面窗口，获取所述界面窗口的界面截图； 遮挡视图生成模块，用于根据所述界面截图生成遮挡视图并添加到所述界面窗口中；界面视图移除模块，用于获取界面视图，将所述界面视图由所述界面窗口移除，并将所述界面视图缓存； 界面视图重绘模块，用于获取结束旋屏事件，获取缓存的界面视图，将所述界面视图重绘并添加到所述界面窗口中，所述遮挡视图遮挡所述由缓存获取到的界面视图； 遮挡视图移除模块，用于将所述遮挡视图由所述界面窗口移除。
7.根据权利要求6所述的旋屏界面展示装置，其特征在于，所述遮挡视图生成模块还用于获取显示屏的长宽比，根据所述长宽比调整所述界面截图。
8.根据权利要求7所述的旋屏界面展示装置，其特征在于，所述遮挡视图生成模块还用于根据所述长宽比对所述界面截图进行拉伸处理。
9.根据权利要求7所述的旋屏界面展示装置，其特征在于，所述遮挡视图生成模块还用于根据所述长宽比对所述界面截图进行对称补白，并将所述界面截图居中。
10.根据权利要求6至9任一项所述的旋屏界面展示装置，其特征在于，所述界面视图重绘模块还用于根据所述长宽比重绘界面视图。
【文档编号】G06F3/0481GK103970397SQ201310037568
【公开日】2014年8月6日 申请日期:2013年1月30日 优先权日:2013年1月30日
【发明者】李慧, 许峰峰, 苏瑞 申请人:腾讯科技（深圳）有限公司