I’ve always liked the way the eBay app for iPad handles multiple photos for a listing. For those that haven’t seen it, the way it works is that all photos are stacked on top of one another, and the user flicks through the pile.

PhotoStack is my attempt to re-create this user interface. Here’s a video demo of it working:

Installation

First, download the source (including example Xcode project) from here, then include PhotoStackView.h, PhotoStackView.m and PhotoBorder.png files into your project.

Include PhotoStackView.h and you’re ready to go! To create a PhotoStack object, first initialise it as you would with a normal view:

PhotoStackView *photoStack = [[PhotoStackView alloc] initWithFrame:CGRectMake(0, 0, 300, 300)];

Set Up DataSource

To populate with photos, you’ll need to set the controller class as a PhotoStackViewDataSource.

photoStack.dataSource = self;

The PhotoStackViewDataSource protocol requires two methods to be implemented. These are modelled off Apple’s TableView convention so they should be familiar to most developers.

-(NSUInteger)numberOfPhotosInPhotoStackView:(PhotoStackView *)photoStack;

The above should return the number of photos in the PhotoStack view.

-(UIImage *)photoStackView:(PhotoStackView *)photoStack photoForIndex:(NSUInteger)index;

The above should return a UIImage for the provided index.

Set Up Delegate

There is also a PhotoStackViewDelegate protocol which can be used like so:

photoStack.delegate = self;

This protocol contains four optional methods.

-(void)photoStackView:(PhotoStackView *)photoStackView willStartMovingPhotoAtIndex:(NSUInteger)index;

Called when the user starts to pan the top photo with their finger.

-(void)photoStackView:(PhotoStackView *)photoStackView willFlickAwayPhotoAtIndex:(NSUInteger)index;

Called when the user flicks the top photo left or right with sufficient velocity to cause it to fly away and go to the bottom of the stack.

-(void)photoStackView:(PhotoStackView *)photoStackView didRevealPhotoAtIndex:(NSUInteger)index;

Called when a new card is revealed at the top of the stack because the previous one was flicked away.

-(void)photoStackView:(PhotoStackView *)photoStackView didSelectPhotoAtIndex:(NSUInteger)index;

Called when the user taps on the top photo of the stack.

Properties

A PhotoStackView has a number of useful properties for controlling the appearance of the stack.

@property (nonatomic, strong) UIImage *borderImage;

The image to use for the border (default is white rounded corner, similar to eBay’s).

@property BOOL showBorder;

Whether or not to show a border at all (default is YES).

@property float borderWidth;

The width of the border (default is 5.0).

@property float rotationOffset;

How many degrees each photo in the stack could be rotated (Default is 4.0). For example, a value of 10.0 will randomly rotate each photo from -10 to +10 degrees.

@property (nonatomic, strong) UIColor *highlightColor;

The overlay colour that appears when the user taps on a photo (Default is black at 0.15 alpha).

Other Methods

Just two public methods currently:

-(void)reloadData;

Reloads the data, re-fetching photos from the PhotoStackViewDataSource.

-(void)goToPhotoAtIndex:(NSUInteger)index;

Brings the photo at the specified index to the front.

Download Source Code and Example Project

You can download the source and example project from GitHub here. Enjoy :)

This is not intended to be an exhaustive tutorial, just an introduction to the concepts of what delegation is. I found that once I understood exactly what delegation was and why I might want to use it, Googling the answers became much easier.

What Are Delegates?

To understand why delegation is important, you first need to consider the Model View Controller design pattern (I’ll assume you’re familiar with it already if not, see lecture 1 of Paul Hegarty’s iOS Development series on iTunes U). The most important rule when it comes to MVC is that each area is responsible for its own domain, that is:

• The model handles the data
• The view handles things that appear on screen
• The controller sits between the model and view and passes data from the model to the view

Critically, the pathway from the controller to the view should always be one-way – in fact, the view should not even know the controller exists. For example, if you created an iPhone application with a controller and a view, you should be able to swap out the view for an iPad-specific file while still using the same controller. After all, the controller only cares about what data it can get from the model, and how that data should be structured before it is sent over to a view.

Now, on the Web this is an easy concept to maintain because once the page has been sent to the browser it no longer has access to the controller anyway. In software, however, there are often times when the view needs extra information from the controller that it didn’t need before.

You don’t want your view directly calling controller methods because this would violate MVC best practices; instead, you should use a delegate.

Delegate Example

Take this scene:

To create this scene I’d need a Track Controller that grabs data about the cars from the Model (position, player name, etc), then the controller would send this info to my Car View. The Car View then draws the cars on the screen based on the information it received.

Cool, but now what happens if one car hits the other? I need to handle the collision and adjust the car’s damage. This means checking what the car’s current damage, then adjusting the view to reflect the new info. This requires looking up the database, interpreting the data, and sending updated info to the view.

What you don’t want to do is have the view itself querying the Model, that is the domain of the controller. Essentially the view needs to ask the controller what it needs to do (or in other words, delegate responsibility for handling this event). The view can then get a response from its delegate for how it should handle the situation, it can update itself without ever having ventured outside its own domain.

Creating Custom Delegates

Using the race example above, we would have two files:

1. TrackController
   A UIViewController that liaises with the Model and sends info to the view for display.
2. CarView
   A UIView which draws a car on the screen based on information it receives, such as damage and position.

What I want to do is set up a delegate so that when this car collides with something, it asks its delegate (in this case, my TrackController) what to do.

Step 1: Add a Protocol to View

First thing I need to do is define what methods my view’s delegate needs to implement. I do this by adding @protocol to the top of my Car.h file:

#import <UIKit/UIKit.h>

@protocol CarDelegate <NSObject>
@required
-(void)handleCollision;
@end

@interface Car : UIView

@property (weak, nonatomic) id <CarDelegate> delegate;

//Other @properties and method declarations here

@end

The protocol above states that anyone who claims to be a CarDelegate is required to implement the method handleCollision. Note that the Car object does not need to implement the handleCollision method itself.

Also notice the @property “delegate”; the value of this property will be the delegate that implements the defined protocol (more on that below). Don’t forget to @synthesize the delegate property as you would any other.

Step 2: Set Up Your Delegate

Now that my Car view has a protocol, I can set my TrackController as the delegate. This is done in the TrackController.h file:

#import <UIKit/UIKit.h>
#import "Car.h"

@interface TrackController : UIViewController <CarDelegate>
-(void)handleCollision;

@property (nonatomic, strong) Car *aCar;
//Other @properties and method declarations go here

@end

A few things of note here:

• Car.h has been included at the top of the file
• Added <CarDelegate> to the @interface line. This declares TrackController as conforming to the CarDelegate protocol.
• Declared the handleCollision method defined in the protocol

Make sure you implement the handleCollision method in the .m file of course.

-(void)handleCollision {
    //handle collision here
}

Step 3: Link Delegate

Everything is set up, but we need to link TrackController to Car before it will start working. Remember the “delegate” @protocol set up in Step 1? This needs to be set as a pointer back to TrackController. The logical place for this is when the Car object has initialised within the TrackController, for example:

#import "TrackController.h"

@implementation TrackController

@synthesize aCar = _aCar;

-(void)handleCollision {
    //handle collision here
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.aCar.delegate = self;
}

@end

Look at the viewDidLoad method above; note that I’m setting the value of the delegate property of “aCar” to self. That is, “aCar” – which is a pointer to Car object – has its delegate method set to TrackController.

You could also set the delegate in aCar’s setter. In fact, that’s probably a better place now that I think about it, but whatever this is just a demo :)

Step 4: Trigger Delegate Method

Now that TrackController is set as my delegate I can trigger the method from Car.m whenever I need to. For example:

-(void)checkPositionOfCar {
    if(carIsColliding) {
        [self.delegate handleCollision];
    }
}

You can also check to make sure the delegate implements the method before calling it like so:

if([self.delegate respondsToSelector:@selector(handleCollision)]) {
            [self.delegate handleCollision];
        }

Done!

Download Example Project

I’ve created a modified version of the red box project from my animation post which uses delegation. You can download the project file here.

In the project, when the user clicks the Move Red Box button the box moves within the white square. Once the animation completes, it sends its new coordinates back to the controller.

Download the project here to look at how everything works. The magic happens in the TopView.m file:

-(void)moveBoxTo:(CGPoint)point {

    CGRect frame = self.box.frame; //where self.box is the Red Box
    frame.origin.x = point.x; // new x coordinate (int)
    frame.origin.y = point.y; // new y coordinate (int)

    [UIView animateWithDuration:1.0
                          delay: 0.0
                        options: UIViewAnimationOptionCurveEaseInOut
                     animations:^{
                         self.box.frame = frame; //This is what will animate
                     }
                     completion:^(BOOL finished){
                         //do something on finish
                     }];

}

