一种进度条定制方法、装置及进度条与流程

本发明涉及计算机技术领域，具体而言，涉及一种进度条定制方法、装置及进度条。

背景技术：

随着互联网技术的发展，终端上安装的应用程序（Application，APP）为了能够直观的向用户展示当前正在进行的任务的进度以及其它信息情况，一般通过在当前界面上显示进度条来向用户展示当前任务的进度，比如说，当用户在下载视频、音频或者其它文件时，使用进度条展示当前的下载进度，或者当用户打开某个APP时，通过进度条展示用户当前的经验值。

目前，虽然终端上的APP都在使用进度条向用户展示当前正在进行的任务的进度，但是现有技术中，大多数APP所使用的进度条在界面上的表现形式单一、千篇一律，且可定制程度较低，从而使用户感到单调、乏味。

技术实现要素：

有鉴于此，本发明实施例的目的在于提供一种进度条定制方法及进度条，以解决现有技术中大多数APP所使用的进度条在界面上的表现形式单一、前篇一律，且可定制程度较低，从而使用户感到单调、乏味的问题。

第一方面，本发明实施例提供了一种进度条定制方法，其中，所述方法包括：

确定待定制进度条的定制参数，所述定制参数包括所述待定制进度条的进度条图形、起点和终点；

根据所述进度条图形创建所述待定制进度条的轨道层，所述轨道层的图形与所述进度条图形的部分或全部相同；

根据所述起点和所述终点在所述轨道层的上层创建所述待定制进度条的进度层，所述进度层在所述轨道层上的垂直投影落在所述轨道层的范围内；

对所述轨道层和所述进度层进行组装，得到所述待定制进度条。

结合第一方面，本发明实施例提供了上述第一方面的第一种可能的实现方式，其中，所述方法还包括：

根据所述进度层创建所述待定制进度条的渐变图层，所述渐变图层的图形与所述进度层的图形相同；

将所述渐变图层覆盖在所述进度层的上层。

结合第一方面的第一种可能的实现方式，本发明实施例提供了上述第一方面的第二种可能的实现方式，其中，所述根据所述进度层创建所述待定制进度条的渐变图层，包括：

根据所述进度层创建多个渐变子图层；

将多个所述渐变子图层进行拼接，得到所述渐变图层。

结合第一方面的第二种可能的实现方式，本发明实施例提供了上述第一方面的第三种可能的实现方式，其中，所述根据所述进度层创建多个渐变子图层，包括：

根据所述进度层确定每个所述渐变子图层的起点和终点；

设置每个所述渐变子图层的起点颜色值和终点颜色值；

根据所述渐变子图层的起点颜色值和终点颜色值，创建所述渐变子图层。

结合第一方面，本发明实施例提供了上述第一方面的第四种可能的实现方式，其中，所述根据所述进度条图形创建所述待定制进度条的轨道层，包括：

根据所述进度条图形画出与所述进度条图形相同的几何图形；

将所述几何图形确定为所述待定制进度条的轨道层。

结合第一方面，本发明实施例提供了上述第一方面的第五种可能的实现方式，其中，当所述进度条图形包括几何图形和控件时，所述轨道层的图形与所述进度条图形的几何图形部分相同。

结合第一方面的第五种可能的实现方式，本发明实施例提供了上述第一方面的第六种可能的实现方式，其中，所述控件包括按钮和/或显示当前进度百分比的辅助文字。

结合第一方面，本发明实施例提供了上述对第一方面的第七种可能的实现方式，其中，当所述进度条图形为圆环图形时，所述圆环图形的终点与起点重合，或者所述圆环图形的终点与起点不重合。

第二方面，本发明实施例提供了一种进度条定制装置，其中，所述装置包括：

确定模块，用于确定待定制进度条的定制参数，所述定制参数包括所述待定制进度条的进度条图形、起点和终点；

第一创建模块，用于根据所述进度条图形创建所述待定制进度条的轨道层，所述轨道层的图形与所述进度条图形的部分或全部相同；

第二创建模块，用于根据所述起点和所述终点在所述轨道层的上层创建所述待定制进度条的进度层，所述进度层在所述轨道层上的垂直投影落在所述轨道层的范围内；

