This post will talk briefly about setting up a bare-bones iOS app to illustrate what unit testing is all about and how to utilize the XCTest Framework for writing your own tests.

Imagine that you are writing a method to validate US and Canadian ZIP codes (or postal codes, as they’re called in Canada). In the US, ZIP codes are 5-digits long. Things like 77335, 06226, 29631 and so on.

In Canada, postal codes are typically written using 6 characters, with a space after the first three characters, like so:

LNL NLN

In the above code, L is a letter from the alphabet and N is a number or digit from 0-9. So Canadian postal codes can look like A2K 4L8, K7G 5T9, M2N 6P8 and so on. To make things more interesting, there are some additional rules about what letters are allowed (or rather not allowed) at various positions:

• The first letter cannot be W or Z.
• The letters D F I O Q U are not allowed at any location.

There might be more rules, but we’ll stop here. You get the idea where this is going. We’ll need to write a method that receives a user input string and then parses the string to make sure all these rules are met (for both US and Canada). Let’s assume you cook up the following class method somewhere in your model:

+ (BOOL) validateZip:(NSString *)userZip
{
    .
    .
    .    
}

If the user enters the correct ZIP code, this method should return YES, otherwise it should return NO.

Once you finish developing this method, you simply go to the test section of your project and start adding in various test cases to check your method. There are some who maintain that these test cases should be written even before you create the above method – we will not argue about what approach is best – do whatever works for you.

For simplicity, this post only talks about the following testing methods, which suffice for our purpose here:

• XCTAssertTrue( something_that_should_be_true, @”optional message displayed when that something is false” )
• XCTAssertFalse (something_that_should_be_false, @”optional message displayed when that something is true” )

This is how you use them in the code (all you need is to include the header file of your model class in the test case file):

#import <UIKit/UIKit.h>
#import <XCTest/XCTest.h>
#import "ZipCodeValidation.h"

@interface ZipCheckTests : XCTestCase

@end

@implementation ZipCheckTests

- (void)setUp {
    [super setUp];
    // Put setup code here. This method is called before the invocation of each test method in the class.
}

- (void)tearDown {
    // Put teardown code here. This method is called after the invocation of each test method in the class.
    [super tearDown];
}

// Invalid ZIP or Canadian Postal codes

- (void)test_empty_zip_not_allowed {
    XCTAssertFalse([ZipCodeValidation validateZip:@""],
                   @"blank entry is invalid");
}

- (void)test_just_spaces_not_allowed {
    XCTAssertFalse([ZipCodeValidation validateZip:@"      "],
                   @"lots of spaces is not a valid entry");
}

- (void)test_random_names_not_allowed {
    XCTAssertFalse([ZipCodeValidation validateZip:@"Ludwig Van Beethoven"],
                   @"random names should fail");
}

- (void)test_strange_characters_not_allowed {
    XCTAssertFalse([ZipCodeValidation validateZip:@"$[]&@!"],
                   @"special characters are not allowed");
}

// USA

- (void)test_USA_01 {
    XCTAssertTrue([ZipCodeValidation validateZip:@"23324"],
              @"23324 should be valid");
}

- (void)test_USA_02 {
    XCTAssertTrue([ZipCodeValidation validateZip:@"  06 226   "],
              @"spaces should not matter");
}

- (void)test_USA_03 {
    XCTAssertTrue([ZipCodeValidation validateZip:@"12345"],
              @"any 5-digit code is valid for the US");
}

- (void)test_USA_04 {
    XCTAssertFalse([ZipCodeValidation validateZip:@"1234"],
                   @"4 digits not allowed");
}

- (void)test_USA_05 {
    XCTAssertFalse([ZipCodeValidation validateZip:@"123456"],
                   @"6 digits not allowed");
}

- (void)test_USA_06 {
    XCTAssertFalse([ZipCodeValidation validateZip:@"12w45"],
                   @"letters not allowed for the US");
}

// Canada

- (void)test_CANADA_01 {
    XCTAssertTrue([ZipCodeValidation validateZip:@"a2a 2a2"],
              @"a2a 2a2 should be fine");
}

- (void)test_CANADA_02 {
    XCTAssertTrue([ZipCodeValidation validateZip:@"a2a2a2"],
              @"a2a2a2 should also work");
}

