CODEWITHSUNDEEP
ioscustom-controls
alex
alex

Reputation: 957

ios bar that changes colors while loading

I am currently working on a project of my own and I would like to implement a custom loading control. It's pretty much what you can find in the app Amen. The colored bar appears only when the app is loading content from the server.

Any tips will be much appreciated. Thanks.

Here are some images to make it more clear

Upvotes: 1

Views: 561

Answers (1)

mbm29414
mbm29414

Reputation: 11598

The "hard" part will be writing a UIView subclass that will handle drawing the colors. You'll want to override the drawRect: method and figure out how to know the progress (or will it just "auto-increment"?) and draw/fill in based on that. Then, you can simply add a UIView in Interface Builder, change the Class type of the view, size it appropriately and off you go!

The "easy" part is that when you want the view to not be visible, you can do one of a number of things:

  1. Move the view off-screen by changing its frame property. (This can be "instantaneous" or animated.)
  2. Set the view invisible by changing its hidden property. (You can animate this, too!)
  3. Get rid of the view entirely by using [barView removeFromSuperview].

Update/Edit

For the actual drawing, try this (done quickly and not tested, so YMMV):

//  ColorProgressBar.h
#import <UIKit/UIKit.h>
@interface ColorProgressBar : UIView {
    float colorWidth;
    float progressPercent;
    NSMutableArray *colors;
}
@property (assign, nonatomic) float colorWidth;
@property (assign, nonatomic) float progressPercent;
@property (strong, nonatomic) NSMutableArray *colors;
@end

//  ColorProgressBar.m
#import "ColorProgressBar.h"
@implementation ColorProgressBar
@synthesize colors;
@synthesize colorWidth;
@synthesize progressPercent;
- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        // Make the color array to use (this is spelled out for clarity)
        [self setColors:[NSMutableArray array]];
        [[self colors] addObject:[UIColor redColor]];
        [[self colors] addObject:[UIColor orangeColor]];
        [[self colors] addObject:[UIColor yellowColor]];
        [[self colors] addObject:[UIColor greenColor]];
        [[self colors] addObject:[UIColor blueColor]];
        [[self colors] addObject:[UIColor purpleColor]];
    }
    return self;
}
- (void)drawRect:(CGRect)rect {
    CGFloat left = 0;
    CGRect drawBox = CGRectZero;
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextClearRect(ctx, rect);
    int colorIndex = -1;
    // Draw each color block from left to right, switching to the next color each time
    do {
        colorIndex = colorIndex + 1;
        if (colorIndex >= [[self colors] count]) colorIndex = 0;
        [(UIColor *)[[self colors] objectAtIndex:colorIndex] setFill];
        drawBox = CGRectMake(left, 0, [self colorWidth], rect.size.height);
        CGContextFillRect(ctx, drawBox);
    } while (left < rect.size.width);
    // Figure out where the "faded/empty" part should start
    left = [self progressPercent] * rect.size.width;
    drawBox = CGRectMake(left, 0, rect.size.width - left, rect.size.height);
    [[UIColor colorWithWhite:1.0 alpha:0.5] setFill];
    CGContextFillRect(ctx, drawBox);
}
@end

With this code, you could use this UIView subclass and each time you wanted to update your progress, you would simply set your progressPercent (it's a float with a designed range from 0.00 to 1.00) and call [myView setNeedsDisplay]. That should be it! ;-)

Upvotes: 1

Related Questions