基础:第一部分-按钮类效果-实例 ⑤具有进度条的按钮

前言:本实例实现的是具有进度条的按钮效果。当点击按钮后，将在按钮上以扇形的方式显示进度。在加载的过程中，单击按钮，就变为暂停状态，进度条也停止。运行效果如下图:

带滚动条的按钮.gif

实现过程
绘制一个圆形的进度条，在此进度条上放置一个环形的按钮控件，当用户点击此按钮控件时，圆形的进度条就会被加载。具体的实现步骤如下。

• (1) 创建一个项目，命名为"具有进度条的按钮"
• (2) 添加图片Pause.png和Play.png到创建项目的Images.xcassets文件夹中
• (3) 创建一个CALayer类的ProgressLayer类。

• (4) 打开ProgressLayer.h文件，编写代码，实现属性声明。程序代码如下:

  
  
  
• (5) 打开ProgressLayer.m文件，编写代码。对进度条的图层进行初始化设置及绘制。添加 initWithLayer: 方法，实现进度条的图层初始化。程序代码如下:
  
  
  
  添加 drawInContext: 方法，对进度条绘制。程序代码如下:
  
  
• (6) 创建一个基于UIView类的ProgressView类。在此类中没有任何绘图，他的工作就是在可视界面中放置ProgressLayer图层。

• (7) 打开ProgressView.h文件，编写代码实现头文件、属性以及方法类的声明。程序代码如下:

  
  
  
• (8) 打开PressressView.m文件，编写代码。实现将绘制的进度条放到可视界面中，使用方法如下表:
  
  
  
  
  
  
  
  
  
  initVars 方法，实现对进度条的属性进行设置。程序代码如下:
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
• (9) 创建一个基于NSObject类的ProgressPlay类。

• (10) 打开ProgressPlay.h文件，编写代码，实现宏定义，协议及属性，方法和对象声明，程序代码如下:

  
  
  

• (11) 打开ProgressPlay.m 编写代码

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

• (12) 打开ViewController.m编写代码

  
  
  
  
  
  

• (13) 设计界面

  
  
  
• (14) 打开ViewController.m编写代码
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Demo地址:https://github.com/RenZhengYang/progressBtn.git