- (void)test_CANADA_03 {
    XCTAssertTrue([ZipCodeValidation validateZip:@"A2A 2A2"],
              @"A2A 2A2 should be valid");
}

- (void)test_CANADA_04 {
    XCTAssertFalse([ZipCodeValidation validateZip:@"W2A 2A2"],
                   @"W cannot be the first letter");
}

- (void)test_CANADA_05 {
    XCTAssertFalse([ZipCodeValidation validateZip:@"Z2A 2A2"],
                   @"Z cannot be the first letter");
}

- (void)test_CANADA_06 {
    XCTAssertTrue([ZipCodeValidation validateZip:@"S2W 2Z2"],
              @"W and Z elsewhere is fine");
}

- (void)test_CANADA_07 {
    XCTAssertFalse([ZipCodeValidation validateZip:@"S2D 2Z2"],
                   @"D is not allowed");
}

- (void)test_CANADA_08 {
    XCTAssertFalse([ZipCodeValidation validateZip:@"S2F 2Z2"],
                   @"F is not allowed");
}

- (void)test_CANADA_09 {
    XCTAssertFalse([ZipCodeValidation validateZip:@"I2A 2Z2"],
                   @"I is not allowed");
}

- (void)test_CANADA_10 {
    XCTAssertFalse([ZipCodeValidation validateZip:@"B2A 2O2"],
                   @"O is not allowed");
}

- (void)test_CANADA_11 {
    XCTAssertFalse([ZipCodeValidation validateZip:@"B2Q 2A2"],
                   @"Q is not allowed");
}

- (void)test_CANADA_12 {
    XCTAssertFalse([ZipCodeValidation validateZip:@"U2A 2A5"],
                   @"U is not allowed");
}

@end

You can add as many tests you like in this file. To run these tests, use

Product —> Test (or the keyboard shortcut  Command + U)

Xcode will run all your tests and place cute little check signs next to each test to let you know which tests pass and which tests fail.

That’s it! Isn’t unit testing cool? Now that I’ve wrapped my head around the basics, I will start adding unit tests to several of my iOS projects.

INTRODUCTION

Is it possible to fall in love with a mathematical object? If the object in question is the Mandelbrot set, then the answer is a definite yes. This post talks about an iPad app that helps us explore the strange, hypnotic and never-ending beauty of this well-known fractal.

The image above shows a zoomed-in view of a certain part of the Mandelbrot set. The points in black are inside the set and those in blue are outside the set. Much of the artistic appeal of the set depends on the color scheme you design to mark the points at the borderline. I used the exact same color scheme from my C++/OpenGL tutorial and a lot of code (in the Model) was directly ported from C++ to Objective-C.

The displayed image is divided into 4 quadrants by the white lines. You select where you want to zoom in by tapping the appropriate block with your finger. For example, here is a sequence of touch events from the very beginning of the set:

Naming the blocks using 1 (top-left), 2 (top-right), 3 (bottom-left) and 4 (bottom-right), the journey above may be abbreviated thus: 1-4-3-1. The large image at the beginning of this article was obtained using the following sequence: 1-4-4-1-3-3. The possible journeys are infinite and one can probably spend several lifetimes exploring every nook and cranny.

UNDER THE HOOD

The overall design of this app follows the usual Model-View-Controller strategy. The model consists of the minimum and maximum (x, y) coordinates of the window in the complex plane, the number of divisions along x and y (resolution), a 2D array that holds the parameter value used to color the set and a method to determine whether a point belongs in the set or not. Here is the implementation of the Model class:

#import "Model.h"

@implementation Model
@synthesize xmin, xmax, ymin, ymax;
@synthesize nx, ny;
@synthesize MAX_ITER;
@synthesize iters;

// override superclass implementation of init
-(id) init
{
    self = [super init];
    if (self) {
        nx = 500;
        ny = 500;
        xmin = -2.0;
        xmax = 1.0;
        ymin = -1.5;
        ymax = 1.5;
        MAX_ITER = 200;
        
        // allocate 2D array
        iters = [[NSMutableArray alloc] initWithCapacity:nx*ny];
        
        // initialize the 2D "iters" array, which
        // represents the number of iterations it takes for the
        // point to escape from the set
        
        for(int i = 0; i < nx; i++) {
            for(int j = 0; j < ny; j++) {
                [iters addObject:@(0)];
            }
        }
    }
    
    return self;
}

