how to make a button of free shape? - ios

Question

I want to create map app. For example, the are different areas in Japan. All of them are different shape, not square. You push on it and it gonna change the color. It is possible to create the button of unusual form (the form of region on the map) in Xcode?

Answer 1

Drawing
In order to draw the custom shape on the map, use your custom subclass of MKPolygon where you'll define your selected state color, and selected flag.
internal final class MyPolygon: MKPolygon {
internal var selected = false
internal var selectedColor = UIColor.red.withAlphaComponent(0.6)
...
}
In order to draw a custom color for your custom MKPolygon, create your subclass of MKPolygonRenderer and use custom drawing to fill the polygon with the selectedColor when it has selected == true.
When those two implemented, add your overlay onto MKMapView
mapView.addOverlay(polygon)
Assign the delegate to your mapView, and return your renderer for the polygon from the delegate's method:
func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
if let polygon = overlay as? MyPolygon {
return MyPolygonRenderer(polygon: polygon)
}
return MKOverlayRenderer(overlay: overlay)
}
Catching user input
Add UITapGestureRecognizer onto your mapView:
func viewDidLoad() {
super.viewDidLoad()
let tapRecognizer = UITapGestureRecognizer(target: self, action: #selector(mapViewDidTap(_:)))
mapView.addGestureRecognizer(tapRecognizer)
...
}
func mapViewDidTap(_ tapRecognizer: UITapGestureRecognizer) {
if tapRecognizer.state == .recognized {
// Get map coordinate from touch point
let touchCoord = tapRecognizer.location(in: mapView)
let coord = mapView.convert(touchCoord, toCoordinateFrom: mapView)
let coordRect = MKMapRect(origin: coord, size: MKMapSize())
// for every overlay ...
for overlay in mapView.overlays {
// .. if MyPolygon ...
if let polygon = overlay as? MyPolygon {
let selected = polygon.intersects(coordRect)
if polygon.selected != selected {
polygon.selected = selected
mapView.renderer(for: polygon)?.setNeedsDisplay()
}
}
}
}
}