CN108052546A - 一种在移动终端浏览图片的方法及移动终端 - Google Patents

Abstract

本发明公开一种在移动终端浏览图片的方法及移动终端，其中，方法包括步骤：创建容器，在所述容器内添加图片展示单元；根据外部调用者的图片地址，将缩略图对应的图片下载并保存至本地；根据图片尺寸和/或清晰度对所述图片进行分级；当接收到对缩略图的浏览指令时，在图片展示单元中加载所需级别的图片。通过本发明方法浏览图片，用户可以根据自身的需要查看各级别质量的图片。通过本发明还可以在图片浏览进场以及浏览退场时提供动画效果，提升操作的流畅性。

Description

一种在移动终端浏览图片的方法及移动终端

技术领域

本发明涉及互联网移动终端应用技术领域，尤其涉及一种在移动终端浏览图片的方法及移动终端。

背景技术

随着信息时代的来临，利用移动终端浏览新闻、听音乐和观看视频等已经成为人们的一种生活方式。但目前在移动终端上浏览图片，只能够查看一种高清图，不支持多级质量的图片。换句话说，当用户在浏览图片时，可能需要查看不同级别(或不同质量)的图片，而现有的图片浏览器并不能满足用户的需求。

因此，现有技术还有待于改进和发展。

发明内容

鉴于上述现有技术的不足，本发明的目的在于提供一种在移动终端浏览图片的方法及移动终端，旨在解决不支持浏览多级质量的图片的问题。

本发明的技术方案如下：

一种在移动终端浏览图片的方法，其中，包括步骤：

A、创建容器，在所述容器内添加图片展示单元；

B、根据外部调用者的图片地址，将缩略图对应的图片下载并保存至本地；

C、根据图片尺寸和/或清晰度对所述图片进行分级；

D、当接收到对缩略图的浏览指令时，在图片展示单元中加载所需级别的图片。

优选的，所述步骤D具体包括：

D1、在图片浏览的入场过程中，以入场动画过渡用视图进行入场；

D2、在图片浏览的退场过程中，以退场动画过渡用视图进行退场。

优选的，所述步骤A具体包括：

A1、创建支持横向滑动的容器；

A2、使用可滚动式视图作为所述容器的底层视图；

A3、在所述底层视图上放置图像视图。

优选的，在所述可滚动式视图上添加长按手势、双击手势、单击手势以及拖动手势，并监听手势事件。

优选的，所述步骤C具体包括：

C1、根据图片尺寸和/或清晰度将所述图片转换成多个级别的图片；

C2、为不同级别的图片设置相应的展示优先级。

优选的，所述步骤D1具体包括：

D11、获取当前界面上缩略图相对屏幕的坐标，记为P1；

D12、加载缩略图对应的图片至内存中；

D13、计算所述图片相对屏幕的坐标，记为P2；

D14、创建入场动画过渡用视图，并将其添加到屏幕根视图；

D15、在所述入场动画过渡用视图上加载所述图片，并以所述缩略图相同的尺寸显示于P1上；

D16、控制所述入场动画过渡用视图以动画方式逐渐放大到与所述图片相同的尺寸，并显示于P2上；

D17、待图片展示单元加载完成后，移除所述入场动画过渡用视图。

优选的，所述步骤D2具体包括：

D21、获取当前界面上图片相对屏幕的坐标，记为R1；

D22、计算缩略图相对屏幕的坐标，记为R2；

D23、创建退场动画过渡用视图，并将其添加到屏幕根视图；

D24、在所述退场动画过渡用视图上加载所述图片，并以所述图片相同的尺寸显示于R1上，然后控制图片展示单元退场；

D25、控制所述退场动画过渡用视图以动画方式逐渐缩小到与所述缩略图相同的尺寸，并显示于R2上；

D26、移除所述退场动画过渡用视图。

优选的，所述步骤D中，当监听到拖动手势事件时，若拖动手势为向下，则控制图片尺寸随向下偏移值增大而缩小，并使背景透明度变大，当拖动手势变为向上时，控制图片尺寸随向下偏移值减小而放大，并使背景透明度变小。