Whenever moveBoxTo is triggered, the x and y coordinates defined in the point parameter are used to reposition it. The parameters are:

• animateWithDuration
  As the name suggests, the duration for the animation.
• delay
  You can delay the start of the animation (in seconds) here.
• options
  Here you can define the type of animation, such as easing in or out.  See UIView Class Reference for the options available.
• animations
  A block which defines what properties the target object should animate. In this case, I’m animating the frame property.
• Completion
  Another block which is triggered once the animation completes.

Here’s an example of how you might call the method:

int x = random() % 300; // random number, max of 300
    int y = random() % 400; // random number, max of 400

    CGPoint point = CGPointMake(x,y); //create the CGPoint to pass along
    [self.box moveBoxTo:point]; // trigger moveBoxTo method

Download Project File

I’ve skipped over the finer points to keep things simple. Download the project file here to poke around :)

Now, at this point I’d only been learning iOS development for about a month or so in my free time; I wasn’t ready for a full blown, public application. Not only that, but in order to get it in the App Store in time I would need to create the app – from start to finish – within a week.

That’s bonkers…but, you know, zombies! I can’t say no to zombies!

And so, after 6 days and about 100 hours of working non-stop – pausing only for Mothers Day on Sunday – I created my first application. I learned more in those 6 days than I had in the entire time I’d been learning iOS. I’m glad I did it, and think I’m ready for round 2 :)

Day 1: Concept, Wireframes & Test API Call

The first day was about planning exactly what I was going to create, and ensure I had the ability to create it. My idea was simple enough:

When the Zombie Apocolypse comes, do you have a plan? This app will allow you to generate an action plan for what to do should the undead rise, using the Sensis API to find nearby business that can help.

For the UI, I was imagining a table view which you could add items to. Tapping on a cell would reveal a detail view including a map and contact details.

The next thing was to get the API working within Xcode. Fortunately there was already a library available for interacting with the API on Github. So I imported the library into my Xcode project and tried to make my first API call.

Looks like the library isn’t ARC based. Now, in my short time with Xcode I’ve come across this a few times; usually it’s just a matter of removing references to release and retain, however I didn’t want to start changing code in the library. Digging through the documentation revealed a handy trick, allowing me to set a compiler flag on individual files.

It’s just a matter of going to Build Phases and setting the compiler flag -fno-objc-arc to any files that aren’t using ARC.

Once that was done, I had liftoff!

Day 2: Custom Table Views

I wanted the table views to look customised rather than the stock iOS designs. Eventually I figured it out, but found it to be quite fiddly. Here’s the final version:

It’s something I need to do a proper tutorial post on, but for now I’ll share the broad strokes for where to look. The general steps for creating a custom table view are:

• In your storyboard, add a Master Table View Controller and make sure the type is set to Custom, and the style is either Plain or Grouped (I choose grouped).
• In your prototype cell, manually add whatever elements you want to appear inside each cell (labels, UIViews, etc). This can be done simply by dropping them into the prototype cell.
• Create a custom subclass for  UITableView and UITableViewCell, then assign those subclasses to your Table View and Table Cell respectively.
• Create IBOutlets to connect your storyboard objects to your custom UITableViewCell class
  
• Now in your Table View Controller, include the custom cell class, and edit your tableView:cellForRowAtIndexPath: method to handle your new class, for example:
  

  - (UITableViewCell *)tableView:(UITableView *)tableView
           cellForRowAtIndexPath:(NSIndexPath *)indexPath
  {
      static NSString *CellIdentifier = @"MyCell";
  
      MyCustomCellView *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
  
      // here would be where you gather data for this
      // cell, but for demo purposes I'll hard code
      // the label and image values:
  
      cell.myLabel = @"Text for your custom label";
      cell.myImage = [UIImage imageNamed:@"myImage"];
  
      return cell;
  }

• Likewise, you can customise the look of the table itself by editing the drawRect: method within your custom UITableView class, for example:
  

  - (void)drawRect:(CGRect)rect {
  
      UIImage *backgroundImage = [UIImage imageNamed:@"Background"];
      [backgroundImage drawAsPatternInRect:rect];
  
      [self setSeparatorColor:[UIColor clearColor]];
      [self setSeparatorStyle:UITableViewCellSeparatorStyleNone];
      [self setSeparatorColor:[ColourHelper colorWithHexString:@"910000"]];    
  
  }