// this function checks if a point (x,y) is a member of the Mandelbrot set
// it returns the number of iterations it takes for this point to escape from the set
// if (x,y) is inside the set, it will not escape even after the maximum number of iterations
// and this function will take a long time to compute this and return the maximum iterations

- (int) Mandelbrot_Member_x:(double) x and_y: (double) y
{
    double cx = x, cy = y;
    double zx = 0.0, zy = 0.0;
    
    int iter = 0;
    
    while(iter < MAX_ITER)
    {
        iter++;
        double real = zx*zx - zy*zy + cx;
        double imag = 2.0*zx*zy + cy;
        double mag = sqrt(real*real + imag*imag);
        if (mag > 2.0) break;   // (x,y) is outside the set, quick exit from this loop
        zx = real;
        zy = imag;
    }
    return iter;
}

// update the 2D array which stores "iterations to escape" based on the
// current window
- (void) updateMandelbrotData
{
    double dx = (xmax - xmin)/nx; // grid spacing along X
    double dy = (ymax - ymin)/ny; // grid spacing along Y
    
    // update the 2D "iters" array, which
    // represents the number of iterations it takes for the
    // point to escape from the set
    
    for(int i = 0; i < nx; i++) {
        for(int j = 0; j < ny; j++) {
            
            double x = xmin + dx/2 + i*dx;   // actual x coordinate
            double y = ymin + dy/2 + j*dy;   // actual y coordinate
            
            // calculate iterations to escape
            int iterationsToEscape = [self Mandelbrot_Member_x: x and_y: y];
            
            // natural index
            int N = i + nx*j;
            
            // add this entry to the 2D "iters" array
            [iters removeObjectAtIndex:N];
            [iters insertObject:@(iterationsToEscape) atIndex:N];
        }
    }
}

@end

There are two views, both subclasses of UIView: one displays the set itself and the other draws the horizontal and vertical centerlines. The implementation of the Class that draws the set is provided below for reference:

#import "DrawMandelbrot.h"

@implementation DrawMandelbrot

@synthesize nx, ny;
@synthesize MAX_ITER;
@synthesize data;

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}

- (void) initData
{
    data = [[NSMutableArray alloc] initWithCapacity:nx*ny];
    
    for(int i = 0; i < nx; i++) {
        for(int j = 0; j < ny; j++) {
            [data addObject:@(0)];
        }
    }
}

- (void)drawRect:(CGRect)rect
{
    // get the current context
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    // context size in pixels
    size_t WIDTH = CGBitmapContextGetWidth(context);
    size_t HEIGHT = CGBitmapContextGetHeight(context);
    
    // for retina display, 1 point = 2 pixels
    // context size in screen points
    float width = WIDTH/2.0;
    float height = HEIGHT/2.0;
    
    float dx = width/nx;
    float dy = height/ny;
    
    // assign color based on the number of iterations - Red Green Blue (RGB)`
    
    for(int i = 0; i < nx; i++) {
        for(int j = 0; j < ny; j++) {
            
            int N = i + nx*j;
            int VAL = [[data objectAtIndex:N] intValue];
                        
            UIColor* fillColor;
            
            if(VAL==MAX_ITER)
            {
                fillColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:1.0];   // black
            }
            else
            {
                // ratio of iterations required to escape
                // the higher this value, the closer the point is to the set
                float frac = (float) VAL / MAX_ITER;
                
                if(frac <= 0.5)
                {
                    // yellow to blue transition
                    fillColor = [UIColor colorWithRed:2*frac green:2*frac blue:1.0 - 2*frac alpha:1.0];
                    //glColor3f(2*frac,2*frac,1-2*frac);
                }
                else
                {
                    // red to yellow transition
                    fillColor = [UIColor colorWithRed:1.0 green:2.0-2.0*frac blue:0.0 alpha:1.0];
                    //glColor3f(1,2-2*frac,0);
                }
            }

            // draw colored rectangle
            double x = i*dx;          // screen x coordinate
            double y = (ny-j-1)*dy;   // screen y coordinate
            CGRect rect = CGRectMake(x, y, dx, dy);
            [fillColor setFill];
            CGContextFillRect(context, rect);
        }
    }
}

