iOS drawing a rectangle on a scrollView

[fergusjk]

Here is the scenario...

I have a view controller called 'SecondView' in which I have a UIScrollView (1280x460 giving me 4 horizontal 'pages') whose handle is 'scroll'.

I wish to draw several small rectangles in the scrollView. I looked at Quartz and put the following code into SecondViewController.m hoping the drawRect method would automatically be called.

- (void) drawRect{
	CGContextRef contextRef = UIGraphicsGetCurrentContext();
	
	CGContextSetRGBFillColor(contextRef, 0, 0, 1.0, 1.0);
	CGContextSetRGBStrokeColor(contextRef, 0, 0, 1.0, 1.0);
	
	// Draw a circle (filled)
	CGContextFillEllipseInRect(contextRef, CGRectMake(100, 100, 25, 25));
	
	// Draw a circle (border only)
	CGContextStrokeEllipseInRect(contextRef, CGRectMake(100, 100, 25, 25));

}

I tried calling it manually but to no avail in viewDidLoad.

I didn't do anything else or add any other code. I don't understand this aspect of app development (drawing shapes, etc.) enough to make this work. Do I need to import a 'quartz' framework or am I missing something important in the code?

 

[(marc)]

Your UIScrollView shouldn't extend beyond the screen's bounds. You'll want to look at UIScrollView's contentOffset and pagingEnabled properties. For sample code on how it works, check out Apple's Page Control code.

 

[fergusjk]

Your UIScrollView shouldn't extend beyond the screen's bounds.

That is not what I've seen in many of the tutorials on UIScrollViews I've looked at. I thought UIScrollViews were for precisely that - content that was bigger than the screens bounds...

I could understand wanting to use the technique of loading each page as it was brought into view if there was memory issues but my app works just fine the way it is. Thanks for the link anyway.

I'm far more concerned with the pressing issue of getting some rectangles drawn at this time.

 

[(marc)]

That is not what I've seen in many of the tutorials on UIScrollViews I've looked at. I thought UIScrollViews were for precisely that - content that was bigger than the screens bounds...

I could understand wanting to use the technique of loading each page as it was brought into view if there was memory issues but my app works just fine the way it is. Thanks for the link anyway.

I'm far more concerned with the pressing issue of getting some rectangles drawn at this time.

The UIScrollview instance itself should not extend beyond the screen's bounds. You should add content that is too large to be displayed on the screen in subviews to the UIScrollView instance. Then, you move the content around by modifying the contentOffset property.

For example:

UIImageView *hugeImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, 1000.0, 1000.0)];
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 480.0)];
[scrollView addSubview:hugeImageView];
[hugeImageView release];
[scrollView setContentOffset:CGPointMake(250.0, 120.0)];

 

[Luke Redpath]

UIViewController doesn't have a drawRect method or indeed, a graphics context in which you can draw. You do drawing in a view.

You should:

1. Create a custom subclass of UIView and put your drawRect code there.
2. In your controller, create an instance of your custom view and add it as a subview of the scroll view.
3. Heed the above advice regarding scroll view bounds. Think of the scroll view as a window to your larger content. It should never be bigger than the screen.

 

[fergusjk]

OK, in Interface Builder, I've changed my structure from
File's Owner
First Responder
UIView
UIScrollView (1280x411)
UILabel
UIButton
etc.

to
File's Owner
First Responder
UIView
UIScrollView (320x411)
UIView (1280x411)
UILabel
UIButton
etc.

And, thankfully, everything works as before

I gave the new UIView a handle of 'mainview'
in the header file

IBOutlet UIView *mainview;
@property (nonatomic, retain) UIView *mainview;

and in the implementation file

@synthesize mainview;

And I included this code in the implementation (which I'm calling) but still no rectangle...

- (void) drawRect{
	NSLog(@"in drawrect");
	CGRect rect1 = CGRectMake(100, 100, 100, 100);

	[mainview drawRect:rect1];
}

1. Can you confirm that the structure showing in IB is now standard?
2. Any idea what I can do to get the drawing working using the drawRect method?

 

[Luke Redpath]

You need to do the drawing in your own custom subclass of UIView, as I said before. If you are adding drawRect to your controller, it won't do anything. Also, you never call drawRect on a view directly. If the view state has changed and it needs to be redrawn you should call setNeedsDisplay.