That is obviously a super abridged tutorial, but I promise to write up something more substantial a little later!

Day 3: Core Location & MapKit

Core Location and MapKit are also worthy of an entire post and took hours of research and experimentation to get right. I’ll leave them for a separate post when I can explain them properly, but I have a handy bit of code for those working with Core Location. To get the user’s current location you’ll need to do the following:

• Include the CoreLocation framework in your project.
• In your controller, include core location in your header
  

  #import <CoreLocation/CoreLocation.h>

• Also make sure you set your controller as a CLLocationManagerDelegate
  

  @interface MyController : UITableViewController <CLLocationManagerDelegate>
  
  @property (strong, nonatomic) CLLocationManager *locationManager;
  // don't forget to @synthesize the property!

• Once set up, if you want to find the user’s location you can trigger the location manager’s startUpdatingLocation method like so:
  

  self.locationManager = [[CLLocationManager alloc] init];
      self.locationManager.delegate = self;
      self.locationManager.purpose = @"Explanation of why you need the user's location";
      [self.locationManager startUpdatingLocation];

• Once location has been updated, this will trigger your delegate’s locationManager:didUpdateToLocation:fromLocation method:
  

  - (void)locationManager:(CLLocationManager *)manager
      didUpdateToLocation:(CLLocation *)newLocation
             fromLocation:(CLLocation *)oldLocation {
  
      //stop updating once we have an accurite location
      if(newLocation.horizontalAccuracy <= 100.0f) { 
  
          [self.locationManager stopUpdatingLocation]; 
  
              //do something with newLocation here
              NSLog(@"Latitude is %d", newLocation.coordinate.latitude);
              NSLog(@"Longitude is %d", newLocation.coordinate.longitude);
  
      }
  
  }

- (void)locationManager:(CLLocationManager *)manager
       didFailWithError:(NSError *)error {

    //No location services? Show alert to enter postcode manually
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Enter a Postcode" message:@"You can also enable location services in your settings." delegate:self cancelButtonTitle:@"Done" otherButtonTitles:@"Cancel",nil];
    alert.alertViewStyle = UIAlertViewStylePlainTextInput;
    alert.delegate = self;
    [alert show];

}

Day 4: Mothers Day & Icons

Mother’s day is all about gifts and over-eating, so I didn’t get a lot of time in Xcode. I did, however, manage to get all the icons done!

Day 5: Cutting Features & Testing

By day 5, it was pretty clear I wasn’t going to be able to implement all the features I wanted in time. I wanted the user to be able to compile their own list, but I ended up just making the survival plan pre-generated. I also wanted to dynamically calculate the user’s chances of survival based on how close each tactical location was to them, but again I needed to cut it if I had any chance to getting the app through the approval process in time.

So I spent all night testing what I had, squashing bugs, adding a help screen, and so on (it’s funny how the last %10 of development always seems to take the longest). By sunrise I had an app ready for submission!

Day 6: App Store Submission

I had everything lined up, I even had a spiffy logo ready to go. I’d never submitted anything to the app store before but the first part made it seem pretty easy. Here’s how it works:

1. Go to itunesconnect.apple.com
2. Select Manage Your Applications
3. Select Add New App and follow instructions

Application failed codesign verification.The signature was invalid, contains disallowed entitlements, or it was not signed with an iPhone Distribution Certificate.

After some hair pulling (and some help from a work colleague) it turned out I’m an idiot and never set up a Distribution Certificate. In order to create an archive you need to do the following first:

1. Create a Distribution Certificate from the Developer Centre
2. In your Project settings, select the distribution certificate for the Code Signing Identity’s Release setting
   
3. Next go to Product > Edit Scheme and set the Build Configuration drop down to Release.
4. Go to Product > Archive and cross your fingers!

Now, it should be said that even if everything is correct and in place that still doesn’t guarantee you’ll have a binary. I’ve heard horror stories from a bunch of devs about infuriating problems creating a binary; some of whom ended up having to create a fresh Xcode project and re-add everything by hand.

It’s a surprisingly unintuitive and error-prone system from a company that is known for its superior user experience. Let’s hope it gets ironed out in the future!

Closing Comments

