Question

I have been wanting to make a circular preloader in my iPhone app, but have been struggling where to get started. I was using Sequel Pro today and saw that they had exactly what I wanted and it’s open source, so I downloaded the source and couldn’t find anything.

I am just looking for a start on how to make something along the lines of:

alt text http://www.grabup.com/uploads/c7b2d101cd9caf0d927c2fa8a7850ba2.png

or

alt text http://www.grabup.com/uploads/fc8520a4425331a3a6a0cbf6508b510f.png

I found some flash tutorials, but it’s hard to translate that into usable code in Objective-C.

Thanks in advance.

Answer 1

It would not be hard to create a UIView subclass for this purpose. In the subclass you would want to do roughly the following in the drawRect routine:

CGContextRef context = UIGraphicsGetCurrentContext();
CGFloat      center_x = self.frame.size.width / 2;
CGFloat      center_y = self.frame.size.height / 2;
double       progress = 0.42; // A floating-point number from 0..1 inclusively

// draw the frame
CGContextAddArc(context,
                center_x,
                center_y,
                std::min(self.frame.size.width, self.frame.size.height),
                0,
                M_PI * 2,
                1 /*clockwise*/);
CGContextStrokePath(context);

// draw the progress indicator
CGContextAddArc(context,
                center_x,
                center_y,
                std::min(self.frame.size.width, self.frame.size.height),
                0,
                M_PI * 2 * progress,
                1 /*clockwise*/);
CGContextFillPath(context);