Create a iOS6 Maps MKUserTrackingBarButtonItem button

Question

I want to create a MKUserTrackingBarButtonItem the same way iOS6 have it. Like a floating UIBarButtonItem. ( http://cl.ly/image/1Q1K2S1A1H3N )

Can you give some advice in how to achieve this?

Thx!

That was my first approach but, then I need to do all the design of the button right? I can't use the default MKUserTrackingBarButtonItem ?? — jcalonso, Oct 25 '12 at 10:14
Nope, the `MKUserTrackingBarButtonItem` is a `UIBarButtonItem`. — rckoenes, Oct 25 '12 at 10:17
You could add an transparent toolbar in the bottom of you view and add the `MKUserTrackingBarButtonItem` to this, but I'm not sure it will look as nice as the official maps app. — rckoenes, Oct 25 '12 at 10:24
I'm trying to create it manually, I hope It looks nice. Thanks for the advice! — jcalonso, Oct 25 '12 at 10:44

score 9 · Answer 1 · answered Oct 25 '12 at 16:49

Finally I followed the recomendation of @rckoenes and created the button manually.

Here is how (A working project is available here: https://github.com/jcalonso/iOS6MapsUserHeadingButton ):

//User Heading Button states images
UIImage *buttonImage = [UIImage imageNamed:@"greyButtonHighlight.png"];
UIImage *buttonImageHighlight = [UIImage imageNamed:@"greyButton.png"];
UIImage *buttonArrow = [UIImage imageNamed:@"LocationGrey.png"];

//Configure the button
userHeadingBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[userHeadingBtn addTarget:self action:@selector(startShowingUserHeading:) forControlEvents:UIControlEventTouchUpInside];
//Add state images
[userHeadingBtn setBackgroundImage:buttonImage forState:UIControlStateNormal];
[userHeadingBtn setBackgroundImage:buttonImage forState:UIControlStateNormal];
[userHeadingBtn setBackgroundImage:buttonImageHighlight forState:UIControlStateHighlighted];
[userHeadingBtn setImage:buttonArrow forState:UIControlStateNormal];

//Button shadow
userHeadingBtn.frame = CGRectMake(5,425,39,30);
userHeadingBtn.layer.cornerRadius = 8.0f;
userHeadingBtn.layer.masksToBounds = NO;
userHeadingBtn.layer.shadowColor = [UIColor blackColor].CGColor;
userHeadingBtn.layer.shadowOpacity = 0.8;
userHeadingBtn.layer.shadowRadius = 1;
userHeadingBtn.layer.shadowOffset = CGSizeMake(0, 1.0f);

[self.mapView addSubview:userHeadingBtn];

The problem with this solution is that it doesn't support multiple orientations or devices (iPad vs iPhone) because you're hardcoding the frame of the button. I highly suggest using AutoLayout instead so that you don't have to worry about this. If I implement this myself, I'll post it here. Thanks for your code. — DiscDev, Sep 30 '13 at 16:18
See this answer for adding the user location button using AutoLayout: http://stackoverflow.com/a/19100108/1103584 — DiscDev, Sep 30 '13 at 19:44

DiscDev · Answer 2 · 2013-09-30T17:35:43.363

If you want to use jcalonso's answer with autolayout so that it supports portrait/landscape iPhone/iPad, simply remove the line that sets the frame on the button, and add these constraints after calling addSubView:

[mapView setTranslatesAutoresizingMaskIntoConstraints:NO];
[userHeadingBtn setTranslatesAutoresizingMaskIntoConstraints:NO];

NSDictionary *dict = NSDictionaryOfVariableBindings(mapView, userHeadingBtn);

//Map has user heading btn
[mapView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(>=175)-[userHeadingBtn(30)]-|" options:0 metrics:0 views:dict]];
[mapView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(>=175)-[userHeadingBtn(39)]-|" options:0 metrics:0 views:dict]];

//Continue with adding the map to the baseview
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[mapView]|" options:0 metrics:0 views:dict]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[mapView]|" options:0 metrics:0 views:dict]];

Create a iOS6 Maps MKUserTrackingBarButtonItem button

2 Answers2