本发明还提供一种移动终端，其中，包括：

处理器，适于实现各指令，以及

存储设备，适于存储多条指令，所述指令适于由处理器加载并执行：

创建容器，在所述容器内添加图片展示单元；

根据外部调用者的图片地址，将缩略图对应的图片下载并保存至本地；

根据图片尺寸和/或清晰度对所述图片进行分级；

当接收到对缩略图的浏览指令时，在图片展示单元中加载所需级别的图片。

优选的，所述缩略图对应的图片下载的方式为异步下载。

有益效果：通过本发明的方法浏览图片，用户可以根据自身的需要查看各级别质量的图片，满足不同用户要求，同时提升图片浏览的流畅性。

附图说明

图1为本发明一种在移动终端浏览图片的方法较佳实施例的流程图。

图2为本发明移动终端的具体结构框图。

具体实施方式

本发明提供一种在移动终端浏览图片的方法及移动终端，为使本发明的目的、技术方案及效果更加清楚、明确，以下对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

请参照图1，图1为本发明一种在移动终端浏览图片的方法较佳实施例的流程图，其包括步骤：

S1、创建容器，在所述容器内添加图片展示单元；

S2、根据外部调用者的图片地址，将缩略图对应的图片下载并保存至本地；

S3、根据图片尺寸和/或清晰度对所述图片进行分级；

S4、当接收到对缩略图的浏览指令时，在图片展示单元中加载所需级别的图片。

当使用本发明提供的方法浏览图片时，用户可以根据自身的需要查看各级别质量的图片，满足不同用户要求，提升了浏览图片的流畅性。

优选的，所述步骤S1具体包括：

S11、创建支持横向滑动的容器；

S12、使用可滚动式视图作为所述容器的底层视图；

S13、在所述底层视图上放置图像视图。

上述步骤S11中，根据操作系统的不同，选取并创建不同的容器，所述容器是指能够将其他控件放置在其上面的控件，如VB中的Frame控件或PictureBox控件等。所述的容器支持横向滑动，并且容器内的单元具有复用性。采用可复用的横向滑动容器，能够提高内存的使用效率，提升滑动操作的流畅度。

上述步骤S12和步骤S13中，根据用户的需要，可以将步骤S11创建的容器具体分为两部分。本发明是将底层作为可滚动式视图，可滚动视图的作用是支持用户的手势交互动作；底层视图上放置图像视图，图像视图的作用是显示后续步骤中的图片。

优选的，所述可滚动式视图上添加长按手势、双击手势、单击手势以及拖动手势，并监听手势事件。

具体的，当监测到长按手势事件发生时，将事件传递至外部调用者；当监测到双击手势事件发生时，在图像视图上缩放图片；当监测单击手势事件发生时，进入或退出图片浏览模式；当监测到拖动手势事件发生时，图片在图像视图上随着手势的轨迹进行位移。上述手势事件均为对缩略图或者对应的图片进行操作，即在步骤S4中监听各种手势事件。

上述步骤S2中，根据外部调用者的图片地址，将缩略图对应的图片下载并保存至本地。保存的图片具有持久化的特点，并且关联图片地址，对其命名，后续步骤中可以直接的调用。

优选的，所述缩略图对应的图片下载的方式为异步下载。

各图片展示单元分别单独下载，并且容器内的单元具有复用性，在滑动到容器的其他图片展示单元时，那么其他图片展示单元也需要同时刷新下载地址。图片下载成功后，将其以文件存储的方式把图片持久化保存到本地，关联图片地址，并对其命名，方便后续的调用。

优选的，所述步骤S3具体包括：

S31、根据图片尺寸和/或清晰度将所述图片转换成多个级别的图片；

S32、为不同级别的图片设置相应的展示优先级。