Creating an iOS app is 6 days when I’m still learning the basics of Objective C was a stressful experience to say the least, but I’m really glad I did it. Learning abstract concepts and creating test applications is one thing, but working towards a clear goal and creating a real product really fast-tracked my development. Regardless of the outcome of the competition itself, this has been a hugely rewarding experience and an important milestone in my growth as an iOS developer.

If there were a zombie apocalypse right now, they’d all be coming for me, because my brain is overflowing with juicy new knowledge. Fortunately for me, there’s now an app for that ;)

Example 1: Lines

The following will draw a triangle in the view with green fill and a red stroke. I’ve added a bunch of comments to each line to make it clear what is happening.

- (void)drawRect:(CGRect)rect
{

    // Get the current graphics context
    // (ie. where the drawing should appear)
	CGContextRef context = UIGraphicsGetCurrentContext();

	//Begin the path
	CGContextBeginPath(context);

	// Starting Point
	CGContextMoveToPoint(context, 150,0);

    // Draw a diagonal line starting ay 150, 0 and ending at x300,y300
	CGContextAddLineToPoint(context, 300, 300);

    // Create a straight horizontal line from the end of the last point, over to x0, y300
	CGContextAddLineToPoint(context, 0, 300);

	// Close the path
    // Closing the path will extending a line from
    // x0, y300 back up to the starting point of 150, 0
	CGContextClosePath(context);

	// Set line width
	CGContextSetLineWidth(context, 2.0);	

	// Set colour using RGB intensity values
    // 1.0 = 100% red, green or blue
    // the last value is alpha
    CGContextSetRGBFillColor(context, 0.0, 1.0, 0.0, 1.0); //green
    CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0); //red

	//Draw on the screen
	CGContextDrawPath(context, kCGPathFillStroke);

}

The above will draw something like below:

Example 2: Circles

Next I’ll draw a red circle. Again I’ve added some comments for each line.

- (void)drawRect:(CGRect)rect
{

    // Get the current graphics context
    // (ie. where the drawing should appear)
	CGContextRef context = UIGraphicsGetCurrentContext();

	// Set the width of the line
	CGContextSetLineWidth(context, 2.0);

    //Make the circle
    // 150 = x coordinate
    // 150 = y coordinate
    // 100 = radius of circle
    // 0   = starting angle
    // 2*M_PI = end angle
    // YES = draw clockwise
    CGContextBeginPath(context);
    CGContextAddArc(context, 150, 150, 100, 0, 2*M_PI, YES);
    CGContextClosePath(context); 

	// Set colour using RGB intensity values
    // 1.0 = 100% red, green or blue
    // the last value is alpha
    CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0); //blue
    CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0); //red

    // Note: If I wanted to only stroke the path, use:
    // CGContextDrawPath(context, kCGPathStroke);
    // or to only fill it, use:
    // CGContextDrawPath(context, kCGPathFill);

    //Fill/Stroke the path
	CGContextDrawPath(context, kCGPathFillStroke);

}

The above will produce:

Using Convenience Methods for Drawing

Say I want to make 3 circles on the screen, each of them with a slightly smaller radius. Well, I could simply copy and paste the code for making a circle 3 times, but it would be better if I could write a single drawCircle: method that will make one for me 3 times.

In my drawRect: I would do something like this:

- (void)drawRect:(CGRect)rect
{

    // Get the current graphics context
    CGContextRef context = UIGraphicsGetCurrentContext();

    // Clear whatever is currently displayng (optional)
    CGContextClearRect(context, rect);

    [self drawCircleInContext:context withRadius:90];
    [self drawCircleInContext:context withRadius:60];
    [self drawCircleInContext:context withRadius:30];

}

Note I’m grabbing the current context first before calling the circle drawing method with:

CGContextRef context = UIGraphicsGetCurrentContext();

This is important and must be called within drawRect:. Then, I am calling a new method three times, each with a slightly smaller radius:

[self drawCircleInContext:context withRadius:90];
    [self drawCircleInContext:context withRadius:60];
    [self drawCircleInContext:context withRadius:30];

The drawCircleInContext:withRadius: method would look something like this:

