CODEWITHSUNDEEP
swiftuinavigationcontrollerxcode6mkmapviewmkuserlocation
Giuseppe
Giuseppe

Reputation: 165

Is possible customize MKUserTrackingBarButtonItem?

I'm using MKUserTrackingBarButtonItem to locate on MKMapView. I've added it on navigation controller as navigationItem programmatically. My questions are:

  1. Could I customize MKUserTrackingBarButtonItem? Example: my navigation controller has a blue background, and I need to set my MKUserTrackingBarButtonItem appearance conform to navigation controller. Instead it shows a white square around the arrow. I would change this.
  2. Is possible move my MKUserTrackingBarButtonItem from the navigation controller and put it directly on my map?

Thanks

Upvotes: 2

Views: 2412

Answers (2)

davidrynn
davidrynn

Reputation: 2376

From what I can tell, you have limited ability to customize the user tracking button. You can change the color. In order to get the button off the nav bar you have to add a UIToolbar to your mapView, set the frame size of the toolbar so it shows up in your preferred location and then add the mkusertrackingbutton as an item to the toolbar, with flexible spaces added as appropriate in order to center the button correctly.

Here's how I implemented it (so far):

    func setupUserTrackingButton() {
      let trackingButton: MKUserTrackingBarButtonItem = MKUserTrackingBarButtonItem.init(mapView: mapView)
      trackingButton.customView?.tintColor = UIColor.black
      trackingButton.style = UIBarButtonItemStyle.plain
      trackingButton.customView?.size = CGSize(width: 50, height: 50)
      let originPoint: CGPoint = CGPoint(x: mapView.width-70,y: mapView.height-85)
      let lighterGreyColor: UIColor = UIColor(colorLiteralRed: 125, green: 125, blue: 125, alpha: 1.0)

//need to implement this rounded view in order to get the box to look consistent with the mkusertracking button API
      let roundedSquare: UIView = UIView(frame: CGRect(origin: originPoint, size: CGSize(width: 50, height: 50)))
      roundedSquare.backgroundColor = lighterGreyColor
      roundedSquare.layer.cornerRadius = 5
      roundedSquare.layer.masksToBounds = true

      let toolBarFrame = CGRect(origin: CGPoint(x: 3, y: 3) , size: CGSize(width: 44, height: 44))
//You may have to subclass toolbar in order to get the right coloring
      let toolbar = UIToolbar.init(frame: toolBarFrame)
      let flex: UIBarButtonItem = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: self, action: nil)
      toolbar.items = [flex, trackingButton, flex]

      roundedSquare.addSubview(toolbar)
      mapView.addSubview(roundedSquare)

}

Otherwise, you may have to subclass the button and basically build in other features, including core graphics animations, which would be a bit of work. Hope this helps.

EDIT: As of iOS 11.0+ there is now an MKUserTrackingButton which is a UIView subclass. So if you don't need anything under iOS 11 just use the button and subclass or customize all you want. Apple Docs for MKUserTrackingButton

Upvotes: 2

user4839439
user4839439

Reputation:

This will animate the mapView back to the users current location. You can call this function from any custom button you create. 

@IBAction func resetMapCurrentLocation(sender: AnyObject) {
    mapView.userTrackingMode = RMUserTrackingModeFollow
}

Upvotes: 0

Related Questions