Question

我正在尝试自定义pinView，就像照片应用程序一样：

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

最终，我想要实现的与照片应用类似，其中标记本身上显示的每个图像都是用户的profileImage，但是是圆形视图。到目前为止，我的代码非常基础：

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的委托方法。

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委托设置为self，当然还要注册您的自定义视图，例如波纹管。

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

自定义视图可能如下所示。

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
    }
}

我的看起来像这样。

自定义MKMarkerAnnotationView喜欢照片应用程序

1 个答案: