I implemented a zoom on a picture which works just fine. It just wont scroll.
One thing to mention, I try to center the picture but that doesnt work either. Below is my code.
- (void)viewDidLoad
{
[super viewDidLoad];
UIImage * image = [UIImage imageNamed:#"family.jpeg"];
self.imageview = [[UIImageView alloc] initWithImage:image];
[self.view addSubview:self.imageview];
[image drawInRect:CGRectMake((self.view.frame.size.width/2) - (image.size.width/2), (self.view.frame.size.height / 2) - (image.size.height / 2), image.size.width, image.size.height)];
[self.scroller setContentSize:[image size]];
[self.scroller setMaximumZoomScale:2.0];
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView*)scrollView
{
return self.imageview;
}
Thanks very much for whatever help/comment you can provide:
For scrolling, the scrollview contentsize must be greater than the scrollview framesize. You just try this and see if it is scrolling.
[self.scroller setContentSize:CGSizeMake(self.scroller.frame.size.width+500, self.scroller.frame.size.height+500)];
If it is working, then your image size may be less than the frame size of your scrollview.
Related
can you help me? I would like add background image with scrolling, because my background image is too high. How can I do this? I add UIScrollView and into I add UIImageView but it doesnt scroll.
Thank you for replies.
Here is working code:
- (void)viewDidLoad
{
[super viewDidLoad];
//create scrollView and set the frame to the size you want.
//In this example the scrollView frame is the whole ViewController size
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
[scrollView setBackgroundColor:[UIColor clearColor]];
//create a UIImage,set the imageName to your image name
UIImage *image = [UIImage imageNamed:#"YourImageName.png"];
//create UIImageView and set imageView size to you image height
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, image.size.height)];
[imageView setImage:image];
//add ImageView to your scrollView
[scrollView addSubview:imageView];
//set content size of you scrollView to the imageView height
[scrollView setContentSize:CGSizeMake(self.view.frame.size.width, imageView.frame.size.height)];
[self.view addSubview:scrollView];
}
If you want the scroll view to scroll, set the content size to be bigger than the scroll view frame.
This issue started happening in iOS7 with the new UIPickerView controller. To use images in your UIPickerView controller you must use the delegate method to return an image:
pickerView:viewForRow:forComponent:reusingView:
The problem is that the screen subsequently exhibits all kinds of strange behavior - the image views disappear as you move your finger up and down the control.
This is a solution posted on a dev forum which works as of iOS 7.0.2:
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
{
// self.myImages is an array of UIImageView objects
UIView * myView = [self.myImages objectAtIndex:row];
// first convert to a UIImage
UIGraphicsBeginImageContextWithOptions(myView.bounds.size, NO, 0);
[myView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage * image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// then convert back to a UIImageView and return it
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
return imageView;
}
There is a far simpler way to do it than Ed Trujilo's method (It assumes you are using UIImageView's however ... Ed's method should work for any UIView, I believe).
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
{
return [[UIImageView alloc] initWithImage: [mpSelections[row] image]];
}
I have a custom subclass of NSView that implements drag/drop for copying the image in the view to another application. The relevant code in my class looks like this:
#pragma mark -
#pragma mark Dragging Support
- (NSImage *)imageWithSubviews
{
NSSize imgSize = self.bounds.size;
NSBitmapImageRep *bir = [[NSBitmapImageRep alloc] initWithFocusedViewRect:[self frame]];
[self cacheDisplayInRect:[self frame] toBitmapImageRep:bir];
NSImage* image = [[NSImage alloc]initWithSize:imgSize];
[image addRepresentation:bir];
return image;
}
- (void)mouseDown:(NSEvent *)theEvent
{
NSSize dragOffset = NSMakeSize(0.0, 0.0); // not used in the method below, but required.
NSPasteboard *pboard;
NSImage *image = [self imageWithSubviews];
pboard = [NSPasteboard pasteboardWithName:NSDragPboard];
[pboard declareTypes:[NSArray arrayWithObject:NSTIFFPboardType]
owner:self];
[pboard setData:[image TIFFRepresentation]
forType:NSTIFFPboardType];
[self dragImage:image
at:self.bounds.origin
offset:dragOffset
event:theEvent
pasteboard:pboard
source:self
slideBack:YES];
return;
}
#pragma mark -
#pragma mark NSDraggingSource Protocol
- (NSDragOperation)draggingSession:(NSDraggingSession *)session sourceOperationMaskForDraggingContext:(NSDraggingContext)context
{
return NSDragOperationCopy;
}
- (BOOL)ignoreModifierKeysForDraggingSession:(NSDraggingSession *)session
{
return YES;
}
This works as expected until I resize the main window. The main window only increases size/width in the same increments to maintain the proper ratio in this view. The view properly displays its content on the screen when the window is resized.
The problem comes when I resize the window more than about + 25%. While it still displays as expected, the image that is dragged off of it (into Pages, for example) is corrupt. It appears to have a portion of this image repeated on top of itself.
Here is what it looks like normally:
And here is what it looks like when dragged to Pages after resizing the main window to make it large (downsized to show here -- imagine it at 2-3x the size of the first image):
Note that I highlighted the corrupt area with a dotted rectangle.
A few more notes:
I have my bounds set like NSMakeRect(-200,-200,400,400) because it makes the symmetrical drawing a bit easier. When the window resizes, I recalculate the bounds to keep 0,0 in the center of the NSView. The NSView always is square.
Finally, the Apple docs state the following for the bitmapImageRep parameter in cacheDisplayInRect:toBitmapImageRep: should
An NSBitmapImageRep object. For pixel-format compatibility, bitmapImageRep should have been obtained from bitmapImageRepForCachingDisplayInRect:.
I've tried using bitmapImageRepForCachingDisplayInRect:, but then all I see is the lower-left quadrant of the pyramid in the upper-right quadrant of the image. That makes me think that I need to add an offset for the capture of the bitmapImageRep, but I've been unable to determine how to do that.
Here's what the code for imageWithSubviews looks like when I try that:
- (NSImage *)imageWithSubviews
{
NSSize imgSize = self.bounds.size;
NSBitmapImageRep *bir = [self bitmapImageRepForCachingDisplayInRect:[self bounds]];
[self cacheDisplayInRect:[self bounds] toBitmapImageRep:bir];
NSImage* image = [[NSImage alloc]initWithSize:imgSize];
[image addRepresentation:bir];
return image;
}
And this is how the resulting image appears:
That is a view of the lower left quadrant being drawn in the upper-right corner.
What is causing the corruption when I drag from the NSView after enlarging the window? How to I fix that and/or change my implementation of the methods that I listed above to avoid the problem?
More info:
When I change the imageWithSubviews method to:
- (NSImage *)imageWithSubviews
{
NSSize imgSize = self.bounds.size;
NSBitmapImageRep *bir = [[NSBitmapImageRep alloc] initWithFocusedViewRect:[self frame]];
[self cacheDisplayInRect:[self bounds] toBitmapImageRep:bir];
NSImage* image = [[NSImage alloc]initWithSize:imgSize];
[image addRepresentation:bir];
return image;
}
I get a corrupted image without scaling, where the bottom-left quadrant of the image is drawn again on top of the top-right quadrant, like this:
What in the world am I doing wrong?
Solution:
While it does not address the core problem of drawing with NSBitmapImageRep, the following -imageWithSubviews prevents the corruption and outputs the correct image:
- (NSImage *)imageWithSubviews
{
NSData *pdfData = [self dataWithPDFInsideRect:[self bounds]];
NSImage* image = [[NSImage alloc] initWithData:pdfData];
return image;
}
Based on some debugging above, we determined the problem was in -imageWithSubviews.
Instead of generating image data for the view using -cacheDisplayInRect:toBitmapImageRep:, changing it to -dataWithPDFInRect: fixed the issue.
I have a UIScrollView filled with UIImageView. The UIScrollView are paging enabled to let the users to "flip" those images. Each UIImageView has UIPinchGestureRecognizer for pinch zoom, and UIPanGestureRecognizer for to pan that image when zoomed in.
As probably you have noticed, what I'd like to achieve is just like what iBooks does in its application.
However, I have difficult times to get this work.
In my "BookPageViewController", I have set up UIScrollView, then fill them with images from the folder based on data (page numbers, file names, etc) from sqlite.
_pageScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
NSUInteger pageCount = [pages count];
for (int i = 0; i < pageCount; i++) {
CGFloat x = i * self.view.frame.size.width;
// Page Settings
UIImageView *pageView = [[UIImageView alloc] initWithFrame:CGRectMake(x, 0, self.view.frame.size.width, self.view.frame.size.height)];
pageView.backgroundColor = [UIColor greenColor];
pageView.image = [pages objectAtIndex:i];
pageView.userInteractionEnabled = YES;
pageView.tag = i;
// Gesture Reocgnisers
UIPinchGestureRecognizer *pinchGr = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:#selector(pinchImage:)];
pinchGr.delegate = self;
[pageView addGestureRecognizer:pinchGr];
UIPanGestureRecognizer *panGr = [[UIPanGestureRecognizer alloc] initWithTarget:self action:#selector(panImage:)];
[pageView addGestureRecognizer:panGr];
// Finally add this page to the ScrollView
[_pageScrollView addSubview:pageView];
}
_pageScrollView.contentSize = CGSizeMake(self.view.frame.size.width * pageCount, self.view.frame.size.height);
_pageScrollView.pagingEnabled = YES;
_pageScrollView.delegate = self;
[self.view addSubview:_pageScrollView];
And with the help of another good questions here in Stackoverflow, I have put those:
- (void) pinchImage:(UIPinchGestureRecognizer*)pgr {
[self adjustAnchorPointForGestureRecognizer:pgr];
if ([pgr state] == UIGestureRecognizerStateBegan || [pgr state] == UIGestureRecognizerStateChanged) {
if ([pgr scale]) {
NSLog(#"SCALE: %f", [pgr scale]);
[pgr view].transform = CGAffineTransformScale([[pgr view] transform], [pgr scale], [pgr scale]);
[pgr setScale:1];
} else {
NSLog(#"[PAMPHLET PAGE]: The image cannot be scaled.");
}
}
}
My problem is, when I zoom in the one of the UIImageView with Pinch Gesture, the image exceeds (go over) to the next image and hides it. I believe that there should be the way to "limit" the zoom in/out and the size of UIImageView (not UIImage itself), but I don't know where to go from here. I have also put a code to limit the scale something like:
([pgr scale] > 1.0f && [pgr scale] < 1.014719) || ([pgr scale] < 1.0f && [pgr scale] > 0.98f)
but it didn't work...
I know it's not hard for ios professionals, but I'm quite new to objective-c, and this is my first time to develop real application. If this is not a good practice, I also would like to know any ideas to achieve just how to do this like ibooks do (e.g. put UIImageView in UIScrollView, then put the UIScrollView to another UIScrollView)...
Sorry for another beginner question, but I really need help.
Thanks in advance.
Without trying it out myself, my first guess would be that the transform on the UIImageView also transforms its frame. One way to solve that, would be to put the UIImageView in another UIView, and put that UIView in the UIScrollView. Your gesture recognizers and the transform would still be on the UIImageView. Make sure the UIView's clipsToBounds property is set to YES.
I have this UIScrollView with pagingEnabled to let the user page between some images.
Now I want to let the user zoom on each one of the images. How do I do that? What I have now zooms on my UIScrollView from its origin and I need it to zoom on each picture, not the hole UIScrollView.
What I have now:
UIScrollView* containerView = [[UIScrollView alloc] initWithFrame:[UIScreen mainScreen].applicationFrame];
containerView.scrollEnabled = YES;
containerView.pagingEnabled = YES;
[containerView setMaximumZoomScale:2.0];
[containerView setDelegate:self];
self.view = containerView;
UIImage *imageOne = [UIImage imageNamed:image01];
UIImageView *viewOne = [[UIImageView alloc] initWithImage:imageOne];
viewOne.frame = CGRectMake(0, 44, 320, 480);
[containerView addSubview:viewOne];
UIImage *imageTwo = [UIImage imageNamed:image02];
UIImageView *viewTwo = [[UIImageView alloc] initWithImage:imageTwo];
viewTwo.frame = CGRectMake(320, 44, 320, 480);
[containerView addSubview:viewTwo];
UIImage *imageThree = [UIImage imageNamed:image03];
UIImageView *viewThree = [[UIImageView alloc] initWithImage:imageThree];
viewThree.frame = CGRectMake(640, 44, 320, 480);
[containerView addSubview:viewThree];
- (UIView *) viewForZoomingInScrollView:(UIScrollView *)containerView
{
return containerView;
}
Thanks in advance
You have to return a view contained in your scrool. As you have 3 UIImage, try with this...
In .h
UIView *auxView;
In .m
...
[auxView addSubview:imageOne];
[auxView addSubview:imageTwo];
[auxView addSubview:imageThree];
[containerView addSubview:auxView];
}
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)containerView{
return auxView; }
I hope this help you
I think you mean you want to zoom each UIImageView individually, right?
I was struggling with this problem many weeks, then I decide to wrote a class to solve this problem.
Here is my github repo of this class: https://github.com/windmemory/PhotoCollectionView
My solution to this problem is to create single UIScrollView to contain every UIImageView, and then add these UIScrollView to the containerView.
If we add all the UIImageView to a single view then make it zoomable, when we zoom one photo, all these photos will be zoomed, then the contentSize will change accordingly. Once the contentSize is changed, it will messed up all the paging thing. So the best way I came up is to use UIScrollView to contain UIImageView, then put every UIScrollView into the containerView, this will allow you to zoom each photo separately, which won't mess up all the paging thing you set up.
Hope this may help you.