Advertise here

Advertise here

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

UIImage Reflection Tutorial

blackbook1991blackbook1991 Posts: 20Tutorial Authors, Registered Users
edited August 2011 in iPhone SDK Tutorials

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:

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
	// 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();  

	// 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! :D

You can download the project here. :)
<a href=""; target="_blank">Enjoy All The Way!</a> <img src=""; border="0" alt="" title="Big Grin" class="inlineimg" />
Sign In or Register to comment.