Create a colored bubble/circle programmatically in ObjectiveC and Cocoa

Question

Can anyone guide me in the correct way to build a colored bubble/circle programmatically?

I can't use images as I need it to be able to be any color depending on user interaction.

My thought was maybe to make a white circle image and then overlay a color on top of it. However I am not sure if this would work, or how to really go about it.

If someone could point me the right direction I would appreciate it.

Answer 1

There are a couple steps to drawing something in Cocoa.

First you need a path that will be used to define the object that you are going to be drawing. Take a look here Drawing Fundamental Shapes for a guide on creating paths in Cocoa. You will be most interested in sending the "appendBezierPathWithOvalInRect" message to an "NSBezierPath" object, this takes a rectangle that bounds the circle you want to draw.

This code will create a 10x10 circle at coordinates 10,10:

NSRect rect = NSMakeRect(10, 10, 10, 10);
NSBezierPath* circlePath = [NSBezierPath bezierPath];
[circlePath appendBezierPathWithOvalInRect: rect];

Once you have your path you want to set the color for the current drawing context. There are two colors, stroke and fill; stroke is the outline of the path and the fill is the interior color. To set a color you send "set" to an "NSColor" object.

This sets the stroke to black and the fill to red:

[[NSColor blackColor] setStroke];
[[NSColor redColor] setFill];

Now that you have your path and you have your colors set just fill the path and then draw it:

[path stroke];
[path fill];

All of this will need to be done in a graphics context like in drawRect of a view perhaps. All of this together with a graphics context would look like this:

- (void)drawRect:(NSRect)rect
{
    // Get the graphics context that we are currently executing under
    NSGraphicsContext* gc = [NSGraphicsContext currentContext];

    // Save the current graphics context settings
    [gc saveGraphicsState];

    // Set the color in the current graphics context for future draw operations
    [[NSColor blackColor] setStroke];
    [[NSColor redColor] setFill];

    // Create our circle path
    NSRect rect = NSMakeRect(10, 10, 10, 10);
    NSBezierPath* circlePath = [NSBezierPath bezierPath];
    [circlePath appendBezierPathWithOvalInRect: rect];

    // Outline and fill the path
    [circlePath stroke];
    [circlePath fill];

    // Restore the context to what it was before we messed with it
    [gc restoreGraphicsState];
}

Answer 2

You may use simple UIView to create perfect circle with only parameter radius:

// Add framework CoreGraphics.framework
#import <QuartzCore/QuartzCore.h>

-(UIView *)circleWithColor:(UIColor *)color radius:(int)radius {
    UIView *circle = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 2 * radius, 2 * radius)];
    circle.backgroundColor = color;
    circle.layer.cornerRadius = radius;
    circle.layer.masksToBounds = YES;
    return circle;
}

Answer 3

Create an NSView subclass that holds an NSColor as an ivar. In the drawRect method, create an NSBezierPath of the appropriate size, using the view's bounds. Then set the color [myColor set] and fill the path [myPath fill]. There's a lot more you can do, such as set transparency, a border, and so on and so on, but I'll leave that to the docs unless you have a specific question.

To use the NSView subclass, just drag a view object onto your nib, and choose the name of your subclass in custom class in IB's inspector. You'll need to also set an outlet to it in your controller, so you can change the color as needed.