Custom UIAlertView (Color chooser)

PTColorChooser.png

In this post, I am going to show you how to make a custom UIAlertView, as seen in the above screenshots and this video. The custom UIAlertView is a color picker that is taken right out of my PocketTouch application (available on the AppStore very soon!).

To do anything custom to an alert view, we need to subclass it out. Go ahead and do so, and set up the interface for your UIAlertView like you will see in the following example.

//
//  PTColorAlertView.h
//  PocketTouch
//
//  Created by Skylar Cantu on 7/18/09.
//  Copyright 2009 Skylar Cantu. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface PTColorAlertView : UIAlertView {
        UISlider *redSlider;
        UISlider *greenSlider;
        UISlider *blueSlider;

        UILabel *redLabel;
        UILabel *blueLabel;
        UILabel *greenLabel;

        UIView *previewView;
}


- (void)presetSlidersWithColor:(UIColor *)color;
- (void)presetSlidersWithRandomValues;
- (UIColor *)getColor;


@end

As you can see, I am declaring three labels, which will serve as the R, G, and B labels; three sliders, which will be used to change the actual red, green, and blue color values; and one UIView, which will serve as a color preview view.

Likewise, to get started implementing this alert, you must initialize all these objects. I manually do it all in this example, but you may want to create a helper method that will create up these objects for you.

//
//  PTColorAlertView.m
//  PocketTouch
//
//  Created by Skylar Cantu on 7/18/09.
//  Copyright 2009 Skylar Cantu. All rights reserved.
//

#import "PTColorAlertView.h"

@implementation PTColorAlertView

- (id)initWithFrame:(CGRect)frame {
        if (self = [super initWithFrame:frame]) {
                previewView = [[UIView alloc] initWithFrame:CGRectZero];
                previewView.backgroundColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:1.0];
                previewView.opaque = YES;

                redLabel = [[UILabel alloc] initWithFrame:CGRectZero];
                redLabel.backgroundColor = [UIColor clearColor];
                redLabel.text = @"R";
                redLabel.textColor = [UIColor redColor];
                redLabel.font = [UIFont systemFontOfSize:20];
                redLabel.shadowColor = [UIColor blackColor];
                redLabel.shadowOffset = CGSizeMake(0, -1);

                greenLabel = [[UILabel alloc] initWithFrame:CGRectZero];
                greenLabel.backgroundColor = [UIColor clearColor];
                greenLabel.text = @"G";
                greenLabel.textColor = [UIColor greenColor];
                greenLabel.font = [UIFont systemFontOfSize:20];
                greenLabel.shadowColor = [UIColor blackColor];
                greenLabel.shadowOffset = CGSizeMake(0, -1);

                blueLabel = [[UILabel alloc] initWithFrame:CGRectZero];
                blueLabel.backgroundColor = [UIColor clearColor];
                blueLabel.text = @"B";
                blueLabel.textColor = [UIColor blueColor];
                blueLabel.font = [UIFont systemFontOfSize:20];
                blueLabel.shadowColor = [UIColor blackColor];
                blueLabel.shadowOffset = CGSizeMake(0, -1);

                redSlider = [[UISlider alloc] initWithFrame:CGRectZero];
                [redSlider addTarget:self action:@selector(redSliderValueChanged:) forControlEvents:UIControlEventValueChanged];

                greenSlider = [[UISlider alloc] initWithFrame:CGRectZero];
                [greenSlider addTarget:self action:@selector(greenSliderValueChanged:) forControlEvents:UIControlEventValueChanged];

                blueSlider = [[UISlider alloc] initWithFrame:CGRectZero];
                [blueSlider addTarget:self action:@selector(blueSliderValueChanged:) forControlEvents:UIControlEventValueChanged];


                [self addSubview:redLabel];
                [self addSubview:greenLabel];
                [self addSubview:blueLabel];
                [self addSubview:redSlider];
                [self addSubview:greenSlider];
                [self addSubview:blueSlider];
                [self addSubview:previewView]; 
        }
        return self;
}

Notice that at this point we are initializing all of our objects with a CGRectZero frame. That’s because at this point, we don’t know, or care, how large the alertview and its subviews will be. Let’s go ahead and get this thing sized up now.

As a subclass of UIView, UIAlertView has a .frame property. We will use this to our advantage and override our alertview’s -setFrame method. Setting the frame of a UIAlertView is an interesting dilemma, and another exercise in Apple thinking that they know best. They don’t.

A UIAlertView is actually an image. Trying to set the frame to another width will wither cut off the image, or cause the image to not be centered. Neither of these are ideal. The solution to the width is to use an affine transfomation. Luckily for us, we do not want to set the width. The only property that we are really concerned with is the height of the alert view.

In the iPhone API, math is done on the back end to calculate how much height you will need for your buttons, message, and title. Apple then feeds the alert view that information. By overriding -setFrame, we cut Apple’s math right out of the equation. We know that the height of our alert view is going to be 300 px. So we simply create a new rect with the width Apple provides (this will make the background image appear perfect), and the new height that we want. We call that on super (UIView) and then set the centerpoint of our alert view to the center point of the width.

