iOS-CALayer实现简单进度条

/**
 *  用CALayer定制下载进度条控件
 *  1.单独创建出CALayer
 *  2.直接修改CALayer的frame值,执行隐式动画,实现进度条效果
 *  3.用定时器(NSTimer)模拟网络下载时提供的百分比数据
 *  4.将CALayer封装进UIView子类中定制进度条控件

*/

自定义一个UIView,创建CALayer

#import <UIKit/UIKit.h>

@interface WJProgressView : UIView

@property (nonatomic,assign)CGFloat progress;//进度参数取值范围0~100
@property (nonatomic,strong)UIColor *progressColor;//颜色

@end

#import "WJProgressView.h"

@interface WJProgressView ()

@property (nonatomic,strong)CALayer *progressLayer;
@property (nonatomic,assign)CGFloat currentViewWidth;

@end

@implementation WJProgressView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.progressLayer = [CALayer layer];
        self.backgroundColor = [UIColor grayColor];
        self.progressLayer.backgroundColor = [UIColor redColor].CGColor;
        self.progressLayer.frame = CGRectMake(0, 0, 0, frame.size.height);
        [self.layer addSublayer:self.progressLayer];
        //储存当前view的宽度值
        self.currentViewWidth = frame.size.width;
    }
    return self;
}

#pragma mark - 重写setter,getter方法

@synthesize progress = _progress;
- (void)setProgress:(CGFloat)progress {
    _progress = progress;
    if (progress <= 0) {
        self.progressLayer.frame = CGRectMake(0, 0, 0, self.frame.size.height);
    }else if (progress <= 1) {
        self.progressLayer.frame = CGRectMake(0, 0, progress *self.currentViewWidth, self.frame.size.height);
    }else {
        self.progressLayer.frame = CGRectMake(0, 0, self.currentViewWidth, self.frame.size.height);
    }
}

- (CGFloat)progress {
    return _progress;
}

@synthesize progressColor = _progressColor;
- (void)setProgressColor:(UIColor *)progressColor {
    _progressColor = progressColor;
    self.progressLayer.backgroundColor = progressColor.CGColor;
}

- (UIColor *)progressColor {
    return _progressColor;
}

向上面那样封装的话,只需改变progress进度属性就能改变CALayer的frame(隐式动画)

self.progressView.progress = arc4random()%100/100.f;

效果图:

时间: 2024-11-07 10:39:07

iOS-CALayer实现简单进度条的相关文章

HTML5简单进度条插件

今天学习了HTML5画线条,于是有了做一个简单进度条的插件的想法 先来一个实例 下面是html代码 <div> <canvas id="canvas"></canvas> </div> 然后js配置参数 var setting = { id: "canvas",//画布id 不可省略 width: 40,//进度条高度 可省略 time: 100,//进度刷新时间间隔 可省略 默认为1000毫秒 color: &quo

jQuery实现简单进度条效果

一个用jQuery实现的简单进度条,当加载页面时,屏幕顶部出现一条极细的小线条,加载页面时会显示加载进度. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jquery实现的简单进度条效果</title> 6 <style> 7 #web_loading{ 8 z-inde

用 CALayer 定制下载进度条控件

// // RPProgressView.h // CALayer定制下载进度条控件 // // Created by RinpeChen on 16/1/2. // Copyright © 2016年 rinpe. All rights reserved. // #import <UIKit/UIKit.h> @interface RPProgressView : UIView @property (nonatomic, assign) CGFloat progressValue; // 进

用CALayer实现下载进度条控件

用CALayer实现下载进度条 效果: 源码: // // ViewController.m // ProgressView // // Created by YouXianMing on 14/11/18. // Copyright (c) 2014年 YouXianMing. All rights reserved. // #import "ViewController.h" @interface ViewController () @property (nonatomic, st

【iOS】环形渐变进度条实现

之前有人在找渐变进度条的效果,闲来无事就顺手写了一个,然后画了视图层级,方便讲解. 环境信息: Mac OS X 10.10.3 Xcode 6.3.1 iOS 8.3 效果图: 源码下载地址: https://github.com/saitjr/LoopProgressDemo.git 正文 一.视图层级 首先需要搞定的就是视图层级关系.可以看到, 1. 背景是有透明度的蓝色(blueView) 2. 需要一个从绿->黄->红的渐变色,那个这里我采用的是Layer(colorLayer) 3

iOS 自定义控件 progressView(环形进度条)

转帖:http://blog.csdn.net/xiangzhang321/article/details/42688133 之前做项目的时候有用到环形进度条,先是在网上找了一下第三方控件,发现好用是好用,就是东西太多了,有点复杂,还不如自己写一个简单点适合自己用的. 先把自定义控件的效果图贴出来.     其实我写的这个控件很简单.索性就直接把源码贴出来吧. .h文件的内容就是一些声明 #import <UIKit/UIKit.h> @interface ProgressView : UIV

iOS Quartz2D模拟下载进度条

效果图: 步骤: 1.在StoryBoard中拖入一个控制器添加UISlider和UIView 2个控件 2.在控制器中连线监听UISlider的值变化事件.HJProgressView属性,把变化的值传递给自定义UIView 3.自定义HJProgressView重写progressValue属性set方法,重绘视图中得文字和弧度值 控制器代码: #import "ViewController.h" #import "HJProgressView.h" @inte

js(ext)中,设置[异步]上传的简单进度条

代码在updateHmis的历史记录中,此处存档 handler : function() { //显示进度条 Ext.MessageBox.wait('数据上传中...','提示'); //上传数据 updateService.UpdateHmis({ callback:function(result){ //隐藏窗口 Ext.MessageBox.hide(); //显示传输结果 alert(result); //重载窗口 window.location.reload(); },async:

python3 简单进度条代码

进度条代码函数实现 import sys, time class ShowProcess(object): """ 显示处理进度的类 调用该类相关函数即可实现处理进度的显示 """ #i = 0 # 当前的处理进度 #max_steps = 0 # 总共需要处理的次数 #max_arrow = 50 #进度条的长度 # 初始化函数,需要知道总共的处理次数 def __init__(self, max_steps): self.max_steps