所述S31中，根据不同的标准对图片进行分级。例如，根据图片的尺寸进行分级，具体可先调用步骤S2中的图片地址，并将相应的图片缩放至不同的尺寸，这样将尺寸最大的作为第1级别图片；将尺寸第二大的作为第2级别图片，依此类推，将尺寸最小的作为第N级别图片。例如，也可以根据清晰度进行分级，具体可将相应的图片调整至不同的清晰度(或称为分辨率)，将清晰度最高(即分辨率最高，下同)的作为第1级别图片；将清晰度第二高的作为第2级别图片，依此类推，将清晰度最小的作为第N级别图片。又例如，可以根据尺寸和清晰度进行分级，例如，将尺寸最大且清晰度最高的作为第1级别图片；将尺寸最小且清晰度最低的作为第N级别图片，但实际情况是尺寸与清晰度并不一定同时满足上述分级标准，所以可以对尺寸与清晰度设置一个权重，例如尺寸的权重值为0.3，清晰度的权重值为0.7，二者相加为1，然后根据上述权重值对图片进行排序，排序高的级别高，排序低的级别低。

然后保存上述分级后的各级图片的地址，方便后续调用。

所述S32中，根据不同级别的图片设定展示优先级。例如，将清晰度低的作为最高优先级，清晰度高的作为最低优先级；或者将尺寸最小的作为最高优先级，尺寸最大的作为最低优先级。本发明优选的方案是将清晰度最高的作为最高优先级，清晰度最低的作为最低优先级。

更优选的，本发明设置一个默认优先级，在图片接收到浏览指令时，就会优先展示所述默认优先级的图片。所述默认优先级可以是用户自定义的清晰度最高的图片，也可以是尺寸最大的图片，但本发明更优选的是选定清晰度排在中间的图片，例如当清晰度有3个级别时，那么则将第2级别的图片设置为默认优先级。当清晰度为偶数级别(如为2N)时，那么可将第(N-1)级别图片作为默认优先级。

上述步骤S4中，当接收到对缩略图的浏览指令时，在图片展示单元中加载所需级别的图片。例如，用户在使用移动终端浏览新闻时，新闻网页包含文字以及缩略图，当用户需要浏览缩略图所对应的图片时，可以通过点击(如单击)缩略图，接收到点击的指令后，缩略图所对应的图片将会展示在图片展示单元上，具体展示默认优先级的图片。

为了使用户在进行图片浏览的操作更加流畅，以及提高转场交互性，本发明还对图片的入场以及退场过程进行了改进。

具体的，所述步骤S4具体包括：

S41、在图片浏览的入场过程中，以入场动画过渡用视图进行入场；

S42、在图片浏览的退场过程中，以退场动画过渡用视图进行退场。

上述步骤S41中，用户在使用图片浏览时，当点击缩略图后，图片展示单元将会展示缩略图所对应的图片。此时，图片以入场动画过渡用视图进行入场，入场完成后，将会移除场动画过渡用视图，这样图片的整个入场动作完成，在上述浏览过程中，图片不会直接打开，而是以动画的方式逐渐打开，从而避免图片打开方式过于生硬。

优选的，所述步骤S41具体包括：

S411、获取当前界面上缩略图相对屏幕的坐标，记为P1；

S412、加载缩略图对应的图片至内存中；

S413、计算所述图片相对屏幕的坐标，记为P2；

S414、创建入场动画过渡用视图，并将其添加到屏幕根视图；

S415、在所述入场动画过渡用视图上加载所述图片，并以所述缩略图相同的尺寸显示于P1上；

S416、控制所述入场动画过渡用视图以动画方式逐渐放大到与所述图片相同的尺寸，并显示于P2上；

S417、待图片展示单元加载完成后，移除所述入场动画过渡用视图。

上述步骤S411中，获取当前界面上缩略图相对屏幕(即为当前界面)的坐标，记为P1。例如，以当前界面的左下角为坐标原点，根据数学的关系，获得缩略图四个角的坐标，即可确定缩略图相对屏幕的具体位置，也即相对屏幕的坐标P1；也可通过先确定缩略图的尺寸，然后结合缩略图中心点的坐标，也可以确定缩略图相对屏幕的具体位置，也即相对屏幕的坐标P1。

上述步骤S412中，根据图片分级后的地址，将相应级别(如默认优先级)的图片从本地加载至缓存中，即内存。

