1

I'm trying to recreate (to some extent) the up and down arrows presented on Mail.app on iOS 7 and iOS 8. There's not much to it. I just insert a UISegmentedControl into a UIBarButtonItem, like this (if you do know a better way of replicating that UI, please let me know):

UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:@[[UIImage imageNamed:@"ArrowDown"], [UIImage imageNamed:@"ArrowUp"]]];
[segmentedControl addTarget:self action:@selector(segmentedAction:) forControlEvents:UIControlEventValueChanged];
[segmentedControl setBackgroundImage:[[UIImage alloc] init] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[segmentedControl setDividerImage:[[UIImage alloc] init] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[segmentedControl setFrame:CGRectMake(0, 0, 100, 30)];
[segmentedControl setMomentary:YES];

UIBarButtonItem *segmentedButton = [[UIBarButtonItem alloc] initWithCustomView:segmentedControl];

self.navigationItem.rightBarButtonItem = segmentedButton;

Notice the calls to setBackgroundImage: and setDividerImage:. They are needed so the control looks just like the one from Mail.app. And that setup works:

rightBarButtonItem looking great!

Trouble is, it doesn't stay that way after a rotation. When using the iPhone in landscape, the rightBarButtonItem is automatically resized, looking broken and staying that way even after returning the device to portrait mode:

rightBarButtonItem not looking so great anymore...

The control still works as planned , but well... It doesn't look so pretty anymore.

I have experimented with lots of properties and different setups, and nothing seems to work, except not setting an empty UIImage for the control background. If I comment out the setBackgroundImage: and the setDividerImage: pieces of code, the control keeps its look even after rotating:

Works, but without the looks!

But that's not the UI I have been looking for.

Do you know of any way to achieve the intended look and still have the correct behavior around? Or even what could be causing the resizing in the first place?

David Ansermot
  • 6,052
  • 8
  • 47
  • 82
Aloha Silver
  • 1,394
  • 17
  • 35

1 Answers1

0

You may try to use two UIButton instead to UISegmentControl.

UIBarButtonItem *rightItem = [[UIBarButtonItem alloc] initWithCustomView:customView];
self.navigationItem.rightBarButtonItem = rightItem;
amonxu
  • 123
  • 5
  • The problem with that approach is that it is next to impossible to get all the spacing correct to reproduce a `UISegmentedControl` look. You have to start messing with `imageInsets` and properties alike, and that doesn't play nice with different screen sizes in the end. – Aloha Silver Apr 21 '15 at 16:13