View Full Version : customizing UIView

Jul 13, 2010, 03:27 AM
I've subclass UIView to have my own drawing method functionality in which I drawn an image (green circle) whenever the user touches on the screen


My problem is, if I have another image as a background, the drawn image (green circle) is behind the background image. Any idea how I could fix it?

I've tried to set the background image in IB and even in code still not working..

#import <UIKit/UIKit.h>

@interface DrawView : UIView {
CGPoint firstTouch;
CGPoint lastTouch;
UIImage *drawImage;
CGRect redrawRect;

@property CGPoint firstTouch;
@property CGPoint lastTouch;
@property (nonatomic, retain) UIImage *drawImage;
@property (readonly) CGRect currentRect;
@property CGRect redrawRect;


@implementation DrawView

@synthesize firstTouch;
@synthesize lastTouch;
@synthesize drawImage;
@synthesize redrawRect;
@synthesize currentRect;

return CGRectMake((firstTouch.x > lastTouch.x) ? lastTouch.x : firstTouch.x,
(firstTouch.y > lastTouch.y) ? lastTouch.y : firstTouch.y,
fabsf(firstTouch.x - lastTouch.x),
fabsf(firstTouch.y - lastTouch.y));

- (id)initWithCoder:(NSCoder*)coder
if (( self = [super initWithCoder:coder] ))
if (drawImage == nil)
self.drawImage = [UIImage imageNamed:@"green_circle.png"];
//self.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"Background.png"]];
return self;

- (void)drawRect:(CGRect)rect {
// Drawing code
CGFloat horizontalOffset = drawImage.size.width / 2;
CGFloat verticalOffset = drawImage.size.height / 2;
CGPoint drawPoint = CGPointMake(lastTouch.x - horizontalOffset,
lastTouch.y - verticalOffset);
[drawImage drawAtPoint:drawPoint];

- (void)dealloc {
[drawImage release];
[super dealloc];

#pragma mark -
#pragma mark UI Touches
#pragma mark -
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
[self setNeedsDisplay];

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
[self setNeedsDisplayInRect:redrawRect];


Any help. Thanks

anyone have some idea?:confused:

Attaching the sample code here:

Jul 13, 2010, 10:54 AM
The iPhoneOS drawing model is simple in that views effectively draw from back to front. Drawing in a view that's in front of another view will appear to have drawn over the the view in the back. Your view with the green circle must be in back of the picture of the earth that you show. If you want it in front either create the views with the ordering that you want or reorder the views so your green circle view is in front.

Jul 13, 2010, 10:50 PM
Anyway, I've tried to re-arrange the drawing but seems the background image is also not visible.. because also I initialize to make a drawing rectangle... I'm thinking, I need to customize the drawView init and pass from there the image background??

So, in .xib file:
- File's Owner
- First Responder
- View (UIView)

In code, I've just tried this..

- (void)viewDidLoad {
[super viewDidLoad];

UIImageView *bckImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Background.png"]];
[self.view addSubview:bckImage];
[bckImage release];

DrawView *tv = [[DrawView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 240.0f, 240.0f)];
[self.view addSubview:tv];
[tv release];


Jul 14, 2010, 03:41 PM
Could you try drawing the image in code?

Put this inside your drawRect: method.

[[UIImage imageNamed:@"whatever.png"] drawInRect:self.bounds];