上述步骤S413中，计算所述图片(即步骤S412中加载的图片)相对屏幕的坐标，记为P2。与步骤S411一样，设定坐标原点，建立坐标轴，根据数学关系，获得图片的四个角坐标，确定图片的具体位置，并记为P2。

上述步骤S414中，创建入场动画过渡用视图，并将其添加到屏幕根视图。根视图表示Activity最底层View，所以所述屏幕根视图为屏幕的最底层界面。所述的入场动画过渡用视图可以是由上向下翻转动画、由下向上翻转动画、渐现动画或者逐渐放大动画等。

上述步骤S415中，在所述的入场动画过渡用视图上加载所述图片，此处加载图片的级别可以是用户自身设定或者是系统默认。例如，系统默认加载与默认优先级相同级别的图片，这样当入场动画过渡用视图移除后，也不会造成清晰度或尺寸变化的情况，给用户的感觉更加流畅，当然用户也可自身设定级别，例如设定为加载清晰度最高(即级别最高)的图片，这样可以使用户在第一时间浏览到质量最佳的图片。所加载图片的尺寸与缩略图的尺寸一样，并显示在P1位置上。也就是说，此时显示在图片展示单元的图片是与缩略图相同的尺寸，但比缩略图更加的清晰，即所述入场动画过渡用视图会先缩小至缩略图相同的尺寸，再放大至所需的尺寸。

上述步骤S416中，控制所述入场动画过渡用视图以动画方式逐渐放大到与所述图片相同的尺寸，并显示于P2上。也就是说，在P1位置上先显示步骤S415中的图片，然后以动画的方式逐渐放大到与所述图片相同的尺寸，再位移到P2处，即先放大后位移。当然也可以是在P1位置上先显示步骤S415中的图片，再将图片位移到P2处，最后以动画的方式逐渐放大到与所述图片相同的尺寸，即先位移后放大。又或者，在P1位置上先显示步骤S415中的图片，边将图片位移到P2、边以动画的方式放大到与所述图片相同的尺寸，即边位移边放大。

在所述步骤S417中，优选的，在步骤S416的入场动画过渡用视图放大完成后，控制图片展示单元开始加载所需级别的图片(例如默认优先级的图片)，这样可以保证入场动画优先执行，当入场动画显示完成后，再显示图片，避免先显示出完整的图片、再出现入场动画的情况，从而使入场过程更加流畅、完整。

特别的，当步骤S412中，加载当前级别的图片失败时，则加载下一级别的图片，例如加载第1级别的图片失败时，则加载第2级别的图片，依此类推，当无图片可加载时，则直接加载缩略图。上述步骤S417中，待图片展示单元加载完成后，移除所述入场动画过渡用视图，结束入场的操作，这样用户所浏览到的即为图片展示单元上的图片。

上述步骤S42中，用户在浏览完图片时，需要退出图片浏览，在图片浏览的退场过程中，以退场动画过渡用视图进行退场。

优选的，所述步骤S42具体包括：

S421、获取当前界面上图片相对屏幕的坐标，记为R1；

S422、计算缩略图相对屏幕的坐标，记为R2；

S423、创建退场动画过渡用视图，并将其添加到屏幕根视图；

S424、在所述退场动画过渡用视图上加载所述图片，并以所述图片相同的尺寸显示于R1上，然后控制图片展示单元退场；

S425、控制所述退场动画过渡用视图以动画方式逐渐缩小到与所述缩略图相同的尺寸，并显示于R2上；

S426、移除所述退场动画过渡用视图。

上述步骤S421中，与上述步骤S411、S413一样，可以通过建立坐标轴的方法确定当前界面上图片相对屏幕的坐标，记为R1。由于用户在浏览图片时，可能会使用手势交互中的拖动手势，所以R1的坐标与P2的坐标不一定相同，需要在本步骤中重新获取。

上述步骤S422中，计算即将出现的缩略图相对屏幕的坐标，记为R2。计算方法与之前的一致，不做赘述。

上述步骤S423中，创建退场动画过渡用视图，并将其添加到屏幕根视图。与创建入场动画时一样，退场动画的方式也是多种多样，例如可以是由上向下翻转动画、由下向上翻转动画、渐现动画或者逐渐缩小动画等。

