How to make the different colour appearance while

Question

I am doing some custom download progresses bar in side the (subclassed) UIButton (or) i can also do that in UIView, every thing is fine, now i want change the colour of the title as the progress the proceeds, for example as u can see in the below image shows what is now i am getting,

what i want is like below image

i want change the color of the title to white or some other color as download proceeds, is there any way i can do, any sample code for this.

i am achieving this by using below code

 - (void)drawInContext:(CGContextRef)progressContext
  {

     CGContextSetFillColorWithColor(progressContext, self.progressLayerColor.CGColor);
     CGMutablePathRef Path = CGPathCreateMutable();
     CGRect boundsRect = self.bounds;
     CGPathMoveToPoint(Path, NULL, boundsRect.origin.x, boundsRect.origin.y);

     CGPathAddRect(Path, NULL, CGRectMake(0, 0, self.progress, 35));
     CGPathCloseSubpath(Path);
     CGContextAddPath(progressContext, Path);
     CGContextFillPath(progressContext);
     CGContextSetBlendMode(progressContext, kCGBlendModeClear);
     CGContextFillPath(progressContext);

     CGPathRelease(Path);

  }

Answer 1

A trivial solution would be to use 2 UIImageViews. The one below would have an image with white background and black text, and the one above would have green background with white text. The image below would always have the same frame, but the other would start with a width 0. As the download progresses you would increase it's width and it would start to cover the image that is below (with the black font). And of course, you would use the View Mode: left on your expanding image view, to always have the image positioned on the left with no resizing.

Answer 2

I'd do this with two UILabels, one with a green background and white text, one with a white background and black text, with the green one one on top of the other with the same frame.

The topmost label has a CAShapeLayer as it's layers mask. The CAShapeLayer has a single, wide (at least the height of the label) black stroke across its whole length, from left to right.

By default this would make the whole view look green. So far, so useless.

However, a CAShapeLayer has an (animatable) strokeEnd property. If you set this to 0.0, the green label will be invisible. Set it to 0.5, you see half and half.

You now have a method to animate a progress meter, just by updating the strokeEnd property of this mask layer.

Answer 3

With the help of what @jrturton suggested i am able to make this kind of progress bar,

CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = _labelGreen.bounds;//it the label on top with green background and white text color
CGMutablePathRef mutPath = CGPathCreateMutable();
CGPathMoveToPoint(mutPath, NULL, 0, 0);
CGPathAddRect(mutPath, NULL, CGRectMake( 0, 0, progress, _labelGreen.frame.size.height)); //as the progress cganges the width of mask layer also changes
maskLayer.path = mutPath;//set the path

_labelGreen.layer.mask = maskLayer;

the resulted output will be like below image