- (void)setFrame:(CGRect)rect {
        [super setFrame:CGRectMake(0, 0, rect.size.width, 300)];
        self.center = CGPointMake(320/2, 480/2);
}

See, that was easy! : )

If we were to compile right now, we will see that our buttons are right at the top, directly underneath the title. This is, of course, wrong. To fix this, and to move our labels and sliders to the correct position, we must override the alert view’s -layoutSubviews method. -layoutSubviews is a method of UIView, and as such all UIView subclasses, such as UITableViewCells (hint, hint), will inherit this method. The frameworks automatically call [someView setNeedsLayout] after setting the frame, which in turn calls the -layoutSubviews method.

The first thing we need to do is to position those buttons. They are added by Apple, so we have no natural pointer to them. To find them, we must iterate through our alert view’s subviews until we find the buttons. The buttons are a private class called UIThreePartButton. [You can find this out by outputting the "[[view class] description]” string during the for loop, there is NO PRIVATE API used here, so this is AppStore friendly!] Once we find the buttons, we simply move them to the bottom and set a variable to mark the top of the button. That variable will be the basis of the math we will use to position the preview view, labels and slider. I like to start at the button, since it is a firm landmark and solid refernce point. You may do your own maths for placement. That’s really up to you.

- (void)layoutSubviews {
        CGFloat buttonTop;
        for (UIView *view in self.subviews) {
                if ([[[view class] description] isEqualToString:@"UIThreePartButton"]) {
                        view.frame = CGRectMake(view.frame.origin.x, self.bounds.size.height - view.frame.size.height - 15, view.frame.size.width, view.frame.size.height);
                        buttonTop = view.frame.origin.y;
                }
        }
        buttonTop -= 7; buttonTop -= 100;
        previewView.frame = CGRectMake(12, buttonTop, self.frame.size.width - 53, 100);

        buttonTop -= 7; buttonTop -= 30;
        blueLabel.frame = CGRectMake(12, buttonTop, self.frame.size.width - 52, 30);
        blueSlider.frame = CGRectMake(blueLabel.frame.origin.x + 25, blueLabel.frame.origin.y, blueLabel.frame.size.width - 25, blueLabel.frame.size.height);

        buttonTop -= 30;
        greenLabel.frame = CGRectMake(12, buttonTop, self.frame.size.width - 52, 30);
        greenSlider.frame = CGRectMake(greenLabel.frame.origin.x + 25, greenLabel.frame.origin.y, greenLabel.frame.size.width - 25, greenLabel.frame.size.height);

        buttonTop -= 30;
        redLabel.frame = CGRectMake(12, buttonTop, self.frame.size.width - 52, 30);
        redSlider.frame = CGRectMake(redLabel.frame.origin.x + 25, redLabel.frame.origin.y, redLabel.frame.size.width - 25, redLabel.frame.size.height);
}

Right now, all the hard parts are done. You have completed your custom UIAlertView. Congratulations. Add in a dealloc method to deallocate your objects you’ve added and you are ready to rock.

You may notice that your color preview box is just an ugly black box right now. To make it match what the user expects to see in an alert, we must put a border around it and add some shadow. I like to keep all my view drawing in the -drawRect method. -drawRect is automatically called by the frameworks with a [someView setNeedsDisplay] call, so you don’t need to worry about calling it yourself.

The first thing we want to do is call [super drawRect:rect]; That way our alert view actually gets draws. If you wanted to augment the view, or draw your own custom alert view, with a custom background, or anything else your mind can think of, this is the method to do it in.

Next, we will create a new graphics context to draw into. If we do not do that, then what we are about to draw will be drawn into our alert view instead of drawn and added to the top of our color preview view. We’ll use UIGraphicsBeginImageContext() to do that. -setNeedsDisplay is called after -setNeedsLayout, so it is safe to refer to the previewView.frame.size when creating this context.

The first thing we will want to do is set the border width and color. Use CGContextSetLineWidth() and CGContextSetRGBStrokeColor() to do so. Next, we will want to make a shadow. Three pixels looks about right. Use CGContextSetShadow() to set that. Next, use CGContextStrokeRect() to actually draw the border and CGContextGetClipBoundingBox() to contain our drawing to within our own context. It’s not 100% crucual to include CGContextGetClipBoundingBox(), but doing so will lop off the shadow that extends below the bottom border.

Once that is all set, we need to extract what we jsut drew. Fortunately, UIKit contains a convenience function to do that: UIGraphicsGetImageFromCurrentImageContext(). Treat that method as if it were a UIImage. Create an image view with it and add it as a subview of the previewView. Finally, end the context with UIGraphicsEndImageContext().

- (void)drawRect:(CGRect)rect {
        [super drawRect:rect];

        UIGraphicsBeginImageContext(previewView.frame.size);
        CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 2.0);
        CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 0.9, 0.9, 1.0, 1.0);
        CGContextSetShadow(UIGraphicsGetCurrentContext(), CGSizeMake(0, -3), 3.0);
        CGContextStrokeRect(UIGraphicsGetCurrentContext(),      CGContextGetClipBoundingBox(UIGraphicsGetCurrentContext()));
        [previewView addSubview:[[[UIImageView alloc] initWithImage:UIGraphicsGetImageFromCurrentImageContext()] autorelease]];
        UIGraphicsEndImageContext();
}

