将缺少的三角形(工具提示)添加到callout自定义MKAnnotationView子类

时间:2017-01-23 12:28:45

标签: swift mapkit mkannotationview

我创建了一个自定义MKAnnotationView,它可以正常工作,但它会弹出一个矩形,没有三角形(当有人在说话时,你在漫画中有同样的一个),它来自引脚。 有没有办法自动添加三角形?

这是我的MKAnnotationView子类:

class ShikmimAnnotationView: MKAnnotationView{

let selectedLabel:UILabel = UILabel.init(frame:CGRect(x: 0, y: 0, width: 140, height: 40))

override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(false, animated: animated)
    if(selected)
    {
        // Do customization, for example:
        //let defaults = UserDefaults.standard

        selectedLabel.font = UIFont(name: "Heebo-Regular.ttf", size: 18)
        selectedLabel.text = "(גדליהו אלון 13, ירושלים\n     (3 דק' הגעה"
        selectedLabel.numberOfLines = 3
        selectedLabel.sizeToFit()
        selectedLabel.textColor = UIColor.white
        selectedLabel.textAlignment = .center
        selectedLabel.backgroundColor = UIColor.darkGray
        selectedLabel.layer.borderColor = UIColor.white.cgColor
        selectedLabel.layer.borderWidth = 2
        selectedLabel.layer.cornerRadius = 5
        selectedLabel.layer.masksToBounds = true

        selectedLabel.center.x = 0.5 * self.frame.size.width;
        selectedLabel.center.y = -0.5 * selectedLabel.frame.height;
        self.addSubview(selectedLabel)
        self.image = UIImage(named: "map_pin_next_stop-2.png")

    }
    else
    {
        selectedLabel.removeFromSuperview()
    }
}
}

以下是我在VC中初始化它的方法:

   internal func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {

    if let annotation = annotation as? MyLocation {
        let identifier = "reuse"
        var view: ShikmimAnnotationView
        if let dequeuedView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier){
            dequeuedView.annotation = annotation
            view = dequeuedView as! ShikmimAnnotationView
        } else {
            view = ShikmimAnnotationView(annotation: annotation, reuseIdentifier: identifier)
            view.image = UIImage(named: "map_pin_next_stop-2.png")
            view.canShowCallout = false
            //view.calloutOffset = CGPoint(x: -5, y: 5)
            //view.rightCalloutAccessoryView = UIButton(type: .detailDisclosure) as UIView
        }

        return view
    }
    return nil
}

1 个答案:

答案 0 :(得分:2)

您可以使用BezierPath绘制此三角形。这是这个视图的类。您可以在storyboard中设置视图大小,也可以在ShikmimAnnotationView类中以编程方式进行设置。

class TriangleView: UIView {

let shapeLayer = CAShapeLayer()

override func drawRect(rect: CGRect) {

    // Get Height and Width
    let layerHeight = self.layer.frame.height
    let layerWidth = self.layer.frame.width

    // Create Path
    let bezierPath = UIBezierPath()

    // Draw Points
    bezierPath.moveToPoint(CGPoint(x: 0, y: 0))
    bezierPath.addLineToPoint(CGPoint(x: layerWidth, y: 0))
    bezierPath.addLineToPoint(CGPoint(x: layerWidth / 2, y: layerHeight))
    bezierPath.addLineToPoint(CGPoint(x: 0, y: 0))
    bezierPath.closePath()

    // Apply Color
    UIColor(red: (2/255), green: (35/255), blue: (73/255), alpha: 1).setFill()
    bezierPath.fill()

    // Mask to Path

    shapeLayer.path = bezierPath.CGPath
    self.layer.mask = shapeLayer
  }
}