组装模块，用于对所述轨道层和所述进度层进行组装，得到所述待定制进度条。

第三方面，本发明实施例提供了一种利用上述第一方面所述的进度条定制方法定制的进度条，其中，所述进度条至少包括轨道层和进度层；

所述进度层设置在所述轨道层的上层。

本发明实施例提供的进度条定制方法、装置及进度条，其中，该方法根据待定制进度条的定制参数创建待定制进度条的轨道层和进度层，将轨道层和进度层进行组装，得到待定制进度条，实现了根据定制参数对进度条进行自由定制，且定制得到的进度条形式多样。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本发明实施例1所提供的进度条定制方法的流程图；

图2示出了本发明实施例1所提供的进度条定制方法中创建渐变图层的流程图；

图3示出了本发明实施例2所提供的进度条定制装置的结构示意图；

图4示出了本发明实施例3所提供的进度条的结构示意图。

附图3标记说明：

310，确定模块；320，第一创建模块；330，第二创建模块；340，组装模块；

附图4标记说明：

410，轨道层；420，进度层。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

考虑到现有技术中，当终端上的APP在使用进度条向用户展示当前正在进行的任务的进度或者其它信息情况时，大多数APP所使用的进度条在终端界面上的表现形式单一、千篇一律，且可定制程度较低，从而使用户感到单调、乏味。基于此，本发明实施例提供了一种方法进度条定制方法、装置及进度条，下面通过实施例进行描述。

实施例1

本发明实施例提供了一种进度条定制方法，该方法能够根据定制参数对进度条进行自由定制，且定制得到的进度条形式多样。

如图1所示，本发明实施例提供的进度条定制方法，包括步骤S110-S140，具体如下。

S110，确定待定制进度条的定制参数，该定制参数包括待定制进度条的进度条图形、起点和终点。

其中，上述待定制进度条的定制参数可以由开发人员提供，上述进度条图形指的是进度条的几何形状，比如说，上述进度条图形可以是圆环、长条形、正方形、椭圆形以及实心圆弧等等。

当上述进度条图形为圆环时，圆环的起点与终点重合或者圆环的起点与终点不重合。

当圆环的起点和终点重合时，上述圆环一个是完整的圆环，当上述圆环的起点和终点不重合时，上述圆环为整个圆环的一部分，在本发明实施例中，圆环的起点和终点的位置可以自由配置。

当上述进度条图形包括几何图形和控件时，轨道层的图形与进度条图形的几何图形部分相同。

上述控件包括按钮和/或显示当前进度百分比的辅助文字。

上述控件可以只包括按钮，也可以只包括显示当前进度百分比的辅助文字，还可以同时包括按钮和显示当前进度百分比的辅助文字。

上述按钮用于控制进度的开启或者停止。

上述进度条图形只由几何图形构成，轨道层和进度条图形相同。

S120，根据上述进度条图形创建待定制进度条的轨道层，该轨道层的图形与上述进度条图形的部分或全部相同。

其中，上述轨道层置于整个进度条的底层，作为进度条的背景层，用于表示当前任务的总进度，通过轨道层，用户可以直观的知道当前总进度的多少。

在本发明实施例中，创建待定制进度条的轨道层具体是通过如下过程实现的：根据上述进度条图形画出与进度条图形相同的几何图形，将该几何图形确定为待定制进度条的轨道层。

其中，上述根据进度条图形画出与进度条图形相同的几何图形，可以通过调用CAShapeLayer中的layer方法实现，首先通过layer方法创建轨道层的对象，再利用UIBezierPath中的bezierPathWithArcCenter方法画出与进度条图形相同的几何图形，将轨道层的path属性设置为该几何图形，使轨道层能够按照上述画出的几何图形进行描绘，得到待定制进度条的轨道层。

之后，还可以对上述轨道层的颜色和线宽进行设置，轨道层的颜色值和线宽的具体数值可以是按照开发人员提供的参数进行设置，也可以将上述线宽和颜色设置为默认值，本发明实施例并不对上述轨道层的线宽和颜色的具体值进行限定。

