how to display Circular progress bar in UICollectionviewCell?

Question

How to display circular progress bar in uicollectionview with lazy loading image.

        ClothCell weakCell = (ClothCell )[collectionView dequeueReusableCellWithReuseIdentifier:@"ClothesCell" forIndexPath:indexPath];
        weakCell.tag=indexPath.item;
        weakCell.contentView.opaque = NO;
        weakCell.contentView.clipsToBounds = YES;
        weakCell.opaque = YES;
        weakCell.clipsToBounds = YES;
        weakCell.contentView.backgroundColor = [UIColor clearColor];
        Clothes *clothes = [self.arrayClothes objectAtIndex:indexPath.item];
        [weakCell.imageViewCloth setImage:nil];
          dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), ^{
     //   dispatch_async(dispatch_get_main_queue(), ^{
        [self.manager downloadWithURL:clothes.url options:SDWebImageLowPriority progress:^(NSUInteger receivedSize, long long expectedSize) {
            CGFloat domandeFloat = [[NSNumber numberWithInteger:receivedSize]floatValue];
            CGFloat corretteFloat = [[NSNumber numberWithLongLong:expectedSize] floatValue];
            float currentProgress = domandeFloat/corretteFloat;
                 [weakCell.circleProgressBar setProgress:currentProgress animated:YES];
        } completed:^(UIImage image, NSError error, SDImageCacheType cacheType, BOOL finished) {
            if(image){
                weakCell.imageViewCloth.image=image;
                weakCell.imageViewCloth.clipsToBounds = YES;
                weakCell.imageViewCloth.layer.borderWidth = 1.0;
                weakCell.imageViewCloth.layer.borderColor = [UIColor blackColor].CGColor;
                [weakCell.circleProgressBar setProgress:1 animated:YES];
            }
        }];

});
    //[weakCell.imageViewCloth setImageWithURL:clothes.url];

        return weakCell;
}

I have try this code and i face problem when i scroll up and down. It use same cell.

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

First of all, you should find a circular progress bar which you are going to use or build your own. I usually use one of these options:

Use CALayer, draw progress using drawRect, animate progress using animatable variable using Facebook POP;
Use CAShaperLayer and animate strokeEnd.

To make it work you should at least:

Notify all visible cells that progress of your item which you download has changed and set new progress only to required cell;
On - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath pre-populate progress.

This questions was already asked here, and here.

I made a little bit of research and found this one: XLRemoteImageView. Worth having a look. Thanks to xmartlabs.

edited May 23 '17 at 11:58

Community

1
1

answered Aug 25 '15 at 10:03

gontovnik

690
5
9

thanks for answer but if you have code of that so please provide me ..plz. – Ankit Kargathra Aug 25 '15 at 10:26
On how to do progress or on how to download file? In the links I referenced in my answer you can find code examples of how to update cell when progress has changed. – gontovnik Aug 25 '15 at 10:31
my requirement is like as lazy loading image in collectionview cell with percentage progressbar – Ankit Kargathra Aug 25 '15 at 10:45
I have updated my answer, have a look at [XLRemiteImageView](https://github.com/xmartlabs/XLRemoteImageView). – gontovnik Aug 25 '15 at 10:48

how to display Circular progress bar in UICollectionviewCell?

1 Answers1