-(void)drawCircleInContext:(CGContextRef)context withRadius:(int)radius {

    // always add at start to make sure
    // specified context context is the current one
    UIGraphicsPushContext(context);

    // DRAW CIRCLE
    // Note: This code will draw the circle and
    //      is the same as before. The only difference
    //      is that I've used the radius int within
    //      CGContextAddArc
	CGContextSetLineWidth(context, 2.0);
    CGContextBeginPath(context);
    CGContextAddArc(context, 150, 150, radius, 0, 2*M_PI, YES);
    CGContextClosePath(context); 

    CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0); //blue
    CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0); //red

	CGContextDrawPath(context, kCGPathFillStroke);
    // END DRAW CIRCLE

    // Eemove current context (defined at top of method)
    // from the stack, restoring it to whatever it was before
    UIGraphicsPopContext();

}

The bulk of the code will be the same as before, but at the top of the method you’ll want to add:

UIGraphicsPushContext(context);

This will ensure the context you’re using is the current one. Then at the bottom of the method (after drawing the circle) you should add:

UIGraphicsPopContext();

This will remove the current context from the stack and restore it to what it was before.

If all went well, you should end up with this:

Re-Drawing

I mentioned this in my post about Custom Sub Views, but it’s worth repeating. If you want to change the appearance of your drawing, it might seem logical to call drawRect: from your master view or controller in order to re-draw.

Don’t do it!

You should never call drawRect: directly. Instead you should use setNeedsDisplay, like so:

[self.myCanvas setNeedsDisplay];

Assuming self.myCanvas is your UIView that does the drawing, the above line lets the system know that you want to redraw the myCanvas view (you could also call setNeedsDislay within the UIView class itself, of course). As soon as it is ready the view will be updated.

Here’s an example of how you might trigger this from a view controller:

- (IBAction)updateCanvas:(id)sender {
    [self.myCanvas setNeedsDisplay];
}

Download Project File

In case it helps I’ve made the Xcode project fie available to download below. The app produces either a triangle or circle depending on which button you tap.

Download ShapesApp.zip

There are two common reasons why you’d want to create a custom sub view:

1. You want create a custom drawing on the screen; or
2. You want to handle touch events in a way different from the defaults

Create Custom UIView Subclass

With your project open, create a new file by going to File > New > New File.. (or press the + button at the bottom-left of the Project Navigator). Choose Objective-C Class:

Then enter a name for the custom view, making sure you choose UIView from the subclass dropdown:

Your new class’s implementation file will look something like this:

#import "MyCanvas.h"

@implementation MyCanvas

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

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code
}
*/

@end

Note the drawRect: method is commented out by default. You should leave this commented out unless you plan on doing some custom drawing. In this case, I do want to draw a custom shape, so I’ll un-comment it and add the following (I’ll explain more about drawing in a later post):

- (void)drawRect:(CGRect)rect
{

	CGContextRef context = UIGraphicsGetCurrentContext();
	CGContextBeginPath(context);
	CGContextMoveToPoint(context, 150,0);
	CGContextAddLineToPoint(context, 300, 300);
	CGContextAddLineToPoint(context, 0, 300);
	CGContextClosePath(context);
	CGContextSetLineWidth(context, 2.0);	

	[[UIColor greenColor] setFill];
	[[UIColor redColor] setStroke];

	CGContextDrawPath(context, kCGPathFillStroke);

}

Adding Custom View Using Storyboard

Now that I’ve created the view class, I need to add it to the screen. On the storyboard, drag out a generic View from the Object Library.

You can make the view as large or as small as you want by dragging out the handles or setting values on the right. Once placed, select the view and set its class to the one created earlier.

Now, once the app is run and the view loads, drawRect: will be triggered and everything that happens within that method will be run. In this case, a triangle will be drawn. Boom!

If you need to control your custom view in some way, you can create an IBOutlet for it in your controller just like any other object as described here.

Adding Custom View Programatically

There may be times when you want to create a sub view programatically. For example, say I wanted to make my triangle view appear on the click of a button.

To achieve that, let’s first delete the view object from the storyboard so that now my screen is completely empty.

First, import your custom UIView subclass to the header file of your View Controller. This ensures the Controller knows about your custom view so you can add an instance of it.

Then, add a new property, pointing to the new class, here’s what the header file looks like now:

#import <UIKit/UIKit.h>
#import "MyCanvas.h"

@interface DemoAppViewController : UIViewController
@property (strong, nonatomic) MyCanvas *myCanvas;
@end

Don’t forget to synthesize the property in the implementation file:

@synthesize myCanvas = _myCanvas;

Next, add a button object on the screen and setup an IBAction for the button in your View Controller as described in a previous post.  You should end up with something similar to this:

Now, within this IBAction you’ll need to create a sub class, using the custom view we’ve created.