当上述进度条图形为圆环时，上述定制参数还包括起点角度和终点角度，下面将以上述进度条图像为完整圆环、且轨道层的线宽为4、颜色为白色为例，介绍一种创建轨道层的具体方式：

CAShapeLayer*trackLayer=[CAShapeLayer layer];

trackLayer.lineWidth=4;

trackLayer.strokeColor=[UIColor whiteColor];

UIBezierPath*path=[UIBezierPath

bezierPathWithArcCenter:CGPointMake(width/2.0f,width/2.0f)

radius:width/2.0f

startAngle:degressToRadius(0)

endAngle:degressToRadius(360)

clockwise:YES];

trackLayer.path=path.CGPath;

其中，在上述代码中，CAShapeLayer是一种绘制图形的方法，trackLayer为轨道层，lineWidth为线宽，strokeColor为描边颜色，UIBezierPath是UIKit中绘制图像的类，CGPointMake表示将二维坐标系中点初始化，startAngle为起始角度，endAngle为终止角度，degressToRadius表示把角度转换成PI的方式，clockwise表示顺时针。

上述轨道层的图形与进度条图形的部分或者全部相同包括：当上述进度条图形只是由几何图形构成时，轨道层的图形与进度条图形相同，比如说，当上述进度条图形只包括圆环、圆弧、椭圆等几何图形时，轨道层的图形和进度条图形相同；当上述进度条图形包括几何图形和一些按钮或者用于表示当前进度百分比的辅助文字时，轨道层的图形与进度条图形中的几何图形部分相同。

S130，根据上述起点和终点在轨道层的上层创建待定制进度条的进度层，该进度层在轨道层上的垂直投影落在轨道层的范围内。

上述起点指的是待定制进度条的起点，上述终点指的是待定制进度条的终点，进度层用于显示当前任务的进度百分比，当前任务完成时，进度条的终点与轨道层的终点重合。

上述进度层的图形和轨道层的图形相同，但是进度层的线宽可以和轨道层相同，也可以不同，比如说，进度层的线宽可以比轨道层宽或者窄，为了能够使用户通过进度层看到当前任务的进度，进度层的颜色和轨道层的颜色不相同。

在本发明实施例中，通过CAShapeLayer中的layer方法实现进度层的创建。

下面将以进度层的线宽为4为例，列举其中一种进度层的实现方式，具体实现代码为：

CAShapeLayer*progressLayer=[CAShapeLayer layer];

progressLayer.lineWidth=4;

其中，在上述代码中，progressLayer为进度层，trackLayer为轨道层。

S140，对上述轨道层和进度层进行组装，得到待定制进度层。

本发明实施例中，可以通过预先创建的父图层对轨道层和进度层进行组装，得到待定制进度层。

为了能够使创建的待定制进度条的进度层具有颜色渐变的效果，本发明实施例中提供的进度条定制方法还包括：

根据上述起点和终点创建待定制进度条的渐变图层，该渐变图层的图形与进度层的图形相同；将渐变图层覆盖在进度层的上层。

在本发明实施例中，进度层作为渐变图层的遮罩，将渐变图层覆盖在进度层上后，进度层可以产生颜色渐变效果。

其中，作为一个实施例，如图2所示，根据上述起点和终点创建待定制进度条的渐变图层，包括步骤S210-S220，具体如下：

S210，根据上述进度层创建多个渐变子图层；

S220，将多个上述渐变子图层进行拼接，得到渐变图层。

上述多个渐变子图层中的每个渐变子图层均与进度层图形的一部分相同，将多个渐变子图层进行拼接，可以得到与进度层图形相同的渐变图层。

上述多个渐变子图层中的多个可以是2个、3个或者其它数值，当上述渐变子图层的个数为2个时，可以创建左右两个渐变图子层，左渐变子图层的图形和进度层的左部分相同，右渐变子图层和进度层的右部分相同，将左右两个渐变子图层进行拼接，得到渐变图层。

上述多个渐变子图层中第一个渐变子图层的起点和进度层的起点重合，最后一个渐变子图层的终点和进度层的终点重合。

在本发明实施例中，可以通过预先创建的渐变父图层，对上述多个渐变子图层进行拼接，得到渐变图层。

