How To Make A Simple Drawing App with UIKit

Finishing Touches – Share and Enjoy!

Since iOS5 Twitter is natively incorporated in iOS, you will use iOS5 Twitter APIs to send the tweet along with your beautiful masterpiece.

Luckily this is super-easy! First, set ViewController as a UIActionSheetDelegate in ViewController.h:

@interface ViewController : UIViewController <SettingsViewControllerDelegate, UIActionSheetDelegate> {

Then open ViewController.m and make the following changes to the save function.

- (IBAction)save:(id)sender {

    UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitle:@""
                                                             delegate:self
                                                    cancelButtonTitle:nil
                                               destructiveButtonTitle:nil
                                                    otherButtonTitles:@"Save to Camera Roll", @"Tweet it!", @"Cancel", nil];
    [actionSheet showInView:self.view];
}

In above code, you are displaying an UIActionSheet with just two options, Save & Tweet.

Now you need a responder function for the UIActionSheet. Add the following code to the ViewController.m file.

- (void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex
{
	if (buttonIndex == 1)
	{
       //Tweet Image
        }
	if (buttonIndex == 0)
	{
        //Save Image
        }
}

This is the delegate method for UIActionSheet. Let’s implement both cases one at a time.

Finishing Touches – Saving for posterity

Before you can tweet your creations to the world, you first need to add some Save logic.

Make the following modification to ViewController.m:

- (void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex
{
    if (buttonIndex == 1)
    {
        //Tweet Image
    }
    if (buttonIndex == 0)
    {
        UIGraphicsBeginImageContextWithOptions(mainImage.bounds.size, NO,0.0);
        [mainImage.image drawInRect:CGRectMake(0, 0, mainImage.frame.size.width, mainImage.frame.size.height)];
        UIImage *SaveImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        UIImageWriteToSavedPhotosAlbum(SaveImage, self,@selector(image:didFinishSavingWithError:contextInfo:), nil);
    }
}

- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo
{
    // Was there an error?
    if (error != NULL)
    {
        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Error" message:@"Image could not be saved.Please try again"  delegate:nil cancelButtonTitle:nil otherButtonTitles:@"Close", nil];
        [alert show];
    } else {
        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Success" message:@"Image was successfully saved in photoalbum"  delegate:nil cancelButtonTitle:nil otherButtonTitles:@"Close", nil];
        [alert show];
    }
}

In above code, you have first generated the drawing, then saved it to Camera Roll.

To generate the drawing, you simply obtain a snapshot of the main drawing canvas which is mainImage.image.

You first create a new Graphics Context, then draw the mainImage.image in that context. After that, you get a new Image from the graphics context and save it to Camera Roll.

Give it a try — build and run the app! Draw something on the screen and try to save it. If the image is successfully saved, you will see a popup displayed on screen as in the image below:

Finishing Touches – Tweet to your friends!

Important: please note that the Twitter API is deprecated in iOS6. The Twitter implementation below is for iOS5. If you want to integrate with Twitter in iOS6, make sure to use Social Framework instead – we’ll have a tutorial on the subject soon!

To share your artwork with the world, make the following changes to ViewController.m:

#import "Twitter/TWTweetComposeViewController.h"

and later…

- (void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex
{
	if (buttonIndex == 1)
	{
        Class tweeterClass = NSClassFromString(@"TWTweetComposeViewController");
        
        if(tweeterClass != nil) {   // check for Twitter integration
            
            // check Twitter accessibility and at least one account is setup
            if([TWTweetComposeViewController canSendTweet]) {
                
                UIGraphicsBeginImageContextWithOptions(_mainImage.bounds.size, NO,0.0);
                [_mainImage.image drawInRect:CGRectMake(0, 0, _mainImage.frame.size.width, _mainImage.frame.size.height)];
                UIImage *SaveImage = UIGraphicsGetImageFromCurrentImageContext();
                UIGraphicsEndImageContext();
                
                TWTweetComposeViewController *tweetViewController = [[TWTweetComposeViewController alloc] init];
                // set initial text
                [tweetViewController setInitialText:@"Check out this drawing I made from a tutorial on raywenderlich.com:"];
                
                // add image
                [tweetViewController addImage:SaveImage];
                tweetViewController.completionHandler = ^(TWTweetComposeViewControllerResult result) {
                    if(result == TWTweetComposeViewControllerResultDone) {
                        // the user finished composing a tweet
                    } else if(result == TWTweetComposeViewControllerResultCancelled) {
                        // the user cancelled composing a tweet
                    }
                    [self dismissViewControllerAnimated:YES completion:nil];
                };
                
                [self presentViewController:tweetViewController animated:YES completion:nil];
            } else {
                UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Sorry" message:@"You can't send a tweet right now, make sure you have at least one Twitter account setup and your device is using iOS5" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
                [alertView show];
            }
        } else {
            UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Sorry" message:@"You must upgrade to iOS5.0 in order to send tweets from this application" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
            [alertView show];
        }
        
    } else if(buttonIndex == 0) {
        
        UIGraphicsBeginImageContextWithOptions(_mainImage.bounds.size, NO, 0.0);
        [_mainImage.image drawInRect:CGRectMake(0, 0, _mainImage.frame.size.width, _mainImage.frame.size.height)];
        UIImage *SaveImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        UIImageWriteToSavedPhotosAlbum(SaveImage, self,@selector(image:didFinishSavingWithError:contextInfo:), nil);
    }
}

In the above function, you are first generating the drawing and then Tweeting it using the built in Twitter APIs in iOS5. If you need to understand how the Twitter APIs work in IOS5, then you should read the awesome Beginning Twitter in iOS 5 Tutorial by Felipe Laso.

Getting the itch to tweet that first drawing of yours? Go ahead and compile and run the code! Draw something on the screen, and try to tweet it. If everything is setup correctly, you will see the Twitter dialogue displayed on screen. Great! In this case, a picture is definitely worth 140 characters. :]

And with that my friends, we are done!

Where To Go From Here?

Here is an example project with all of the code from the above tutorial.

You can play around a bit more with the brush strokes and also investigate the drawing of arcs and rectangles using Quartz2D. A good start would be to have a look at Quartz 2D Programming Guide . There are number of beginner and advanced-level concepts there with which you can play around to create awesome shapes and patterns.

If you want to learn how to draw more smooth lines, you should also check out this smooth line drawing article by Krzysztof Zablocki. It’s based on Cocos2D but you can use the same technique in UIKit.

I hope you enjoyed this tutorial as much as I did! Feel free to post your questions and comments on the forum — and feel free to tweet your masterpieces you created with your new app! :]

This is a blog post by iOS Tutorial Team member Abdul Azeem, software architect and co-founder at Datainvent Systems, a software development and IT services company.