Search code examples
iosxcodeuiviewuiprogressview

Custom UIView to display progress with dots instead of bar

Progress Bar

I'm trying to setup a view that will display progress with these dots instead of a solid bar. Ideally, I'd like to have the dots fill vertically (Bottom to top).

I have two UIImageViews inside of a UIView, one for the grey background and one with the foreground masked.

 UIImage * bgImg = [UIImage imageNamed:@"prog_bg.png"];
    UIImageView * bgView = [[UIImageView alloc] initWithImage:bgImg];
    progImage = [UIImage imageNamed:@"prog.png"];
    maskRef = [UIImage imageNamed:@"prog_mask.png"].CGImage;
    CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
                                        CGImageGetHeight(maskRef),
                                        CGImageGetBitsPerComponent(maskRef),
                                        CGImageGetBitsPerPixel(maskRef),
                                        CGImageGetBytesPerRow(maskRef),
                                        CGImageGetDataProvider(maskRef), NULL, false);

    CGImageRef maskedImage = CGImageCreateWithMask([progImage CGImage], mask);
    UIImage * img = [UIImage imageWithCGImage:maskedImage];
    imageView = [[UIImageView alloc] initWithImage:img];
    [progView addSubview:bgView];
    [progView addSubview:imageView];

I found the code in this SO question. I can't seem to define the width of the mask from my delegate that updates the progress.

Solution

  • Can you try CGImageGetWidth(maskRef) * percentage in CGImageMaskCreate