- (IBAction)tappedMakeTriangle:(id)sender {
    //make the triangle!
	CGRect viewRect = CGRectMake(10,10,300,300);
	self.myCanvas = [[MyCanvas alloc] initWithFrame:viewRect];
	[self.view addSubview:self.myCanvas];
}

Here’s an explanation of what’s happening above:

• Line 3: Make a CGRect that is used on the next line. The first two values (10,10) are for the x and y position within the parent view; the second two values (300,300) are the width and height of the frame.
• Line 4: Initialise the MyCanvas view object. The CGRect values defined above will be used to define the size and position of the frame.
• Line 5: Add the custom subview to the controller’s view.

If all went well, as soon as the user taps the button, a triangle should appear!

Opacity and Visibility

If you intend on playing with the view’s opacity, you’ll need to set your view’s “opaque” property to NO. For example:

self.myCanvas.opaque = NO;

By default, this property is set to YES, which means that it is assumed you will never change the opacity. This is for performance reasons.

Another property you may want to change is the visibility. If you want to hide your view, you can do so with the hidden property, e.g.:

self.myCanvas.hidden = YES;

Note that when hidden a view will also not handle events.

Redrawing The View

As you saw above, the drawRect: method is responsible for re-drawing your view. However, you should never call drawRect: directly. Instead you should use setNeedsDisplay, like so:

[self.myCanvas setNeedsDisplay];

The above line lets the system know that you want to redraw the myCanvas view. As soon as it is ready (most likely instantly) the view will be updated.

Download Project File

In case it helps, I’ve uploaded the Xcode project file below:

DemoApp.zip

In this post I’ll outline how to connect view objects to your video controllers using IBOutlet and IBAction. 

Adding a Text Field

Adding a text field to a view is done by selecting the storyboard and making sure the right sidebar is showing.

Selecting the above button will display the right sidebar. Select the File Inspector  and display the Object Library , then find the Text Field object. Drag this object into your view.

Once added, you can move and resize it as necessary.

Add Text Field to View Controller as a Property

In order to control this text field in the Controller, it needs to be added as a property. First, make sure your view is controlled by a custom subclass of UIViewController. You can check this by selecting the view controller in your storyboard (should outline entire view frame with blue), then check your Identity Inspector.

If you don’t have a custom class, create a new UIViewController subclass by going to File > New > New File… and choosing the appropriate type. Once created, you should be able to see your new custom class in the Custom Class drop down pictured above.

Select the Editor toolbar option  so you can see both your view and View Controller on screen at the same time. Make sure your right-side view is showing the View Controller’s .h file. If it isn’t, you can select it by choosing the appropriate file at the top:

Now, while holding down the Control key, click and drag the text field into your View Controller.

This will popup with a few options, one of which is a Name. Give the outlet a name which you will use to refer to the text box in the controller.

You should now have a new @property in in your View Controller’s header file, and a @synthesize in the implementation file, allowing you to set and get properties for the text field.

Adding a Button

Adding a button is done in the same way to the text field.

You can rename the label on the button by double clicking it.

Connect Button to Controller

Now make sure the right half of the screen is showing your View Controllers implementation file (.m) rather than header file, then Control-drag the button in the same way you did the text field.

Once you do this, you’ll get another popup where your an give the action a name.

After you click Connect, a link will be made between your View and Controller. You can do whatever you want within this IBAction method, which will be fired whenever the user taps on the button.

Controlling Text Field When Button is Pressed

Next, we want to add some text to the text field whenever the user taps the button. This is as simple as adding a line within the IBAction you just created.

Because the text field has been set as a property of the Controller, all that needs to be done is to set the “text” property of myTextField to be whatever value we want. Placing this within the IBAction method means this will only happen if the user taps the “Press Me” button.

Most of my experience logging to the console comes from JavaScript using console.log(). Objective-C’s equivalent is similar but – I feel like I’m saying this a lot lately – the syntax is a little strange to me. Anyway, logging to console is done using NSLog, here are some examples:

Simple

NSLog(@"Simple log");

Strings

NSString *myString = @"I am a string";
NSLog(@"Value of myString is %@", myString);

Boolean

BOOL myBool = YES;
NSLog(@"Value of myBool is %d", myBool);
//or
NSLog(@"Value of myBool is %@\n", (myBool ? @"YES" : @"NO"));

Dates

