CODEWITHSUNDEEP
iosuiimageviewuiimage
OutOfBoundsException
OutOfBoundsException

Reputation: 766

Custom progress bar using image

I am working on a custom progress bar that will display a part of an image based on percentage value. My idea was to have two images, original and b&w version. I am displaying the b&w and on top of that I'm cropping, based on percentage, the original image. Is working great but from top to bottom.

I would like to ask, there is any way to make the original image to "grow" from bottom to top?

Below is a sample of my code until now:

    UIImageView *imgDefViewGray = [[UIImageView alloc] initWithFrame:CGRectMake(170, 85, 60, 60)];
    imgDefViewGray.image = [UIImage imageNamed:@"castle-gray.png"];
    [self addSubview:imgDefViewGray];

    UIImageView *imgDefView = [[UIImageView alloc] initWithFrame:CGRectMake(170, 85, 60, 60)];
    imgDefView.image = [UIImage imageNamed:@"castle.png"];

    CGRect rect = CGRectMake(0, 0 , 60, **50**);
    CGImageRef imageRef = CGImageCreateWithImageInRect([imgDefView.image CGImage], rect);
    UIImage *img = [UIImage imageWithCGImage:imageRef];

    imgDefView = [[UIImageView alloc] initWithFrame:CGRectMake(170, 85, 60, **50**)];
    imgDefView.image = img;
    [self addSubview:imgDefView];

So, by changing the value on Bold(double asterisks), I have achieved to crop the original image as much as I want but with direction top->bottom. I would like it bottom->top.

Thanks in advance

Upvotes: 1

Views: 1944

Answers (1)

OutOfBoundsException
OutOfBoundsException

Reputation: 766

After many tries, I've figured out to get the result that I want. Below is my solution to my problem. I hope anyone in the future who will face or want the same find it useful.

    UIImageView *imgDefViewGray = [[UIImageView alloc] initWithFrame:CGRectMake(170, 85, 60, 60)];
    imgDefViewGray.image = [UIImage imageNamed:@"castle-gray.png"];//60x60 b&w image

    UIImage originalImg = [UIImage imageNamed:@"castle.png"];//60x60 original image
    CGRect rect = CGRectMake(0, originalImg.size.height-scaleDefence), 60 , scaleDefence);//scaleDefence is just a float variable that converts current percentage value to px.

    CGImageRef imageRef = CGImageCreateWithImageInRect([originalImg CGImage], rect);
    UIImage *croppedImg = [UIImage imageWithCGImage:imageRef];

    UIImageView *imgDefView = [[UIImageView alloc] initWithFrame:CGRectMake(0, originalImg.size.height-scaleDefence, 60, scaleDefence)];//dynamically changing y-axis depending on cropped image's height.
    imgDefView.image = croppedImg;

    [imgDefViewGray addSubview:imgDefView];//make original image part of b&w
    [self addSubview:imgDefViewGray];//finally add the result to the view

Upvotes: 1

Related Questions