i'm trying to develop a kind of custom map.
So I have a scrollview with zooming enabled.
This scrollview has an UIImageView as its subview that represent the map for the user.
I'd like the user to be able to "drop a pin" like in MapKit.
If I add the pin imageView to the map imageview, the pin image will zoom according to the scrollview zoom, which is not what I want.
I'd like to achieve the same result as in the MapKit Mapview.
The pin should move around when the user pan or zoom, but its image should not become smaller or bigger.
There's a simple way to do this without becoming crazy with math speculations over zoomscale and contentoffset?
Thanks a lot, everybody.
This is more of a guess than anything, but adding the pin's layer as a sublayer of the image view seems like the way to go about doing this.
I did it.
All I had to do was add the pin to the map imageview.
After that on the scrollView delegate, i adjusted the pin scale according to the scrollview zoomscale like this:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
_redPin.transform = CGAffineTransformMakeScale(1 / scrollView.zoomScale, 1 / scrollView.zoomScale);
}
Related
have looked but can't find a solution to this on SO.
The problem: I would like to add buttons to a UIImageView that is zoomable however when the image zooms in, the buttons remain in the same place on the image but do not zoom (ie they stay the same size). This is similar to what Maps does if it has many pins on the map, when you zoom in on the Map if the pins are close together they spread apart and stay the same size, rather than zooming to huge sizes with the map!
My attempt: I understand how to make the image zoom, through use of a scroll view however I am unsure of what the view hierarchy should be. The button locations depend on the image and so you cannot add the buttons to just the scroll as they wouldn't move when zooming. However, if I add the buttons to the image view then they zoom with the image (since I return the image view for the delegate method viewForZoomingInScrollView). I have tried tinkering with an overlayer for the buttons with clues from Zooming a background image without zooming the overlay but haven't found anything that works yet.
Any help is greatly appreciated, thanks a lot!
You should not add the button as a subview to the scroll view. Instead, try adding the button as a subview to your scroll view's superview.
[superview addSubview:scrollView];
[superview addSubview:button];
Your view hierarchy will look like this:
<superview>
<scrollView>
<button>
Since the button is not a subview of the scroll view, it won't get zoomed.
I am trying to figure out how to achieve this. I want to have a view centred on the screen that can be pinched for zoom in and zoom out but also be panned across the screen. One way I thought of trying to replicate this was to have a UIView within UIScrollView. Let's say the UIView is just a black square. The UIView will be the same size as the UIScrollView and always remain centred. When I pinch the UIView to zoom out, as it gets smaller and the UIScrollView will zoom in at the same rate. This allows space to pan. The UIView would of shrunk, remained centred and the UIScrollView's content area increased. Is this something that is possible? Is using a UIScrollView the wrong way to go about it?
Been trying to figure this out for days.
Let's say I have an imageView embedded in a UISCrollView and everything is implemented correctly.
How it is currently functioning: When the user pinches and zooms on the top right of the image, it will zoom towards the top right area.
How I want it: I want the image to zoom ONLY on the center of the UIView, regardless on where the user pinches on the photo.
I was thinking of somehow intercepting the pinch gesture recognizer and modifying it so that the pinch locations are always in the center of the screen, but not sure if that's possible. Any ideas? Thanks!
If you want the zoom to happen only at centre, use scrollViewDidZoom delegate method.
--CODE--
-(void)scrollViewDidZoom:(UIScrollView *)scrollView{
CGFloat width = scrollView.contentSize.width/2;
width =width-width/scrollView.zoomScale;
CGFloat height = scrollView.contentSize.height/2;
height =height-height/scrollView.zoomScale;
scrollView.contentOffset = CGPointMake(width, height);
}
As I see it, you have many options. I will state the one that I find the easiest (will delve deeper if it does not work).
Subclass the UIScrollView and override it's layoutSubviews method, and use it to set the visibleRect of the scroll view to the center of the scroll view (which happens to be the center of the image, judging by your screenshot). It will maintain it's zoomLevel so you do not need to alter it.
I'm developing some kind of custom map, which will present additional information above map content (I will call it overlay). But overlay rendering very hard process so I render only that part which user can see on the screen at this moment. But I also want when user zoom or pan map, overlay zoom and pan too (without re-rendering, of course, because it require a time to do it). So my overlay is UIView with UIImageView subview. During user pan I look for contentOffset changes (map content presents on UIScrollView) and move my imageView to that offset (change origin of it's frame), so this is very quickly. When user detach fingers from screen I set initial frame to imageView and re-render it. How can I do similar with zoom? I tried monitor for zoomScale changes and contentOffset, but imageView move not like map content. Any suggestion how to do it will be useful for me
I solved my by problem coming from another side to it. Instead of calculating offsets and zoom scales, I add overlay to map content as subview, so it moves and scales with it very good. When user detach fingers from map, I remove it from superview and re-render it
I am trying to setup a simple view that displays an image and allows users to zoom in/out and pan the image as they desire.
I have autoLayout enabled and the view consists of a UIScrollView with an embedded UIImageView.
Both views are sized to the entire screen.
I used the logic and code from Apple's ScrollViewSuite (the "1_TapToZoom" sample) and everything seems correct. However, when pinching the view, the ScrollView/ImageView gets all distorted and doesn't respond properly. Hard to explain the behavior, but lets just call it "funky". The size and aspect changes in no consistent manner.
My GUESS is that this has to do with autolayout constraints.
Does anyone have some suggestions/fixes for this?
The issues that occurs is the changing of location of the imageview during the zoom process. The origin location of the imageview will change to be a negative value during the zoom. I believe this is why the jerky movement occurs. As well, after the zoom is complete the imageView is still in the wrong location meaning that scrolls will appear to be offset.
If you implement -(void) scrollViewDidZoom:(UIScrollView *)scrollView and log the frame of the UIImageView during this time you can see its origin changing.
I ended up making things work out by implementing a strategy like this: https://github.com/mattneub/Programming-iOS-Book-Examples/blob/master/ch20p573scrollViewAutoLayout/ch20p573scrollViewAutoLayout/ViewController.m
And in addition changing the frame of the contentView while zooming
-(void) scrollViewDidZoom:(UIScrollView *)scrollView {
CGRect cFrame = self.contentView.frame;
cFrame.origin = CGPointZero;
self.contentView.frame = cFrame;
}