[iPhone] Quartz 2D

Image via Wikipedia

The last week I've been fighting to get some stuff working in Quartz. Actually I've been trying to get Quartz itself to work.
I've now managed and thought I could share:

Open your viewController.xib and add a view inside your view. Size it and move it the way you want it. This is the view that you will use like a tv screen, showing all your Quartz drawing.
(This is the way I am doing it for a specific app. I'm sure you'll find your way that fits your app the most.)

Select the view and press ⌘4 and change the class to, lets say, "QuartzView".
Select File>Write Class File and check the box to create the .h file too.

Once created, the files will be in your project.
in the QuartzView.h:

@interface QuartzView : UIView {
UIColor *color;
}
@end

Switch over to the .m file.
The drawRect method is the one where we'll do all the drawing. The drawing code has to be in this method as far as I know.

Lets start filling in some code in the drawRect method then and try to draw a line.
First, we set the color for our line and retrieve the context. The context is like your canvas where you'll be drawing. All the drawing is done in a context. As we'll only have one context, I'll call it (who would have guessed) "context" :

color = [UIColor redColor];
CGContextRef context = UIGraphicsGetCurrentContext();

Then, we set some properties of the line we're going to draw. They are pretty self explanatory. You always define the context (which we cleverly called "context") and the specific attribute of the property.

CGContextSetLineWidth(context, 2.0); // We set a 2px thick line.
CGContextSetStrokeColorWithColor(context, color.CGColor);
CGContextSetFillColorWithColor(context, color.CGColor);
//This settings want a CGColor and not a UIColor. Good for us, UIColor has a property that returns the color as a CGColor.

Now that we've set the properties of the line we're about to draw, lets prepare the actual movement required to draw a line.

We'll create 2 CGPoints which basically just group an X & Y coordinate of the screen in one variable.

CGPoint startingPoint = CGPointMake(20.0, 20.0);
CGPoint finishingPoint = CGPointMake(80.0, 80.0);

Now, we move our virtual drawing hand (with the pencil we've defined earlier) to the starting point and then make it move to the finishing point. We then just have to say to actually draw that line and to update our view. 4 lines of code.

CGContextMoveToPoint(context, startingPoint.x, startingPoint.y);
CGContextAddLineToPoint(context, finishingPoint.x, finishingPoint.y);
CGContextStrokePath(context);
[self setNeedsDisplay];

Right, so that's the basics. I'll probably go into more details once I've figured it out better myself soon.

[iPhone] Saving Simple Data

Image by Steve Rhodes via Flickr

This tutorial will show you an easy way of saving simple bits of data so that they can be continue to be used next time the app is started on your iPhone.

Imagine you wanted to save some user settings. In this example I have a UISlider and a UISegmentedControler which I want the user to be able to set, but the iPhone should remember the settings and display them in their last state whenever the iPhone App is restarted.

In the .h file add:

float sliderValue;
float segmentValue; // Use these values to adjust your UI Elements

// You will also need the following methods:
-(NSString *)dataFilePath;
-(void)applicationWillTerminate:(NSNotification *)notification;

In the .m file add:

-(void)viewDidLoad
{
NSString *filePath = [self dataFilePath];
if([[NSFileManager defaultManager] fileExistsAtPath:filePath])
{
NSArray *array = [[NSArray alloc] initWithContentsOfFile:filePath];
sliderValue = [[array objectAtIndex:0] floatValue];
segmentValue = [[array objectAtIndex:1] floatValue];
[array release];
}

UIApplication *app = [UIApplication sharedApplication];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(applicationWillTerminate:) name:UIApplicationWillTerminateNotification object:app];
[super viewDidLoad];
}

Above: This is where we load the date if there is any from the last save on the iPhone. First, we check to see if the data file does already exist. If it doesn't, then we don't bother about it. If it does however, we instantiate an array with the contents of the file and add the content to our variable as a float. Remember to save and load them in the same order so you don't mix things up. After having done that, we add some extra code to subscribe to the Notification so that it calls the saving process before quiting the app.

