Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

I'm forced to add an image to MKAnnotationView via subview because apparently I cannot have the image's masksToBounds property set to true without having to set canShowCallout to false. Here's the question that covers this: Swift - setting rounded corners to annotation view image I'm not sure what to configure in order to allow the user to tap the center of the image in order to make the callout bubble appear. I've already messed around with centerOffset, calloutOffset, and anchor point. Here's my code:

extension MapViewController: MKMapViewDelegate {
func mapView(mapView: MKMapView!, viewForAnnotation annotation: MKAnnotation!) -> MKAnnotationView! {
    if let annotation = annotation as? Food {
        if annotation == mapView.userLocation {
            return nil
        }
        let identifier = "pin"
        var view: MKAnnotationView
        if let dequeuedView = mapView.dequeueReusableAnnotationViewWithIdentifier(identifier)
        {
            dequeuedView.annotation = annotation
            view = dequeuedView
        } else {
            view = MKAnnotationView(annotation: annotation, reuseIdentifier: identifier)
            let imageView = UIImageView(frame: CGRectMake(0, 0, 45, 45))
            imageView.image = UIImage(named:"picture")
            imageView.layer.cornerRadius = imageView.layer.frame.size.width / 2

            imageView.layer.borderWidth = 1.5
            imageView.layer.borderColor = UIColor(red: 230/255, green: 39/255, blue: 39/255, alpha: 1).CGColor
            imageView.layer.masksToBounds = true
            view.addSubview(imageView)

            view.canShowCallout = true
            view.calloutOffset = CGPoint(x:  16, y: 16)
            view.layer.anchorPoint = CGPointMake(16 , 16)
            view.rightCalloutAccessoryView = UIButton.buttonWithType(.DetailDisclosure) as! UIView
        }
        return view
    }
    return nil
}
}

image

image

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
159 views
Welcome To Ask or Share your Answers For Others

1 Answer

While using a subview to implement cornerRadius and callOut, I managed to align the image and touch area by messing around with anchorPoint. The only catch is that the touch radius is like that of the original MKAnnotationPin, so the user has to be precise about where to tap. Otherwise, the best method (and the most tedious) is to subclass MKAnnotationView and override the drawRect method to draw a circular mask for the image. To make life easier, I found a library called Toucans that does this sort of functionality.

imageView.layer.anchorPoint = CGPoint(x: 1, y: 1)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...