上述步骤S423中，控制所述退场动画过渡用视图以动画方式逐渐缩小到与所述缩略图相同的尺寸，并显示于R2上。此时控制所述退场动画过渡用视图以动画方式逐渐缩小到与所述缩略图相同的尺寸，并显示在R2中。此时，图片展示单元展示的图片与缩略图尺寸一样。具体地，先在R1位置上显示图片，然后以动画的方式逐渐缩小到与所述缩略图相同的尺寸，再位移到R2处，即先缩小后位移。当然也可以是先在R1位置上显示图片，再将图片位移到R2处，最后以动画的方式逐渐缩小到与所述缩略图相同的尺寸，即先位移后缩小。又或者，在R1位置上先显示图片，边将图片位移到R2、边以动画的方式缩小到与所述缩略图相同的尺寸，即边位移边缩小。

在所述步骤S424中，退场动画过渡用视图显示加载完图片后，就控制图片展示单元退场，这样可以保证图片展示单元优先退场，避免先执行退场动画、而图片展示单元仍处于图片显示状态的情况，从而使退场过程更加流畅、完整。

上述步骤S426中，移除所述退场动画过渡用视图，结束退场的操作。

优选的，所述步骤S4中，当监听到拖动手势事件时，若拖动手势为向下，则控制图片尺寸随向下偏移值增大而缩小，并使背景透明度变大，当拖动手势变为向上时，控制图片尺寸随向下偏移值减小而放大，并使背景透明度变小。

根据屏幕的大小设定向下偏移值的阈值，例如，设定阈值的大小为当前屏幕长度的三分之一。当向下偏移值小于阈值时，向下拖动图片，向下偏移值不断增大，图片会随着手势的向下不断缩小，同时背景透明度也不断增大。继续向下拖动图片，直至向下偏移值与阈值相等时，此时图片不再缩小，此时前置界面内容为半显现状态。

当向下偏移值增大到阈值时，保持手指不离开图片，此时向上拖动图片，图片将会随着向下偏移值的减小而放大，同时背景透明度变小，当图片变大到原始尺寸时，不再变化。

如果向上拖动图片，则向上偏移值开始增大，背景透明度增大，图片不断缩小，与上述缩小步骤一样，当向上偏移值再次增大到阈值时，图片不再缩小，同时前置界面内容为半显现状态。此时，如果保持手指不离开图片，向下拖动图片，则向上偏移值减小，背景透明度减小，图片放大，当放大到原始尺寸时，不再放大。此时，如果继续向下拖动图片，则开始循环上述的缩小操作。

在向上或向下拖动图片的过程中，当手指离开图片时，则图片恢复至拖动前的尺寸或者保持当前的尺寸，对于背景透明度也可以恢复至拖动前的背景透明度或者保持当前的背景透明度。

上述过程中，向上拖动图片以及向下拖动图片都是以用户手指第一次接触图片的点而言，例如将用户手指第一次接触图片的点作为原点，即当用户手指向下拖动图片时，则产生向下偏移值，当用户手指向上拖动图片时，则产生向上偏移值。

当然，本发明还提供另外一个实施方案，即只有在产生向下偏移值时，才执行上述缩小或放大的效果；而在产生向上偏移值时，则保持图片效果不变。

本发明还提供一种移动终端10，如图2所示，其包括：

处理器110，适于实现各指令，以及

存储设备120，适于存储多条指令，所述指令适于由处理器加载并执行：

创建容器，在所述容器内添加图片展示单元；

根据外部调用者的图片地址，将缩略图对应的图片下载并保存至本地；

根据图片尺寸和/或清晰度对所述图片进行分级；

当接收到对缩略图的浏览指令时，在图片展示单元中加载所需级别的图片。

所述处理器110可以为通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)、单片机、ARM(Acorn RISC Machine)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件组件或者这些部件的任何组合。还有，处理器还可以是任何传统处理器、微处理器或状态机。处理器也可以被实现为计算设备的组合，例如，DSP和微处理器的组合、多个微处理器、一个或多个微处理器结合DSP核、或任何其它这种配置。

