Creating a custom loading bar with rounded edges

Question

I'd like to create a simple, custom loading bar that consists of two images I have: one image for the solid colored background and one image for the diagonals. I'm new to iOS, so my approach is going to be to create a custom UIView that uses two UIImageViews, one for each image, with an animation block to move the diagonals image from left to right.

I'm taking this approach because I'm already familiar with UIImageViews and animation blocks. My questions are...

1. Would you suggest a better approach? I'm not at all familiar with layers and, due to time constraints, would prefer not to have to read up on them now, but I'm willing to if it will provide a vastly better implementation.
2. How can I "round" the ends of the loading bar? With my current approach, this is what I'm going to get...

Thanks so much for your wisdom!

Answer 1

Take a look at WNProgressView, it might do what you need.

Answer 2

You can achieve this using the following two ways:

1- import this class into your code #import <QuartzCore/QuartzCore.h>

then add the following two lines into -(void)viewDidLoad method so the bar will be rounded when the view is loaded or you can add it at the place that you want the bar start to be rounded at it.

barImageView.layer.cornerRadius = 10.0f;
barImageView.layer.masksToBounds = YES;

2- Another way is using the following code:

-(void)roundCorners:(UIRectCorner)rectCorner forView:(UIView*)view
{
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds 
                                                   byRoundingCorners:rectCorner
                                                         cornerRadii:CGSizeMake(20.0, 20.0)];
    // Create the shape layer and set its path
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = view.bounds;
    maskLayer.path = maskPath.CGPath;
    
    // Set the newly created shape layer as the mask for the image view's layer
    view.layer.mask = maskLayer;
}

add the following line and viewDidLoad or where you want to start rounding the bar

[self roundCorners:UIRectCornerTopRight|UIRectCornerTopLeft|UIRectCornerBottomRight|UIRectCornerBottomLeft forView:[self.view.subviews objectAtIndex:0] withAngle:10];