CODEWITHSUNDEEP
iosoverlayuiimagepickercontroller
WrightsCS
WrightsCS

Reputation: 50707

Custom Overlay with UIImagePickerControllerSourceTypeSavedPhotosAlbum

I need to let the user select a photo from the Photo Library and be able to size and crop their image while using an Overlay image. Using UIImagePickerControllerSourceTypeCamera with cameraOverlayView is fine, but UIImagePickerControllerSourceTypeSavedPhotosAlbum does not support that property.

Strangely enough, when I add the overlay view as a subView with alpha set at half, the overlay appears on the Photo selection screen, but this wont fly with Apple's approval process.

-(void)choosePhotoDialog:(id)sender
{ 
    UIBarButtonItem * barThing = (UIBarButtonItem*)sender;

    OverlayView * overlay = [[OverlayView alloc] initWithFrame: CGRectMake(0, 0, SCREEN_WIDTH_IPHONE, SCREEN_HEIGTH_IPHONE)
                                               andPhotoOverlay: [dict objectForKey:@"imageUrl"]];
    [overlay setUserInteractionEnabled: NO];

    UIImagePickerController * picker = [[UIImagePickerController alloc] init];

    switch (barThing.tag) 
    {
        case 0: [picker setSourceType: UIImagePickerControllerSourceTypeCamera];
                [picker setShowsCameraControls: YES];  
                [picker setCameraOverlayView: overlay];
            break;
        case 1: [picker setSourceType: UIImagePickerControllerSourceTypeSavedPhotosAlbum];
                [picker.view addSubview: overlay];
                [overlay setAlpha: 0.5f];
            break;
    }

    [picker setDelegate: self];
    [picker setAllowsEditing: YES];
    [picker setNavigationBarHidden: YES];
    [picker setWantsFullScreenLayout: YES];
    [self presentModalViewController:picker animated:YES];  
    [picker release];
}

Question

What is the correct way to allow a user to select a photo from the PhotoLibrary with an Overlay using UIImagePickerControllerSourceTypeSavedPhotosAlbum?

Overlay on Thumbs Overlay on Photo

Resolved

Basically, I needed to write 3 separate classes and combine them to create my own custom photo editing view, which also saves pinch / zoom / rotate edits.

Upvotes: 0

Views: 1432

Answers (1)

WrightsCS
WrightsCS

Reputation: 50707

I ended up writing several classes:

  1. An OverlayView class which is a UIView and simply retrieves the .png image with transparency and is the bottom-most layer.

  2. An InteractiveWallpaper class which is a UIImageView and handles all of the touch events, including the transformation events.

  3. And finally, an EditingView class which is a UIViewController. This adds the 2 views previously mentioned as well as saves the photo that the user edited.

This also allowed me to customize the behavior of the view. When the user touches the imported photo, the top-most photo decreases it's alpha value, allowing the user to still see the overlay while the imported photo is more visible.

Upvotes: 1

Related Questions