上述根据上述进度层创建多个渐变子图层，具体包括：根据进度层确定每个渐变子图层的起点和终点；设置每个渐变子图层的起点颜色值和终端颜色值；根据渐变子图层的起点颜色值和终端颜色值，创建渐变子图层。

在本发明实施例中，可以将上述进度层划分为多个部分，上述多个渐变子图层中每个渐变子图层均对应一部分进度层，上述多个渐变子图层中第一个渐变子图层的起点与进度层的起点重合，第一个渐变子图层的终点与第二个渐变子图层的起点重合，上述多个渐变子图层中的最后一个渐变子图层的终点与进度层的终点重合，将上述多个渐变子图层顺序拼接，得到的渐变图层的图形和进度层的图形一致。

下面将以上述渐变子图层的个数是两个为例，详细介绍上述渐变子图层的创建过程，当上述渐变子图层的个数为两个时，分别记为左渐变子图层和右渐变子图层，左渐变子图层的起点与进度层的起点重合，左渐变子图层的终点与进度层的中点重合，且将左渐变子图层的终点作为右渐变子图层的起点，右渐变子图层的终点与进度层的终点重合，可以将左渐变子图层的起点坐标记为0，终点坐标记为0.5，将右渐变子图层的起点坐标记为0.5，终点坐标记为1，在本发明实施例中，采用setColors的方法设置左渐变子图层的起点、终点以及右渐变子图层的起点、终点的颜色值，根据起点和重点的颜色值，得到左渐变子图层和右渐变子图层。

上述左渐变子图层的终点还可以是进度层上除起点和终点之外的任意一点。

下面将以左渐变子图层的起点颜色为黑色、终点颜色为红色，右渐变子图层的起点颜色为红色、终点颜色为橘色为例，具体阐述左渐变子图层和右渐变子图层的一种可能的实现方式，具体代码为：

其中，在上述代码中，leftGradientLayer表示左渐变图层，rightGradientLayer表示右渐变图层，locations表示位置，colors表示颜色。

采用上述方法创建出左渐变子图层和右渐变子图层之后，通过预先创建出的渐变父图层将左渐变子图层和右渐变子图层进行拼接，得到完整的渐变图层，本发明实施例中，渐变父图层通过addSubview的方法将左渐变子图层和右渐变子图层加在自身上，实现左渐变子图层和右渐变子图层的拼接，其中一种具体实现代码如下：

CALayer*superGradientLayer=[CALayer layer]

[superGradientLayer addSubLayer:leftGradientLayer];

[superGradientLayer addSubLayer:rightGradientLayer];

其中，在上述代码中，superGradientLayer是父渐变图层，addSubLayer表示添加图层，superGradientLayer addSubLayer:leftGradientLayer表示将左渐变图层添加在父渐变图层上，superGradientLayer addSubLayer:rightGradientLayer表示将右渐变图层添加在父图层上。

其中，在创建左渐变子图层和右渐变子图层的过程中，左渐变子图层可以采用斜形渐变的方式实现，右渐变子图层可以采用垂直渐变的方式实现，上述斜形渐变指的是渐变子图层的颜色沿着45°的倾斜轴进行渐变，可以从左上角到右下角渐变，还可以是从左下角到右上角进行渐变，上述垂直渐变指的是颜色沿着竖直轴进行渐变，可以是从上到下进行渐变或者是从下到上进行渐变。

当然，在创建左渐变子图层和右渐变子图层的过程中，左渐变子图层和右渐变子图层均可以采用斜形渐变的方式实现或者左渐变子图层和右渐变子图层均采用垂直渐变的方式实现。

如果，当上述待定制进度层包括轨道层、进度层和渐变图层时，采用父图层将上述轨道层、进度层和渐变图层进行拼接，具体可以通过如下方法实现，一种可能的代码为：

superGradientLayer.mask=progressLayer

[self.layer addSubLayer:trackLayer];

[self.layer addSubLayer:progressLayer];

其中，在上述代码中，mask表示遮罩，superGradientLayer.mask=progressLayer表示将进度层设置为渐变父图层的遮罩，self.layeraddSubLayer:trackLayer表示添加轨道层，self.layeraddSubLayer:progressLayer表示添加进度层。

