samplecode

KJGridLayout

Xcode's Interface Builder is a pretty good user-interface layout tool, especially for simple situations. However, it is not the best tool for every job. Sometimes you have to write code to dynamically create user interface elements or to move them around as the view is resized.

When you do this, you find that iOS doesn't help you much beyond some rudimentary autoresizing options. While iOS 5 does provide some autolayout features, they are limited, and they don't help at all if you need to support earlier versions of iOS.

I had a need to do a grid-based layout in an iOS app. I hoped to find a grid-layout component like one would find in Android or WPF, but there is no such thing built into iOS.

I also couldn't find any third-party implementations. I found a few posts and samples for making a grid-like UITableView, but I wanted a way to lay out things in a grid in a plain-old UIView.

So I decided to write my own grid-layout thingees for iOS.

The results are the KJGridLayout class and the KJGridLayoutView class, which you can find on GitHub. Check out the README and feel free to use them yourself. I hope someone finds this stuff useful.

Shiny iPhone Buttons Without Photoshop

Screenshot

Newcomers to iPhone development are sometimes surprised at how ugly the standard button controls are. They quickly learn that they need a graphic artist to create a nice-looking button image in Photoshop and then attach that to the buttons. However, in this tutorial, I'll show how to create nice shiny buttons in code, without any image files, by using a CAGradientLayer.

iPhone Sample Code: Tiles

As an exercise in using the Core Animation API, I've implemented a little iPhone app that reproduces the behavior of the iPhone home screen's icon reorganization interface. (You know, dragging the wiggly icons around.) You can download my sample code to see how it works. Some descriptions of the highlights follow below.

Easy Gradient Backgrounds for UITextViewCells

When you create a table-view-based iPhone app, by default you get tables with plain white rows. But all the cool kids are making apps with 3D-ish gradient backgrounds. You want to make those kinds of apps too, right? This article explains how.

Changing Background Color and Section Header Text Color in a Grouped-style UITableView

While working on an iPhone application, I decided I wanted to change the colors of the background and section headers of a UITableView with the UITableViewStyleGrouped style. It took a lot more work than I expected, so I'm sharing what I learned with anyone else who needs to do this.

Saving a View as a Photo in an iPhone App

For an iPhone app that I'm working on, I want to be able to save the screen image to the Photos album. My first attempt at this was complicated: I created a color space, a bitmap context, a CGImage, and finally a UIImage, copying and pasting most of the code from the Quartz 2D Programming Guide. Unfortunately, it didn't work; I kept getting BAD_ACCESS signals when I called UIImageWriteToSavedPhotosAlbum(), even though it looked to me like everything was correct.

After Googling for a bit for known issues with UIImageWriteToSavedPhotosAlbum, I ran across a far easier solution to the problem. Here are the methods I ended up with:

// Create an image for the view and save it to the Photos library
- (void)savePhotoOfView:(UIView *)view
{
    UIGraphicsBeginImageContext(view.bounds.size);
    [view drawRect:view.bounds];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    UIImageWriteToSavedPhotosAlbum(image,
                                   self,
                                   @selector(savedPhotoImage:didFinishSavingWithError:contextInfo:),
                                   NULL);
}

// Called by UIImageWriteToSavedPhotosAlbum() when it completes
- (void)   savedPhotoImage:(UIImage *)image
  didFinishSavingWithError:(NSError *)error
               contextInfo:(void *)contextInfo
{    
    NSString *message = @"This image has been saved to your Photos album";
    if (error) {
        message = [error localizedDescription];
    }
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:nil
                                                    message:message
                                                   delegate:nil
                                          cancelButtonTitle:@"OK"
                                          otherButtonTitles:nil];
    [alert show];
    [alert release];
}

These just call the view's drawRect method to create an image, save the image to the Photos library, and then pop up an alert box to let the user know what happened.

Syndicate content