Circular Progress Bar using Objective C

This video shows how to create circular progress bar using objective-c and cocoa framework. To code this project, I used xcode 7.1.1 and mac os x 10.10.5

Classes used: nsbezierpath, NSAffineTransform

Java Version: Circular Progressbar using Java https://youtu.be/zA82Mp5BXC4

Enjoy!!!
don’t forget to subscribe on YouTube as more code coming.

ProgressBarView.h

#import <Cocoa/Cocoa.h>

@interface ProgressBarView : NSView{
    NSDictionary *attributes;
    @public
    int progress;
    
}

@end


ProgressBarView.m
#import "ProgressBarView.h"

@implementation ProgressBarView

-(void)viewDidMoveToWindow{
    self->progress=0;
    attributes=[NSDictionary dictionaryWithObjectsAndKeys:[NSFont fontWithName:@"Helvetica" size:26],NSFontAttributeName,[NSColor redColor],NSForegroundColorAttributeName, nil];
}

- (void)drawRect:(NSRect)dirtyRect {
    [super drawRect:dirtyRect];
    
    NSAffineTransform *tran=[NSAffineTransform transform];
    [tran translateXBy:dirtyRect.size.width/2 yBy:dirtyRect.size.height/2];
    [tran rotateByDegrees:270];
    [tran concat];
    
    NSBezierPath *path=[NSBezierPath bezierPath];
    [path setLineWidth:2];
    [path moveToPoint:NSMakePoint(0, 0)];
    [path appendBezierPathWithArcWithCenter:NSMakePoint(0, 0) radius:100 startAngle:0 endAngle:self->progress*3.6];//360/100=3.6
    [path closePath];
    [[NSColor redColor] setFill];
    [path fill];
    
    path=[NSBezierPath bezierPath];
    [path setLineWidth:2];
    [path moveToPoint:NSMakePoint(0, 0)];
    [path appendBezierPathWithArcWithCenter:NSMakePoint(0, 0) radius:90 startAngle:0 endAngle:360];
    [path closePath];
    [[NSColor whiteColor] setFill];
    [path fill];
    
    tran=[NSAffineTransform transform];
    [tran rotateByDegrees:90];
    [tran concat];
    
    NSAttributedString *cur_text=[[NSAttributedString alloc] initWithString:[NSString stringWithFormat:@"%d%%",progress] attributes:attributes];
    NSSize text_size=[cur_text size];
    NSRect r=NSMakeRect(0+(0-text_size.width)/2, 0+(0-text_size.height)/2, text_size.width, text_size.height);
    [cur_text drawInRect:r];
    
}

-(BOOL)isFlipped{
    return true;
}

@end

You may also like...