swift - 自定义 MKMarkerAnnotationView Like Photos App

Question

我正在尝试像照片应用程序那样做一个自定义 pinView:


到目前为止，我可以在 SO 或 here 上找到的大多数资源和 here显示自定义图钉图像或标注 View 的方法，但在标记本身的自定义 View 上没有。

最终，我想要实现的类似于照片应用程序，其中显示在标记本身上的每个图像都是用户的个人资料图像，而是一个圆形 View 。到目前为止，我的代码非常基本:

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
        var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: "pin") as? MKMarkerAnnotationView

        if annotationView == nil {
            annotationView = MKMarkerAnnotationView(annotation: annotation, reuseIdentifier: "pin")
            annotationView?.canShowCallout = true
            annotationView?.leftCalloutAccessoryView = UIImageView(image: UIImage(named: "profileImage"))
        } else {
            annotationView?.annotation = annotation
        }

        return annotationView
    }

我希望这篇文章不会被否决，因为我已经用尽了在线搜索资源。如果有人能指出我正确的方向，那就太好了，谢谢。

Answer 1

您可以实现任何您想要的自定义设计，您只需要提供一个名为 viewFor 的委托(delegate)方法。

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
    var pinView = mapView.dequeueReusableAnnotationView(withIdentifier: "pin", for: annotation)
    pinView = MapPinView(annotation: annotation, reuseIdentifier: "pin")
    return pinView
}

在 viewDidload 方法中，将 mapview 委托(delegate)设置为 self，当然还可以像下面这样注册您的自定义 View 。

override func viewDidLoad() {
   super.viewDidLoad()
   mapView.delegate = self
   mapView.register(MapPinView.self, forAnnotationViewWithReuseIdentifier: "pin")
}

自定义 View 可能看起来像这样。

import MapKit

class MapPinView: MKAnnotationView {
    private lazy var containerView: UIView = {
        let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
        view.backgroundColor = .white
        view.layer.cornerRadius = 16.0
        return view
    }()
    
    private lazy var imageView: UIImageView = {
        let imageview = UIImageView()
        imageview.translatesAutoresizingMaskIntoConstraints = false
        imageview.image = UIImage(named: "bg")
        imageview.layer.cornerRadius = 8.0
        imageview.clipsToBounds = true
        return imageview
    }()
    
    private lazy var bottomCornerView: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = .white
        view.layer.cornerRadius = 4.0
        return view
    }()
    
    // MARK: Initialization
    override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
        super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
        setupView()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupView() {
        containerView.addSubview(bottomCornerView)
        bottomCornerView.topAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -15.0).isActive = true
        bottomCornerView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true
        bottomCornerView.widthAnchor.constraint(equalToConstant: 24).isActive = true
        bottomCornerView.heightAnchor.constraint(equalToConstant: 24).isActive = true
        
        let angle = (39.0 * CGFloat.pi) / 180
        let transform = CGAffineTransform(rotationAngle: angle)
        bottomCornerView.transform = transform
        
        addSubview(containerView)
        containerView.addSubview(imageView)
        imageView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 8.0).isActive = true
        imageView.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 8.0).isActive = true
        imageView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -8.0).isActive = true
        imageView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -8.0).isActive = true
    }
}

我的看起来像这样。