I am trying to draw an image into a UIView subclass overriding drawRect. This image drawing class needs moving and zooming capabilities, so I made it a subview of a scrollview.
My problem is that my image seems to get cropped, either by the screen or the scrollView bounds (the image is larger than the screen). I don't have a clue why, this seems to e pretty basic stuff.
The view hierarchy in my ViewController looks like this:
View Controller
View
ScrollView
MapView
I've created outlets for the scroll view and the map view (which is the view implementing drawRect).
My ViewController initial setup code for configuring the scroll view looks like this:
- (void)viewDidLoad
{
[super viewDidLoad];
scrollView.delegate = self;
scrollView.contentSize = CGSizeMake(450, 476);
scrollView.minimumZoomScale = 0.6;
scrollView.maximumZoomScale = 6.0;
}
My drawRect implementation:
- (void)drawRect:(CGRect)rect
{
UIImage *myImage = [UIImage imageNamed:#"map.jpg"];
CGRect rectangle = CGRectMake(0,0,450,476);
[myImage drawInRect:rectangle];
}
The image is draggable and zoomable within the scroll view, but it's cropped at what seems to be the screen bounds.
Any help would be appreciated.
drawRect can't draw outside the rect passed as a parameter to the drawRect method, which is determined by the view frame. Make your view 1200,1200 and make sure that clipToBounds is disabled on all the containing views.
Your problem is probably in drawInRect. From documentation of UIImage class:
drawInRect:
Draws the entire image in the specified rectangle, scaling it as needed to fit.
Make that rectangle bigger as you wish and center it in UIImageView. This question is answered here UIScrollView image/photo viewer with paging enabled and zooming
Related
I have a Mac OS X (10.9) application with a custom NSView for my main NSWindow's contentView property. The only thing the custom view does is override drawRect: so that it's transparent. Transparency is required so that my NSOpenGLView is visible (see below):
/* Transparent NSView Subclass */
- (void)drawRect:(NSRect)dirtyRect
{
NSLog(#"Drawing Rect");
[[NSColor clearColor] set];
NSRectFillUsingOperation(dirtyRect, NSCompositeClear);
}
The contentView has an NSOpenGLView as a subview, with its surface order set to -1 (it's 'below' the main NSWindow, which is also transparent):
/* NSOpenGLView subclass: */
GLint order = -1;
[self.openGLContext setValues:&order forParameter:NSOpenGLCPSurfaceOrder];
I then instantiate a WebView and place it as a subview of this custom view:
_webview = [[WebView alloc] initWithFrame:frame];
[_webview setMaintainsBackForwardList:NO];
[_webview setTranslatesAutoresizingMaskIntoConstraints:NO];
[_webview setDrawsBackground:NO];
[_window.contentView addSubview:_webview];
The WebView is a small box in the window (on top of the NSOpenGLView) which is used to login to a service. Once login happens it should disappear, showing only the NSOpenGLView.
Here's the problem: when I call [_webview removeFromSuperview]; the contentView does not redraw; therefore, the WebView is still drawn on the screen (although not responsive to mouse or keyboard). If I use my mouse to resize the window that everything is in, the contentView redraws (I see the message in the logs) and the WebView's content disappears.
Also, if I don't add the NSOpenGLView as a subview, the WebView goes away as it should.
Shouldn't the contentView fire a drawRect after a subview is removed? Even when I used setNeedsDisplay: or setNeedsLayout: after removing the WebView the contentView still didn't redraw.
Apple's advice these days is to use Core Animation layers to put normal views on top of OpenGL views.
I suspect that the content view has redrawn itself. It draws clear. What you're seeing is the OpenGL surface behind it. The nearly-raw-VRAM nature of OpenGL surfaces may mean that the web view that was drawn on top of it actually modified the contents of the surface. So, I recommend that you force the OpenGL view to redraw itself. If it draws in its -drawRect:, then it should be enough to send it -setNeedsDisplay:. If you do rendering outside of -drawRect: by manually making the context current, issuing rendering commands, and then calling -flushBuffer, then you'll need to do that.
I have a UIScrollView that displays and Image and it scrolls fine and everything. What I want to do is add a UILabel to the UIScrollView to display the title of the image. I managed to do that, but when I zoom out the UILabel does not zoom with the scroll View and stays in the same place on the screen. How would I make it so the label scales with the scrollView Image? Here is the code I have:
[super viewDidLoad];
// Do any additional setup after loading the view.
self.scrollView.delegate = self;
//This just creates a image from a URL
NSURL * photoURL = [FlickrFetcher urlForPhoto:self.photoCellName format:2];
NSData * photoData = [NSData dataWithContentsOfURL:photoURL];
self.imageView.image = [UIImage imageWithData:photoData];
//Setting up scroll View
self.scrollView.contentSize= self.imageView.image.size;
self.imageView.frame = CGRectMake(0, 0, self.imageView.image.size.width, self.imageView.image.size.height);
NSLog(#"Name = %#", [self.photoCellName valueForKeyPath:#"description._content"]);
//Assigning title to the label
self.textLabel.text = [self.photoCellName objectForKey:#"title"];
Make sure label is the subview of your scrollview.
I'm guessing you are providing the UIImageView as the View that will be zoomed by the UIScrollView by implementing the method in the UIScrollViewDelegate.
If not, I'm not sure how your zooming is working then. If you are providing it, you'll have to return a UIView that contains as subviews your UILabel and your UIImageView and you will have to manually apply transformations to the UIView to resize it.
I guess that a similar question was answered in this SO thread, and Dimme (the one that answered it)provided a complete solution with source code, hope it helps!
You should check if you setup autoresizingMask property of your UILabel
self.label.autoresizingMask = (UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight);
You can do it in IB too. Then if you will change the frame of its superview the frame of your label will be updated during - (void)setNeedsLayout handling process
... and DO NOT block the main thread creating images from url in - (void)viewDidLoad!
I have five UIView on a UIScrollView. All of them with the same width. Each view has other subviews that resize its height according to the content assigned, thus making the parent UIView and the UIScrollView resizable as well. I am trying to keep the 5 UIView separated from each other at a certain "Padding" distance even after resizing. What I do right now is set the position of the origin.y and the height of each UIView when layoutSubviews is called. Is there an easier way to do this?
I have tried to set their position on creation like: CGRectMake(0, aboveView.frame.origin.y + aboveView.frame.size.height + Padding, width, 0) and setting its autoresizingMask to UIViewAutoresizingMaskTopMargin. Hoping that when I call sizeToFit on the main UIView, all the UView will set their positions relative to the view above them.
Overriding layoutSubviews is the right way to do this. UIKit doesn't have any built-in layout management that can do it for you.
However, you might not realize that UIScrollView sends itself layoutSubviews each time it scrolls - on every frame of the scrolling. That may be a lot more often than you need! You don't want to do a lot of work in a UIScrollView's layoutSubviews if you can avoid it.
To avoid doing extra layout, I suggest you set up your view hierarchy like this:
UIScrollView
ContainerView with layoutSubviews method
content view 1
content view 2
content view 3
content view 4
content view 5
Use a standard UIScrollView. Give it one subview, which is a custom UIView subclass (I called it ContainerView in my example). The ContainerView has your five content views as its subviews.
When you assign new content to one of your five content views, send sizeToFit to that content view. If the view's size changes, UIKit should automatically send layoutSubviews to its superview - the ContainerView. The ContainerView's layoutSubviews method adjusts the position of its subviews to maintain the padding between them, and then sets the contentSize of its parent - the UIScrollView.
- (void)layoutSubviews {
CGRect myFrame = CGRectZero;
for (UIView *subview in self.subviews) {
CGRect frame = subview.frame;
if (myFrame.size.height > 0) {
frame.origin.y = myBounds.size.height + Padding;
subview.frame = frame;
}
myFrame = CGRectUnion(myFrame, frame);
}
self.frame = myFrame;
UIScrollView *scrollView = self.superview;
scrollView.contentSize = myFrame.size;
}
This way, you don't do any extra work just because the scroll view scrolled. You only lay out your content views when the content actually changes.
I have a UIImageView in a UIScrollView in another UIScrollView (based on Apple's
PhotoScroller sample code). When the UIScrollView calls back to its controller to dismiss itself, it calls this method:
- (void)dismiss {
[scrollView removeFromSuperview];
ImageScrollView *isv = [self currentImageScrollView];
UIImage *image = isv.imageView;
image.frame = [self.view convertRect:image.frame fromView:isv];
[self.view insertSubview:image belowSubview:captionView];
[(NSObject *)delegate performSelector:#selector(scrollViewDidClose:)
withObject:self
afterDelay:2.0];
}
Now here's the weird part: the image view jumps to a different position right after this method executes, but before the scollViewDidClose method gets called on the delegate. If the image is larger than its new super view, it jumps so that its left edge is aligned with the left edge of its super view. If it's smaller than its new super view, it jumps to the very center of the view. There is no animation to this change.
So my question is, how do I prevent it from doing that? I've tweaked both the super view (self.view) class and the image view class to see what methods might be called. Neither the frame nor the center is set on the image view after this method is called, and while the layoutSubviews method is called on the super view, that is not what jumps the image to the center or left side of the superview. I've also tried turning off autoResizesSubviews in the super view, and setting the autoresizingMask of the image view to UIViewAutoresizingNone, with no change in behavior.
So where is this happening, and why? And more importantly, how do I make it stop?
I've been beating my head on this for days. Any pointers or guidance would be greatly appreciated.
ImageScrollView is the one centering your UIImageView. Set a breakpoint in ImageScrollView layoutSubviews and you'll see how your UIImageView is being centered.
You're taking ImageScrollView's internal imageView and placing it into another view. That's not going to work because ImageScrollView still retains ownership of that UIImageView instance and is still managing its layout.
You'll either need to copy the image into another UIImageView instance, or you'll need to change ImageScrollView to allow it to relinquish ownership of its imageView.
You're not setting up the frame of the 'image' view when you insert it as a subview. You probably want to do that explicitly if you want the view to appear at a particular position in the scroll view.
I have a window which has a custom NSView and has a bottom bar with controls on it, one of which is an NSColorWheel.
For simplicity sake the Window is 332px high, with the custom NSView being 300px high and the bottom bar being 32px high.
The bottom bar is created as part of my awakeFromNib when the app loads the window using the following code:
[[self window] setAutorecalculatesContentBorderThickness:YES forEdge:NSMinYEdge];
[[self window] setContentBorderThickness: 32.0 forEdge: NSMinYEdge];
In my custom NSView class I fill the rectangle with color. Everything works fine when the app loads using the following in my NSView class:
- (void)drawRect:(NSRect)dirtyRect
{
dirtyRect = [self bounds];
NSColor * mNewColor = [NSColor blackColor];
[mNewColor set];
[NSBezierPath fillRect:dirtyRect];
}
However, if I subsequently call a method that changes the color of the custom NSView when a color wheel in the bottom bar is changed, the bottom bar gets overwritten with the color. The following code illustrates this method (this code is in the custom NSView class:
- (void)changeBackgroundColor:(NSNotification *)notification
{
NSLog(#"Changed background color");
NSRect mRect = [self bounds];
NSColor * mNewColor = [theColorWell color];
[mNewColor set];
[NSBezierPath fillRect:mRect];
[self setNeedsDisplay:YES];
}
Resizing the window instantly corrects the problem, but obviously I don't want the user to have to resize the window for an obvious bug!
What I don't understand is why my bounds appear to be mapping to the parent window and not the custom NSView when I call setNeedsDisplay and yet the bound correctly adjust when I resize the window using the mouse (even if just by 1 pixel).
Do I somehow need to account for the bottom bar on the redraw?
Any and all help much appreciated.
You should do all your drawing in the drawRect: method of your custom NSView. Cocoa automatically sets up the graphics context for you when it calls this method - things may not draw correctly if you perform drawing operations in other methods.
Your code in drawRect: could set the colour to the the current background colour as specified by your NSColorWell and fill the dirtyRect rectangle with this.
Then in the other method just call [self setNeedsDisplay:YES]; and then drawRect: will automatically be called to redraw the view.
See here for more information: http://developer.apple.com/mac/library/documentation/Cocoa/Conceptual/CocoaViewsGuide/SubclassingNSView/SubclassingNSView.html#//apple_ref/doc/uid/TP40002978-CH7-SW4 (in particular the Drawing View Content section)