UIScrollView ImageView with pins on top

Question

I have a UIScrollView which has a UIImageView. I want to show pins on this imageView. When I add pins as subviews of the ImageView, everything is great except for when you zoom the scale transform happens on the pins also. I don't want this behavior and want my pins to stay the same.

So I choose to add the Pins to another view which sits on top of the ImageView and is also a subview of the UIScrollView. The idea here if you will imagine is to have a layer which hovers over the map and won't scale yet show pins over where I plot them.

The pin when added to the layer view don't cale if the ImageView scales. However, the issue then becomes the position of the pins doesn't match the original origin x/y as the ImageView has had a scale transform.

Basically this is a custom map of a place with Pins. I am trying to have the Pins float over and not zoom in and out over my ImageView yet remember where I placed them when the zoom happens.

Some code:

scrollView = [[UIScrollView alloc] initWithFrame:viewRect];

scrollView.delegate = self;
scrollView.pagingEnabled = NO;
scrollView.scrollsToTop = NO;
[scrollView setBackgroundColor:[UIColor clearColor]];
scrollView.clipsToBounds = YES; // default is NO, we want to restrict drawing within our scrollview
scrollView.bounces = YES;
scrollView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;

imageViewMap = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.png"]];

imageViewMap.userInteractionEnabled = YES;

viewRect = CGRectMake(0,0,imageViewMap.image.size.width,imageViewMap.image.size.height);

//viewRect = CGRectMake(0,0,2976,3928);

[scrollView addSubview:imageViewMap];

[scrollView setContentSize:CGSizeMake(viewRect.size.width, viewRect.size.height)];

iconsView = [[UIView alloc] initWithFrame:imageViewMap.frame];

[scrollView addSubview:iconsView];

Code to add Pin later on some event.

[iconsView addSubview:pinIcon];

I am stuck in trying tp figure out how to to get my pins to hover on the map without moving when the scale happens.

Answer 1

I like your idea of keeping all the pins in a view dedicated to pins (iconsView), but I decided to just add them as subviews of what you called imageViewMap.

Import the QuartzCore.framework file to your project.

Call your view controller MyViewController.

#import <QuartzCore/QuartzCore.h>
@interface MyViewController : UIViewController <UIScrollViewDelegate>
@property (retain) UIScrollView *scrollView;
@property (retain) UIImageView *imageView;

// and so on

@implementation MyViewController

@synthesize scrollView;
@synthesize imageView;

I'll assume you have a pin view or a view controller called DropPinViewController. If you're just using an image, it can be a UIImageView, but my pins have labels, so I used a xib. The pin should point to the bottom center of the xib because we're going to put an anchor point there.

In your viewDidLoad of your MyViewController, add your pin views as subviews of imageView. Add the imageView as a subview to the scrollView. Set the content size of scrollView.

scrollView.delegate = self;

Use these delegate methods:

- (void)scrollViewDidZoom:(UIScrollView *)aScrollView
{   
    for (UIView *dropPinView in imageView.subviews) {       
    CGRect oldFrame = dropPinView.frame;
    // 0.5 means the anchor is centered on the x axis. 1 means the anchor is at the bottom of the view. If you comment out this line, the pin's center will stay where it is regardless of how much you zoom. I have it so that the bottom of the pin stays fixed. This should help user RomeoF.
   [dropPinView.layer setAnchorPoint:CGPointMake(0.5, 1)];
    dropPinView.frame = oldFrame;
    // When you zoom in on scrollView, it gets a larger zoom scale value.
    // You transform the pin by scaling it by the inverse of this value.
    dropPinView.transform = CGAffineTransformMakeScale(1.0/scrollView.zoomScale, 1.0/scrollView.zoomScale);
}

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return imageView;
}