@end

Note that we are using the Core Graphics API to render the 2D color data. This is not necessarily the best approach, but I believe it is the simplest to understand and implement. In the future, I plan to use OpenGL-ES and accelerate the calculation and graphics using GPU computing (CUDA/OpenCL).

Finally, the controller interprets the model for the views and updates the model data based on user touch-events. Essentially, we figure out which quadrant the user touched and update the minimum and maximum x and y coordinates appropriately, ask the Model to re-calculate the 2D array in the new window and send the updated data to the View for rendering. Here is the Controller implementation:

#import "ViewController.h"
#import "CrossHair.h"
#import "Model.h"
#import "DrawMandelbrot.h"

@interface ViewController ()
@property (strong, nonatomic) IBOutlet UIView *blackBox;
@property float width, height;
@property (strong, nonatomic) CrossHair* cross;
@property (strong, nonatomic) Model* model;
@property (strong, nonatomic) DrawMandelbrot* drawSet;
- (IBAction)backToSquareOne:(id)sender;
@end

@implementation ViewController
@synthesize blackBox;
@synthesize width, height;
@synthesize cross;
@synthesize model;
@synthesize drawSet;

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    // black box view dimensions
    width = blackBox.frame.size.width;
    height = blackBox.frame.size.height;
    
    // initialize the model
    model = [[Model alloc] init];

    // get window size
    CGRect viewRect = CGRectMake(0, 0, width , height);

    // initialize the Mandelbrot view
    drawSet = [[DrawMandelbrot alloc] initWithFrame:viewRect];
    drawSet.nx = model.nx;
    drawSet.ny = model.ny;
    drawSet.MAX_ITER = model.MAX_ITER;
    [drawSet initData];
    
    // initialize cross view
    cross = [[CrossHair alloc] initWithFrame:viewRect];
    [cross setBackgroundColor:[UIColor clearColor]];
    
    // add subviews
    [blackBox addSubview:drawSet];
    [blackBox addSubview:cross];
    
    // draw the Mandelbrot set
    [self drawMandelbrotSet];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


// touch events determine where we need to zoom in
//   +------+------+
//   |      |      |
//   |  1   |   2  |
//   |      |      |
//   +------+------+
//   |      |      |
//   |  3   |   4  |
//   |      |      |
//   +------+------+

- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    for (UITouch* t in touches) {
        CGPoint touchLocation;
        touchLocation = [t locationInView:blackBox];
        float x = touchLocation.x;
        float y = touchLocation.y;
        
        float dx = width / 2;
        float dy = height / 2;
        
        // find out array location where finger touches the screen
        int xIndex = x/dx;
        int yIndex = y/dy;
        int N = (xIndex + 2*yIndex) + 1;
        
        NSLog(@"You selected block %d", N);
        
        switch (N) {
            case 1:
                model.xmax = model.xmin + (model.xmax - model.xmin)/2;
                model.ymin = model.ymin + (model.ymax - model.ymin)/2;
                break;
                
            case 2:
                model.xmin = model.xmin + (model.xmax - model.xmin)/2;
                model.ymin = model.ymin + (model.ymax - model.ymin)/2;
                break;
            
            case 3:
                model.xmax = model.xmin + (model.xmax - model.xmin)/2;
                model.ymax = model.ymin + (model.ymax - model.ymin)/2;
                break;
                
            case 4:
                model.xmin = model.xmin + (model.xmax - model.xmin)/2;
                model.ymax = model.ymin + (model.ymax - model.ymin)/2;
                break;
                
            default:
                break;
        }
        
        [self drawMandelbrotSet];
    }
}

- (void) drawMandelbrotSet
{
    [model updateMandelbrotData];
    drawSet.data = model.iters;
    [drawSet setNeedsDisplay];
}

- (IBAction)backToSquareOne:(id)sender {
    model.xmin = -2.0;
    model.xmax = 1.0;
    model.ymin = -1.5;
    model.ymax = 1.5;

    [self drawMandelbrotSet];
}

@end

Notice we have a RESET button to go back to the original window. This merely resets the minimum and maximum x and y limits to their original values.