存储设备120作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本发明实施例中的域名动态切换方法对应的程序指令。处理器通过运行存储在存储设备中的非易失性软件程序、指令以及单元，从而执行动态域名切换的各种功能应用以及数据处理，即实现上述方法实施例中的域名动态切换方法。

应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。

Claims (10)

1.一种在移动终端浏览图片的方法，其特征在于，包括步骤：

A、创建容器，在所述容器内添加图片展示单元；

B、根据外部调用者的图片地址，将缩略图对应的图片下载并保存至本地；

C、根据图片尺寸和/或清晰度对所述图片进行分级；

D、当接收到对缩略图的浏览指令时，在图片展示单元中加载所需级别的图片。

2.根据权利要求1所述的在移动终端浏览图片的方法，其特征在于，所述步骤D具体包括：

D1、在图片浏览的入场过程中，以入场动画过渡用视图进行入场；

D2、在图片浏览的退场过程中，以退场动画过渡用视图进行退场。

3.根据权利要求1所述的在移动终端浏览图片的方法，其特征在于，所述步骤A具体包括：

A1、创建支持横向滑动的容器；

A2、使用可滚动式视图作为所述容器的底层视图；

A3、在所述底层视图上放置图像视图。

4.根据权利要求3所述的在移动终端浏览图片的方法，其特征在于，所述步骤A2中，在所述可滚动式视图上添加长按手势、双击手势、单击手势以及拖动手势，并监听手势事件。

5.根据权利要求1所述的在移动终端浏览图片的方法，其特征在于，所述步骤C具体包括：

C1、根据图片尺寸和/或清晰度将所述图片转换成多个级别的图片；

C2、为不同级别的图片设置相应的展示优先级。

6.根据权利要求2所述的在移动终端浏览图片的方法，其特征在于，所述步骤D1具体包括：

D11、获取当前界面上缩略图相对屏幕的坐标，记为P1；

D12、加载缩略图对应的图片至内存中；

D13、计算所述图片相对屏幕的坐标，记为P2；

D14、创建入场动画过渡用视图，并将其添加到屏幕根视图；

D15、在所述入场动画过渡用视图上加载所述图片，并以所述缩略图相同的尺寸显示于P1上；

D16、控制所述入场动画过渡用视图以动画方式逐渐放大到与所述图片相同的尺寸，并显示于P2上；

D17、待图片展示单元加载完成后，移除所述入场动画过渡用视图。

7.根据权利要求2所述的在移动终端浏览图片的方法，其特征在于，所述步骤D2具体包括：

D21、获取当前界面上图片相对屏幕的坐标，记为R1；

D22、计算缩略图相对屏幕的坐标，记为R2；

D23、创建退场动画过渡用视图，并将其添加到屏幕根视图；

D24、在所述退场动画过渡用视图上加载所述图片，并以所述图片相同的尺寸显示于R1上，然后控制图片展示单元退场；

D25、控制所述退场动画过渡用视图以动画方式逐渐缩小到与所述缩略图相同的尺寸，并显示于R2上；

D26、移除所述退场动画过渡用视图。

8.根据权利要求4所述的在移动终端浏览图片的方法，其特征在于，所述步骤D中，当监听到拖动手势事件时，若拖动手势为向下，则控制图片尺寸随向下偏移值增大而缩小，并使背景透明度变大，当拖动手势变为向上时，控制图片尺寸随向下偏移值减小而放大，并使背景透明度变小。

9.一种移动终端，其特征在于，包括：

处理器，适于实现各指令，以及

存储设备，适于存储多条指令，所述指令适于由处理器加载并执行：

创建容器，在所述容器内添加图片展示单元；

根据外部调用者的图片地址，将缩略图对应的图片下载并保存至本地；

根据图片尺寸和/或清晰度对所述图片进行分级；

当接收到对缩略图的浏览指令时，在图片展示单元中加载所需级别的图片。

10.根据权利要求9所述的一种移动终端，其特征在于，所述缩略图对应的图片下载的方式为异步下载。