文档章节

iOS 图片加载 圆形进度条

大魔王周晓辉
 大魔王周晓辉
发布于 2016/01/04 11:38
字数 449
阅读 38
收藏 0

项目中有加载网络图片的需求,加一个加载的进度条会提高用户体验,网络不好的时候会清晰的看到图片加载的进度,比让用户看着满屏幕空白好。下面是我们项目自己封装的圆形进度条,分享给大家。

其实实现原理很简单,只是根据图片加载的进度来绘制一个圆。

先来看.h文件,需要一个进度的属性和进度条展示位置的方法:

 

@property (nonatomic, assign) CGFloat progress;

+(HMProgressView *)showHMProgressView:(UIView *)parentView :(CGFloat)viewHeight;


再看.m文件中的实现:

 

 

+(HMProgressView *)showHMProgressView:(UIView *)parentView :(CGFloat)viewHeight{
    HMProgressView *progressView=(HMProgressView *)[parentView viewWithTag:999];
    if (!progressView) {
        progressView=[[HMProgressView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
        progressView.tag=999;
        progressView.center=parentView.center;
        progressView.y=viewHeight+kScreenWidth/2-25;
        progressView.backgroundColor=[UIColor clearColor];
        [parentView addSubview:progressView];
    }
    return progressView;
    
}

- (void)setProgress:(CGFloat)progress
{
    _progress = progress;
    
    // 重新绘制
    // 在view上做一个重绘的标记,当下次屏幕刷新的时候,就会调用drawRect.
    [self setNeedsDisplay];
    if (_progress==1) {//加载完成时移除
        [self removeFromSuperview];
    }

}


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
// 当视图显示的时候会调用 默认只会调用一次
- (void)drawRect:(CGRect)rect
{
    // Drawing code
    
    // 1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 2.拼接路径
    CGPoint center = CGPointMake(25, 25);
    CGFloat radius = 25 - 2;
    CGFloat startA = -M_PI_2;
    CGFloat endA = -M_PI_2 + _progress * M_PI * 2;
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
    CGContextSetLineCap(ctx, kCGLineCapRound);

    CGContextSetLineWidth(ctx, 4);
    // 3.把路径添加到上下文
    [[UIColor lightGrayColor] set];
    CGContextAddPath(ctx, path.CGPath);
    
    // 4.把上下文渲染到视图
    CGContextStrokePath(ctx);
    
}

使用也很简单,项目中设置图片用的是第三方框架SDWebImage,在加载图片的方法中设置一下进度:

 

 

        ImgProgressView *progressView=[ImgProgressView showImgProgressView:self.contentView :layoutFrame.photoRect.origin.y];
        [self.orgPhoto setImageWithURL:[NSURL URLWithString:photoUrl] placeholderImage:nil options:SDWebImageProgressiveDownload progress:^(NSInteger receivedSize, NSInteger expectedSize)
         {
             if (expectedSize!=-1) {
                 [progressView setProgress:(CGFloat)receivedSize/expectedSize];
             }
         }
            completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType)
         {

         }];


© 著作权归作者所有

大魔王周晓辉
粉丝 0
博文 38
码字总数 12824
作品 0
朝阳
私信 提问
iOS WKWebView UI增强(上拉刷新,JS交互,加载进度条)

iOS WKWebView UI增强(上拉刷新,JS交互,加载进度条) 需求:WKWebView的一些增加模块,例如上拉刷新,JS交互,加载进度条等等持续更新 阅读前提: } catch(error) { } } (void)headerRefres...

__小___东邪___
2018/11/06
0
0
【移动开发】iOS和Android不规则按钮解决方案

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012138272/article/details/85020072 【写在前面】如果看完这篇博客,对你有帮助的话,欢迎加入全栈技术交流...

Michael_Zhan_Tcys
2018/12/16
0
0
超全整理!常用的iOS第三方资源

一:第三方插件 1:基于响应式编程思想的oc 地址:https://github.com/ReactiveCocoa/ReactiveCocoa 2:hud提示框 地址:https://github.com/jdg/MBProgressHUD 3:XML/HTML解析 地址:https...

Sukijiang
2016/01/22
1K
0
Phonegap各类商业插件

【Phonegap商业插件服务】[目前插件已经支持到Phonegap最新版本] 1.phonegap-百度社会化分享-andriod插件 v2.0 【该插件支持微信分享和朋友圈分享,qq好友分享,微博分享】 2.phonegap百度社...

夜澜小雨
2015/07/15
1K
0
[help] ios 锁屏下音频的播放&暂停问题

用ios(safari)访问自己的网站(非app)后点击音频播放,然后锁屏,再亮屏的时候便是如上图所示 有以下不解: 1. 点击中间暂停按钮可暂停,但是再次点击却是从头播放,多次反复点击后音频信息消失(进...

顾慎为
2018/06/27
293
1

没有更多内容

加载失败,请刷新页面

加载更多

Visual Paradigm 教程[UML]:如何绘制封装图?(上)

下载Visual Paradigm最新试用版 查看本教程视频文件 在项目开始时,您只有有限数量的图表,一切都简单而美观。然而,当时间过得匆匆时,已经创建了越来越多的图表,并且它们开始变得无法管理...

xiaochuachua
37分钟前
1
0
Pure-ftpd服务安装及虚拟用户设置

安装 sudo apt-get install pure-ftpd 虚拟用户设置 首先,可以在系统中添加相应的用户和组,如用户ftpuser 和组ftpgroup ,专门用来管理ftp服务。也可以是能登录系统的用户,但最好是不能登...

Gm_ning
39分钟前
1
0
一位面试了阿里,滴滴,网易,蚂蚁金服,最终有幸去了网易的Java程序员【面试题分享】

前言 15年毕业到现在也近三年了,最近面试了阿里集团(菜鸟网络,蚂蚁金服),网易,滴滴,点我达,最终收到点我达,网易offer,蚂蚁金服二面挂掉,菜鸟网络一个月了还在流程中... 最终有幸去...

Java领航员
41分钟前
2
0
“大团队”和“敏捷开发”,谁说不可兼得?

阿里妹导读:当小团队的产出跟不上业务需要,团队就面临规模化的问题。从1个团队到3个团队,仍可以通过简单的团队沟通保持高效协作。当产品复杂到需要5个以上团队同时开发时,我们需要一定的...

阿里云云栖社区
45分钟前
1
0
基于虹软人脸识别Demo android人脸识别

参加一个比赛,指定用虹软的人脸识别功能,奈何虹软人脸识别要自己建人脸库,不然就只能离线用,总不能装个样子,简单看了下虹软Demo,下面决定用这种简单方法实现在线人脸识别: Android端(...

是哇兴哥棒棒哒
50分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部