IOS picture loading circular progress bar

IOS picture loading circular progress bar

There is a need to load network images in the project. Adding a loading progress bar will improve the user experience. When the network is poor, the progress of image loading will be clearly displayed, which is better than making the user look at the screen blank. The following is a circular progress bar encapsulated by our project.

In fact, the implementation principle is very simple, just draw a circle based on the progress of image loading.

First, let's take a look at the. h file. We need a progress attribute and a method for displaying the position of the progress bar:

 

@property (nonatomic, assign) CGFloat progress;+(HMProgressView *)showHMProgressView:(UIView *)parentView :(CGFloat)viewHeight;

Let's look at the implementation in the. m file:

 

 

+ (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; // re-draw // re-paint the view. The next time the screen is refreshed, drawRect is called. [self setNeedsDisplay]; if (_ progress = 1) {// remove [self removeFromSuperview] when loading is complete; }}// Only override drawRect: if you perform custom drawing. // An empty implementation adversely affects performance during animation. // when the view is displayed, it will be called only once by default-(void) drawRect :( CGRect) rect {// Drawing code // 1. obtain the context CGContextRef ctx = UIGraphicsGetCurrentContext (); // 2. splicing path 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 centers: center radius: radius startAngle: startA endAngle: endA clockwise: YES]; CGContextSetLineCap (ctx, kCGLineCapRound); CGContextSetLineWidth (ctx, 4 ); // 3. add the path to the context [[UIColor lightGrayColor] set]; CGContextAddPath (ctx, path. CGPath); // 4. render the context to the view CGContextStrokePath (ctx );}

It is easy to use. The third-party framework SDWebImage is used to set images in the project. In the image loading method, set the progress:

 

 

        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)         {         }];