DrawImages In iPhone

In this example we will see how to images draw using Quartz. This is the very easy example, so let see how it will worked.

Step 1: Create a Window base application using template. Give the application name “drawImages”.

Step 2: Xcode automatically creates the directory structure and adds essential frameworks to it. You can explore the directory structure to check out the content of the directory.

Step 3: We need to add two UIViewController, select Choose New file -> Select cocoa touch classes group and then select UIViewController  file. Give the class name “drawImagesViewController” and “QuartzViewController”. Add  one UIView class in the project. Give the name “QuartzView” and add one .xib file in the Resource folder give the name “DemoView.xib”. Add another class give the name of the class “QuartzImages”.

Step 4: We need to add one resource in the Resources folder. Give the resource name “Demo.png”.

Step 5: In the drawImagesAppDelegate.h file we have added UINavigationController and drawImagesViewController class in the file. So make the following changes in the file.

 

#import <uikit/UIKit.h>

@class drawImagesViewController;

@interface drawImagesAppDelegate : NSObject {
UIWindow *window;
IBOutlet UINavigationController *viewController;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UINavigationController *viewController;

 

 

Step 6: Double click the MainWindow.xib file and open it to the view window. Drag the NavigationController from the library and place it to the main window , select the ViewController from the NavigationController and bring up Identity Inspector change the class name into drawImagesViewController. Select drawImagesViewController in the view window and drag tableview from the library and place it to the view window. Select the tableview from the view window and bring up ConnectionInspector , drag dataSource to the DrawImagesViewController and drag delegate to the DrawImagesViewController.Connect drawImages AppDelegate to the DrawImagesViewController and select viewController. You have done all the connection , now save the MainWindow.xib file, close it and go back to the Xcode.

Step 7: Open the drawImagesAppDelegate.m file and make the following changes in the file:

 

- (void)applicationDidFinishLaunching:(UIApplication *)application {

[window addSubview:viewController.view];
[window makeKeyAndVisible];
}

 

 

Step 8: In the drawImagesViewController.h file, we have added QuartzViewController class in the file. So make the following changes in the file.

 

#import <uikit/UIKit.h>
#import "QuartzViewController.h"

@interface drawImagesViewController : UITableViewController {

QuartzViewController *controller;

}

 

 

Step 9: Open the drawImagesViewController.m file, make the following changes in the file.

 

- (void)viewDidLoad {
[super viewDidLoad];

NSLog(@"View Controller ");
controller = [[QuartzViewController alloc] initWithNibName:@"DemoView" viewClass:[QuartzImageView class]];
controller.title = @"Images & Tiling";
controller.demoInfo = @"QuartzImageView";

}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
QuartzViewController *targetViewController = controller;
[[self navigationController] pushViewController:targetViewController animated:YES];
}

#pragma mark UITableView data source methods

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 1;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kCellIdentifier];
if (cell == nil)
{
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:kCellIdentifier] autorelease];
}
QuartzViewController *vc = controller;
cell.textLabel.text = vc.title;
cell.detailTextLabel.text = vc.demoInfo;
cell.detailTextLabel.adjustsFontSizeToFitWidth = YES;
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

return cell;
}

 

 

Step 10: In the QuartzViewController.h file, we have added QuartzView class, UIBarStyle, UIStatusBarStyle, so make the following changes in the file.

 

#import <uikit/UIKit.h>
#import "QuartzView.h"

@interface QuartzViewController : UIViewController
{
Class viewClass;
UIBarStyle barStyle;
UIStatusBarStyle statusStyle;
QuartzView *quartzView;
NSString *demoInfo;
}

@property(nonatomic, readwrite) UIBarStyle barStyle;
@property(nonatomic, readwrite) UIStatusBarStyle statusStyle;
@property(nonatomic, readwrite, copy) NSString *demoInfo;
@property(nonatomic, readonly) QuartzView *quartzView;

-(id)initWithNibName:(NSString*)nib viewClass:(Class)vc;

 

 

Step 11: Open the QuartzViewController.m file and make the following changes in the file:

 

-(id)initWithNibName:(NSString*)nib viewClass:(Class)vc;
{

self = [super initWithNibName:nib bundle:nil];
if (self != nil)
{
NSLog(@"QuartzView initWithWithNib");
viewClass = vc;
barStyle = UIBarStyleBlackOpaque;
statusStyle = UIStatusBarStyleBlackOpaque;
}
return self;
}

-(QuartzView*)quartzView
{
NSLog(@"QuartzView");
if(quartzView == nil)
{
quartzView = [[viewClass alloc] initWithFrame:CGRectZero];
}
return quartzView;
}

-(void)viewDidLoad
{

[self.view addSubview:self.quartzView];

}

 

 

Step 12: In the QuartzView.h file we have added one method so make the following changes:

 

#import <uikit/UIKit.h>

@interface QuartzView : UIView
{
}
-(void)drawInContext:(CGContextRef)context;

 

 

Step 13: Open the QuartzView.m file and make the following changes in the file:

 

-(id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if(self != nil)
{
self.backgroundColor = [UIColor blackColor];
self.opaque = YES;
self.clearsContextBeforeDrawing = YES;

}
return self;
}

-(void)drawInContext:(CGContextRef)context
{
}

-(void)drawRect:(CGRect)rect
{

[self drawInContext:UIGraphicsGetCurrentContext()];
}

 

 

Step 14: Now open the drawImages.h file, we have added image and one method in the file , so make the following changes in the file.

 

#import <uikit/UIKit.h>
#import "QuartzView.h"

@interface QuartzImageView : QuartzView
{
CGImageRef image;
}

-(void)drawInContext:(CGContextRef)context;

 

 

Step 15: In the drawImages.m file make the following changes:

 

-(id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if(self != nil)
{
NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"Demo.png" ofType:nil];
UIImage *img = [UIImage imageWithContentsOfFile:imagePath];
image = CGImageRetain(img.CGImage);

}

return self;
}
-(void)drawInContext:(CGContextRef)context
{

CGRect imageRect;
imageRect.origin = CGPointMake(8.0, 8.0);
imageRect.size = CGSizeMake(64.0, 64.0);

CGContextDrawImage(context, imageRect, image);
CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 0.5);
CGContextFillRect(context, imageRect);

CGContextClipToRect(context, CGRectMake(0.0, 80.0, self.bounds.size.width, self.bounds.size.height));

imageRect.origin = CGPointMake(32.0, 112.0);
CGContextDrawTiledImage(context, imageRect, image);

CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 0.5);
CGContextFillRect(context, imageRect);
CGContextSetLineWidth(context, 3.0);
CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);
CGContextStrokeRect(context, CGContextGetClipBoundingBox(context));
}

 

 

Step 16: Now compile and run the application in the Simulator.

You can Download SourCode from here drawImagesDemo

Leave a Comment: