Fill In UIView With Multiple Colors iOS

Question

I'd like to fill in a UIView Background with multiple colors. I want to use it as a status bar of sorts, so if 1/2 the necessary steps are completed, the UIView Background will be 1/2 green and 1/2 red. When the user completes more steps (say 2/3), more of the UIView Background turns green (2/3 in this case).

I'm guessing I need to override

-(void) drawREct: (CGRect) rect

I imagine I would get the UIView, figure out how big it is, and divide it into 2 rectangles and then fill in those rectangles.

Another option would be to add 2 UIViews programmatically, but I'm a fan of IB.

Is it possible to divy up a UIView like I want?

Thanks

Answer 1

This is not an IB solution, but you can subclass UIView and override the drawRect method to add a custom gradient. This will allow you to put any number of colors you like and have them transition hard or smoothly. There are many nice tutorials online that should different ways to do this (some more elaborate, some quite simple).

Another option that is fairly simple, is to override drawRect, make the background red, then fill a rectangle that takes up the bottom half of the view. It doesn't allow for fancy or smooth transitions between colors, but it's very easy to implement. For instance, something along these lines should work:

-(void)drawRect:(CGRect)rect {
    CGRect upperRect = CGRectMake(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height * percentDone);
    CGRect lowerRect = CGRectMake(rect.origin.x, rect.origin.y + (rect.size.height * percentDone), rect.size.width, rect.size.height *(1-percentDone));

    [[UIColor redColor] set]; 
    UIRectFill(upperRect);
    [[UIColor greenColor] set]; 
    UIRectFill(lowerRect);
}

Here percentDone is a float (declare, property(nonatomic), synthesize) that you can tie to the user's steps. Then just update the view when the user does something by

splitView.percentDone = .5;
[splitView setNeedsDisplay];

You can smooth this out with animations as well.