当需要使用上述待定制进度条时，需要创建进度视图，具体代码如下：

MNProgressView*progressView=[[MNProgressView alloc]init];

其中，在上述代码中，MNProgressView表示定制得到的进度条，progressView表示进度视图，alloc表示函数，init表示一种进程。

之后，设置待定制进度条的属性，比如说，大小，是否需要渐变等等，下面以待定制进度条在进度视图上的默认坐标为（0,0），宽度高度默认为100，默认需要进行颜色渐变为例，介绍具体实现方法，具体代码如下：

progressView.frame=CGRectMake(0,0,100,100);

[progressView setNeedGradient:YES];

其中，在上述代码中，frame表示一种控件，CGRectMake表示以屏幕左上角作为参考点，progressView setNeedGradient:YES表示进度视图需要颜色渐变效果。

然后，将上述待定制进度条添加到上述进度视图中，具体实现代码如下：

[view addSubView:progressView];

其中，在上述代码中，progressView表示进度视图，addSubView表示一种添加视图的方法。

最后，设置待定制进度条当前进度百分比，本发明实施例中，通过setProgress方法设置待定制进度条当前进度百分比，具体代码如下：

[progressView setProgress:0.5animated:YES]

其中，在上述代码中，setProgress表示一种设置进度的方法，progressView setProgress:0.5animated:YES表示设置进度条初始值。

本发明实施例提供的进度条定制方法，实现了根据定制参数对进度条进行自由定制，且定制得到的进度条形式多样。

实施例2

本发明实施例提供了一种进度条定制装置，如图3所示，该装置包括：确定模块310、第一创建模块320、第二创建模块330和组装模块340；

上述确定模块310，用于确定待定制进度条的定制参数，该定制参数包括待定制进度条的进度条图形、起点和终点；

上述第一创建模块320，用于根据上述进度条图形创建待定制进度条的轨道层，该轨道层的图形与进度条图形的部分或全部相同；

上述第二创建模块330，用于根据上述起点和终点在轨道层的上层创建待定制进度条的进度层，该进度层在轨道层上的垂直投影落在轨道层的范围内；

上述组装模块340，用于对上述轨道层和进度层进行组装，得到上述待定制进度条。

本发明实施例提供的进度条定制装置，实现了根据定制参数对进度条进行自由定制，且定制得到的进度条形式多样

本发明实施例所提供的进度条定制装置可以为设备上的特定硬件或者安装于设备上的软件或固件等。本发明实施例所提供的装置，其实现原理及产生的技术效果和前述方法实施例相同，为简要描述，装置实施例部分未提及之处，可参考前述方法实施例中相应内容。所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，前述描述的系统、装置和单元的具体工作过程，均可以参考上述方法实施例中的对应过程，在此不再赘述。

在本发明所提供的实施例中，应该理解到，所揭露装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明提供的实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器（ROM，Read-Only Memory）、随机存取存储器（RAM，Random Access Memory）、磁碟或者光盘等各种可以存储程序代码的介质。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释，此外，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

实施例3

本发明实施例提供了一种进度条，该进度条采用上述实施例1中的方法定制的，如图4所示，该进度条至少包括轨道层410和进度层420；

进度层420设置在轨道层410的上层。

上述图4只是画出了轨道层410为整个圆环且进度层420的宽度比轨道层410宽的情况，并没有对进度层420和轨道层410的宽度进行限定，也没有限定轨道层410的起点和终点的具体位置。

除此之外，上述进度条还可以是其它形状，轨道层的起点和终点也可以不重合，进度层420的宽度可以和轨道层410的宽度一致，也可以比轨道层410的宽度窄或者比轨道层410的宽度宽，上述图4只是画出了其中一种可能，并没有对进度条的具体形状进行限定。

在上述进度层420上还可以设置渐变图层，进度层420作为渐变图层的遮罩，这样当使用进度层420显示当前进度时，进度层420会有颜色渐变的效果。

本发明实施例提供的进度条，采用上述实施例1的方法进行定制，形式多样。

最后应说明的是：以上所述实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围。都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。