The entire source code can be cloned from

https://github.com/jabhiji/ios-mandelbrot.git

Happy Xcoding!

This short post is a tutorial on how to embed a specified webpage on the screen using the UIWebView class. This class includes several methods to load web content and several properties to control how the web page is displayed inside the window.

The screenshot shows a simple example where I embed the exact same web page (http://www.joshiscorner.com) in two different UIWebView objects:

STEP 1: Set up the storyboard

Drag two UIWebView objects to the storyboard and size both views to be 280 by 250.

STEP 2: Make connections

Make IBOutlet connections by ctrl-clicking from the UIWebViews on the storyboard to the ViewController interface.

STEP 3: Specify the URL and display it inside the window

The ViewController implementation is copied below.

#import "ViewController.h"

@interface ViewController ()
@property (strong, nonatomic) IBOutlet UIWebView *webView1;
@property (strong, nonatomic) IBOutlet UIWebView *webView2;
@end

@implementation ViewController
@synthesize webView1;
@synthesize webView2;

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    NSString *string = @"http://www.joshiscorner.com";
    NSURL *url = [NSURL URLWithString:string];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];

    [webView1 loadRequest:request];

    [webView2 loadRequest:request];
    webView2.scalesPageToFit = YES;
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

As usual, we synthesize the two UIWebView properties and then use the NSURL class to specify the URL we wish to load. In this case, we load the same URL in both the windows. But in the top window, we load the page “as is”, that is using the width specified in the HTML/CSS on the remote server. In this case, the width of the page is set to 970px, while the width of the iPhone screen is 320px. So when we display the page “as is”, only a fraction of the content is seen inside the window.

In the second view, we use the “scalesPageToFit” property of the UIWebView object and set it to YES. This forces the view to display the entire width of the web page.

You can learn more about the UIWebView class on the Apple Developer website.

How do I draw free-form shapes on the iPhone screen with my finger? This post is an introduction to a simple paintbrush style app that does exactly that. Actually, this type of app is much more suitable for an iPad, but we’ll stick to the iPhone for now.

In the above app, you simply place your finger inside the black UIView window and start drawing whatever you want. The default drawing color is white. To change to a different color, just click on the appropriate color buttons. To keep things simple, there are only 5 color options.

How it works under the hood

The heart of this app is a set of pre-built methods that can sense touch events and return the coordinates (relative to the view) where your finger touches and interacts with the screen. There are three primary touch events:

• Your finger touches the screen for the first time (touch begins)
• Your finger moves from point A to point B on the screen
• Your finger leaves the screen (touch ends)

This is how these methods appear in actual code:

- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
- (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event

The methods are inserted in the View Controller implementation, and the usual practice is to override the default implementations (which do nothing) with our own custom implementation.

Like the other apps we developed so far, the ViewController interface contains IBOutlets, IBAction items from the storyboard and other properties used in the implementation. Here is the ViewController interface for this app:

#import 
#import "Circle.h"

@interface ViewController : UIViewController

@property (strong, nonatomic) IBOutlet UIView *blackBox;
@property (strong, nonatomic) NSMutableArray* circleArray;
@property int i;
@property UIColor* currentColor;

- (IBAction)redColor:(id)sender;
- (IBAction)blueColor:(id)sender;
- (IBAction)yellowColor:(id)sender;
- (IBAction)greenColor:(id)sender;
- (IBAction)whiteColor:(id)sender;
- (IBAction)clearScreen:(id)sender;

@end

The implementation file contains the meat of the app and I encourage you to uncomment some of the NSLog calls to get a feel of the numbers (x and y coordinates) returned by the three touch methods.

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

@synthesize blackBox;
@synthesize circleArray;
@synthesize i;
@synthesize currentColor;

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    blackBox.clipsToBounds = YES;
    circleArray = [[NSMutableArray alloc] initWithCapacity:1000];
    i = 0;
    currentColor = [UIColor whiteColor];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    for (UITouch* t in touches) {
        CGPoint touchLocation;
        touchLocation = [t locationInView:blackBox];
        //NSLog(@"touchedBegan at %f %f", touchLocation.x, touchLocation.y);
    }
}

- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    for (UITouch* t in touches) {
        CGPoint touchLocation;
        touchLocation = [t locationInView:blackBox];
        //NSLog(@"touchesMoved at %f %f", touchLocation.x, touchLocation.y);
        float x = touchLocation.x;
        float y = touchLocation.y;
        float R = 10.0;
        CGRect circleFrame = CGRectMake(x-R, y-R, 2*R, 2*R);
        Circle* circle = [[Circle alloc] initWithFrame:circleFrame];
        [circle setBackgroundColor:[UIColor clearColor]];
        circle.circleColor = currentColor;
        [circleArray addObject:circle];
        [blackBox addSubview:circleArray[i]];
        i++;
    }
}

- (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    for (UITouch* t in touches) {
        CGPoint touchLocation;
        touchLocation = [t locationInView:blackBox];
        //NSLog(@"touchesEnded at %f %f", touchLocation.x, touchLocation.y);
    }
}

- (IBAction)clearScreen:(id)sender {
    for (int kount=0; kount<i; kount++) {
        [circleArray[kount] removeFromSuperview];
    }
    [circleArray removeAllObjects];
    circleArray = nil;
    circleArray = [[NSMutableArray alloc] initWithCapacity:1000];
    i = 0;
}

- (IBAction)redColor:(id)sender {
    currentColor = [UIColor redColor];
}

- (IBAction)blueColor:(id)sender {
    currentColor = [UIColor blueColor];
}

- (IBAction)yellowColor:(id)sender {
    currentColor = [UIColor yellowColor];
}

- (IBAction)greenColor:(id)sender {
    currentColor = [UIColor greenColor];
}

- (IBAction)whiteColor:(id)sender {
    currentColor = [UIColor whiteColor];
}


@end

Once the finger coordinates (x, y) are obtained using these methods, we allocate a Circle object (subclass of UIView) that draws a filled circle of a certain size at that (x, y) location. As your finger moves, the coordinates keep changing and we scramble more and more Circle objects to draw additional circles along the path. If you move your finger too quickly, you will actually see the individual circles. Go slow if you want to create the illusion of drawing a continuous thick line.

Notice that we use a NSMutableArray to keep track of all the Circle objects because later on, we want to clear the entire screen by removing all those views from the superview. The NSMutableArray is initialized with a maximum capacity to hold 1000 objects. Obviously, as we draw more and more circles, the size of the NSMutableArray and the memory needed by the app increases. Because of this reason, you will notice some sluggishness in the drawing when you draw far too many shapes in the view. All this memory is released when we hit the CLEAR button (triggering the clearScreen method above).

Finally, here is the interface and implementation file for the Circle class:

#import <UIKit/UIKit.h>

@interface Circle : UIView
@property UIColor* circleColor;
@end

Clicking the color buttons in the UI triggers methods that change the circleColor property. Background images of the appropriate color were used for all the color buttons.

#import "Circle.h"

@implementation Circle

@synthesize circleColor;

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}

// Custom drawing: circle filled with the specified color
- (void)drawRect:(CGRect)rect
{
    // get the current context
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    // context size in pixels
    size_t WIDTH = CGBitmapContextGetWidth(context);
    size_t HEIGHT = CGBitmapContextGetHeight(context);
    
    // for retina display, 1 point = 2 pixels
    // context size in screen points
    float width = WIDTH/2.0;
    float height = HEIGHT/2.0;
    
    // center coordinates
    float xCen = width/2.0;
    float yCen = height/2.0;
    float maxR = width/2.0;     // WIDTH = HEIGHT in this case

    // circle of specified color
    CGContextBeginPath(context);
    CGContextAddArc(context, xCen, yCen, maxR, 0, 2*M_PI, YES);
    [circleColor setFill];
    CGContextDrawPath(context, kCGPathFill);
}

@end

If you wish to reduce the thickness of the lines in your drawing, simply reduce the frame size when you draw the Circle object. The size I am presently using is 20 points (circle radius = 10).

—

In summary, this post was a quick introduction to the world of sensing touch events in iOS and using this information to create a simple paintbrush-style app. Want some suggestions for using this app? How about teaching toddlers how to draw numbers and letters in English or in your native alphabet?

As always, you can download the entire source code for this project from my GitHub link:

https://github.com/jabhiji/ios-touch-paintbrush.git

Happy Xcoding!