The three methods we prototyped in the interface file are very basic UIKit/CoreGraphics, so I will not go into detail.

- (void)presetSlidersWithColor:(UIColor *)color {
        if (CGColorSpaceGetModel(CGColorGetColorSpace(color.CGColor)) == kCGColorSpaceModelMonochrome) {
                const CGFloat *clr = CGColorGetComponents(color.CGColor);
                [redSlider setValue:clr[0] animated:YES];
                [greenSlider setValue:clr[0] animated:YES];
                [blueSlider setValue:clr[0] animated:YES];
        } else {
                const CGFloat *clr = CGColorGetComponents(color.CGColor);
                [redSlider setValue:clr[0] animated:YES];
                [greenSlider setValue:clr[1] animated:YES];
                [blueSlider setValue:clr[2] animated:YES];
        }

        [self performSelector:@selector(redSliderValueChanged:) withObject:redSlider afterDelay:0.0];
}


- (void)presetSlidersWithRandomValues {
        srand(time(NULL));
        [redSlider setValue:(float)(rand() % 100 + 1) / 100 animated:YES];
        [greenSlider setValue:(float)(rand() % 100 + 1) / 100 animated:YES];
        [blueSlider setValue:(float)(rand() % 100 + 1) / 100 animated:YES];

        [self performSelector:@selector(redSliderValueChanged:) withObject:redSlider afterDelay:0.0];
}


- (UIColor *)getColor {
        return [UIColor colorWithRed:redSlider.value green:greenSlider.value blue:blueSlider.value alpha:1.0]; 
}

To actually use this object within your application, you simply do something like this:

PTColorAlertView *alert = [[PTColorAlertView alloc] initWithTitle:@"Color" message:nil delegate:self cancelButtonTitle:@"Cancel" otherButtonTitles:@"Set", nil];
        [alert show];
        [alert release];

You will want to make sure that you implement the UIAlertViewDelegate protocol in your containing object’s interface file. Doing so will allow you to get feed back from the custom alert view, and preset the custom alert view. for best results, implement the following two methods:

- (void)didPresentAlertView:(UIAlertView *)alertView {
        [(PTColorAlertView *)alertView presetSlidersWithColor:[UIColor blueColor]]; 
        //[(PTColorAlertView *)alertView presetSlidersWithRandomValues];
}

- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex {
        switch (buttonIndex) {
                case 0: //Cancel
                        break;
                case 1: //Set
                        [self doSomethingWithColor:[(PTColorAlertView *)alertView getColor]];
                        break;
                default:
                        break;
        }
}

UPDATE: For the curious, these are my slider methods within the alert view:

#pragma mark 
#pragma mark UISlider Methods

- (void)redSliderValueChanged:(UISlider *)slider {
        [UIView beginAnimations:nil context:NULL];
        previewView.backgroundColor = [UIColor colorWithRed:slider.value green:greenSlider.value blue:blueSlider.value alpha:1.0];
        [UIView commitAnimations];
}


- (void)greenSliderValueChanged:(UISlider *)slider {
        [UIView beginAnimations:nil context:NULL];
        previewView.backgroundColor = [UIColor colorWithRed:redSlider.value green:slider.value blue:blueSlider.value alpha:1.0];
        [UIView commitAnimations];
}


- (void)blueSliderValueChanged:(UISlider *)slider {
        [UIView beginAnimations:nil context:NULL];
        previewView.backgroundColor = [UIColor colorWithRed:redSlider.value green:greenSlider.value blue:slider.value alpha:1.0];
        [UIView commitAnimations];
}

More comments at: ipodtouchfans.com

Comments

• Categories

  • iPhone Development
  • Quick Tip
  • Uncategorized

• Archives

  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • March 2009

• Links

  • BigBoss
  • francis
  • iPicFudger – iPhone App
  • Jay Freeman (saurik)
  • Jessica Carberry
  • Jonathan Zdziarski (NerveGas)
  • Pocket Elf – iPhone App
  • PocketTouch – iPhone App
  • PocketTouch.net
  • The TouchRepo
  • WiFone

• Meta

  • Log in
  • WordPress
  • XHTML

• Categories

  Select Category iPhone Development Quick Tip Uncategorized

• Archives

  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • March 2009

• Blogroll

  • BigBoss
  • francis
  • Jay Freeman (saurik)
  • Jessica Carberry
  • Jonathan Zdziarski (NerveGas)
  • WiFone

• My Sites

  • iPicFudger – iPhone App
  • Pocket Elf – iPhone App
  • PocketTouch – iPhone App
  • PocketTouch.net
  • The TouchRepo