UIImage Reflection Tutorial

[blackbook1991]

Hi!

I'd like to share to you my simple ImageReflection project. I placed some explanation according to my understanding so please be gentle me with me. I used this feature so that my image carousel (on another project) would look cool. This project is something that would give you like this:


LET'S START!
1. In XCode, create a View-based Application. Name your project ImageReflection.
2. Add to your project your image. As for me, my image is named spongebob.png.
3. In your ImageReflectionViewController.m, uncomment or create the loadView method and modify it that it would look like this:

- (void) loadView {
	[super loadView];
	self.view.backgroundColor = [UIColor blackColor];

	// Modify the image name accordingly
	UIImage *image = [UIImage imageNamed:@"spongebob.png"];
	
	UIImageView *imageView = [[UIImageView alloc]initWithImage:image];

	CGImageRef imageToSplit = image.CGImage;
        // I'm using the lower 1/3 of the image only
	CGImageRef partOfImageAsCG = CGImageCreateWithImageInRect(imageToSplit, CGRectMake(0,(image.size.height*2)/3,image.size.width, image.size.height/3));
        // Create an UIImage instance of the image part
	UIImage *partOfImage = [UIImage imageWithCGImage:partOfImageAsCG];
	// Flip the UIImage mirrored upside-down
        UIImage* flippedImage = [UIImage imageWithCGImage:partOfImage.CGImage scale:1.0 orientation:  UIImageOrientationDownMirrored];
	
	UIImageView *reflectionView = [[UIImageView alloc]initWithImage:flippedImage];
	reflectionView.frame = CGRectMake(0, image.size.height, image.size.width, image.size.height/2);

        // Initialize ImageContext with the combined sizes of the imageView (original image) and the reflectionView
	UIGraphicsBeginImageContext(CGSizeMake(imageView.image.size.width,imageView.image.size.height+reflectionView.image.size.height));  
	// Creates an CGRect with the imageView content
	CGRect imageRect = CGRectMake(0, 0, imageView.image.size.width, imageView.image.size.height);
        // Creates an CGRect with the reflectionView content
	CGRect reflectionRect = CGRectMake(0, imageView.image.size.height, reflectionView.image.size.width, reflectionView.image.size.height);
	//shows the imageView at full size 
	[imageView.image drawInRect:imageRect]; 
	//displays the reflection with 0.5 transparent
        [reflectionView.image drawInRect:reflectionRect blendMode:kCGBlendModeScreen alpha:0.5];  
	
        // Creates an UIImage instance of the resulting image context
	UIImage *resultingImage = UIGraphicsGetImageFromCurrentImageContext();  
	UIGraphicsEndImageContext();

	// Creates the resulting view
	UIImageView *resultingView = [[UIImageView alloc]initWithImage:resultingImage];

        // Displays the image view on screen
	[self.view addSubview:resultingView];
}

4. Build and Run.
5. Celebrate! You're done!

You can download the project here.