-(NSString *)dataFilePath
{
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsDirectory = [paths objectAtIndex:0];
return [documentsDirectory stringByAppendingPathComponent:@"data.plist"];
}

Above: What this method does is return the full path of the the data file (data.plist). It does that by finding the documents directory on the iPhone/iPod Touch device and appending (adding) "data.plist"

-(void)applicationWillTerminate:(NSNotification *)notification
{
NSMutableArray *array = [[NSMutableArray alloc] init];
[array addObject: [NSNumber numberWithFloat:sliderValue]];
[array addObject: [NSNumber numberWithFloat:segmentValue]];
[array writeToFile:[self dataFilePath] atomically: YES];
[array release];
}

Above: The method will be called when, as you might have guessed, the application will get terminated/closed. Here is where you should add all the data you want to keep for the next time the iPhone loads the Application.

[iPhone] Removing the Keyboard when done.

Image by _snapp via Flickr

Let me continue with the easy stuff to fill up the Blog a little more.
Today I'll go through how to make the keyboard move out of the way once you are done editing the field.

There are two basic ways of doing it. One, is pressing the DONE key on the keyboard. The other way is tapping with your finger anywhere else on the screen.

Lets clarify:

UITextField *myTextField;
UITextField *myOtherTextField;

-(IBAction)backgroundClick:(id)sender;
-(IBAction)doneEditing:(id)sender;

Using the DONE key:

To make it return with the Done key start by adding the following code:

-(IBAction)doneEditing:(id)sender
{
[sender resignFirstResponder];
}

Any controller can be called to resign the First Responder status. With this simple function done lets set WHEN it will be called.
Open Interface Builder and single click on one of the Text Fields and click ⌘2 to open up the connections inspector.

Connect the Did End on Exit event with the doneEditing function by dragging the little circle symbol next to the event name to the File's Owner.

Repeat this for the other text field to show that you don't need a separate function for every field and try it out.

By tapping it away:

Some keyboard layouts don't have a DONE key. Or even if they have, a lot of people prefere to just tapp it away instead of tapping the small button in the corner. For these situations there is a quick and easy way of solving the problem.

Add the following code:

-(IBAction)backgroundClick:(id)sender
{
[myTextField resignFirstResponder];
[myOtherTextField resignFirstResponder];
}

Can you already guess? Lets see.

Save it again and go back to to Interface Builder.
Drag a Round Rect Button over your view and resize it so that it covers ALL of your view.
Now Select Layout > Send to Back and don't deselect the button anymore. The Button is now behind everything else you are showing.

Press ⌘1 and change the type to Custom.
You now have an invisible button in you back layer. Only thing missing now is to connect the Did touch up inside event to the action backgroundClick and you're done.

Notice that you can ask all of your fields to resign First Responder even if they don't currently have it and it won't cause any problem.

[iPhone] Saving an Image to the Library from UIImageView

Image by ahhyeah via Flickr

In my latest app I have a UIImageView which shows an Image that has been taken from the web.
I then wanted to give the user the possibility to save that shown image to his library.
At this point I was getting ready for some longer coding for this but it turned out to be very easy.

To start from the same line let me point out where we are:
I have the following:

UIImageView *imageView;
UIImage *myImage;
-(IBAction)savePicture;

This is how its done:

-(IBAction)savePicture
{
myImage = imageView.image;
/* I assign the image that is being displayed in imageView to myImage */

UIImageWriteToSavedPhotosAlbum(myImage, self, @selector(image:didFinishSavingWithError:contextInfo:), self);
/* This is the only code needed to save it to the library. See, its easier than you thought. */

[myImage release];
/* Release the image as we don't need to touch that anymore. Always a good thing to release images as early as possible */
}

//This is the error check to make sure we have a nice handling of our saving process.
-(void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo
{
// Lets create an UIAlertView to display that everything is fine.
// That way the user will know it has been actually saved.
NSString *msg = @"Saved!!!";
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Saved." message:msg delegate:self cancelButtonTitle:nil otherButtonTitles:@"OK", nil];
[alert show];
[alert release];
[str release];
}

And that's it.
If you have any questions, I can try helping you out.