NSDate *myDate = [NSDate date];
NSLog(@"Value of myDate is %@", myDate);

Floats

double myDouble = 1.5;
NSLog(@"Value of myDouble is %f", myDouble);

Integer or Long

int myInt = 90;
NSLog(@"Value of myInt is %i", myInt);

Arrays & Dictionaries

NSArray * myArray = [NSArray arrayWithObjects:@"Value 1", @"Value 2", @"Value 3", nil];
NSLog(@"Value of myArray is %@", myArray);

NSObjects

What if you want to print your ViewController, or some other object you’re working with, along with all its properties? You can do so using the same method as Arrays and Dictionaries, for example:

NSLog(@"Dump of MyViewController %@", self);

However, the output is going to be pretty underwhelming. Instead of a list of all properties, you’ll get something like this:

<MyViewController: 0x6867e90>

Not very useful :/

It turns out, all objects in Objective-C inherit from NSObject, and NSObject contains a method called description which you can exploit. Place this somewhere inside the implementation file:

- (NSString *)description {
    return [NSString stringWithFormat:@"\nProperty 1: %@ \nProperty 2: %@", self.myProp, self.anotherProp];
}

Doing this overrides the description method and allows you to control exactly what gets output to the console. Now whenever you NSLog your object, its description class will be run. Handy! :D

Atomic

@property (strong) NSMutableArray *myArray;

Atomic is the default behaviour for a property; by not explicitly setting the above property as nonatomic, it will be atomic.

An atomic property adds a level of thread safety when getting or setting values. That is, the getter and setter for the property will always be fully completed regardless of what other threads are doing. The trade-off is that these properties will be a little slower to access than a nonatomic equivalent.

Nonatomic

@property (nonatomic, strong) NSMutableArray *myArray;

Nonatomic properties are not thread safe, and will return their properties directly. This will be faster than atomic properties, but obviously carries some risk if precautions aren’t made.

When is it Appropriate to Use Nonatomic?

One thing I’ve noticed while following Objective-C tutorials and articles is that nonatomic is used most of the time. So if nonatomic is so risky, why is it used so often?

It’s all about performance. An atomic property’s getter and setter, conceptually, looks something like this:

-(NSString *) myString {
    @synchronized(self) {
        return myString;
    }
}

-(void) setMyString: (NSString *) newString {
    @synchronized(self)  {
         myString = newString;
    }
}

Whereas a nonatomic property getter and setter looks something like this:

-(NSString *) myString {
    return myString;
}

-(void) setMyString: (NSString *) newString {
   myString = newString;
}

It’s easy to see how the nonatomic implementation is going to be more light weight, but it does mean you have a responsibility to ensure problems don’t arise. Some articles I’ve read recommend keeping things atomic until performance becomes a problem, while others recommend the opposite.

In any event, if you decide to create a nonatomic property, here are some tips for keeping things thread safe:

• Use immutable objects where possible. For example, rather than creating an NSMutableArray, create an immutable NSArray. Whenever you need to add an object to it, create a mutable copy first and do what you need to do, then replace the entire property in one hit rather than tacking on another value to the end.
• You can wrap potentially problematic sections of code with @synchronized.
• UI code can always be nonatomic because UI code always happens on the main thread of the application.

Closing Comments

It’s posts like this one that make me glad I’ve created this blog. Before today, I sort of knew the difference between the two in large strokes, but it wasn’t until I sat down and wrote this post that I was forced to ensure I really understood what I was tying. I had to research and understand thread safety before I could confidently hit the publish button.

To be honest, even now I’m terrified someone is going to chew me out in the comments. Be gentle ;)

You have a choice between (strong) and (weak) when defining a property. In this post I’ll explain the difference between the two.

Strong

@property (strong) NSString *myString;

This is the default state of a pointer, though I still like to explicitly state strong for clarity. A strong pointer will be retained as long as the class in which it was allocated remains.

Weak

@property (weak) NSString *myString;

A weak reference means the pointer has no owner, therefore it will be deallocated as soon as it is no longer needed (that is, nothing else is pointing to it).

Most commonly, you would use weak for IBOutlets, such as UITextFIeld, UILabels and UIButton objects. Here’s an example:

In this case, I’m creating an IBOutlet for a button (theButton) in my view within my controller. The theButton object belongs to my view, not my controller, so in this case a weak attribute makes more sense than strong. In fact, as a general rule IBOutlets should always be set to weak.