UISegmentedControl in Mail app

Question

How do I get a UISegmentedControl that is like the one in the Mail App, so that it is the same colour as UIToolbar buttons (as if both segments were in the selected state).

I want to use the segmented control for exactly the same purpose as Mail.

(on the iPad, so a grey not blue color)

Spotter

Can't you change the tintColor? – Exercitation

Answer 1

The style I'm looking for is undocumented: it is style 4. It looks like he up/down control here: http://media.mobilemeandering.com/wp-content/uploads/2010/04/ipad-mail-message-2.png (not my image btw)

It basically makes all segments look selected, it's intended for momentary pushes, and is effectively multiple tool bar buttons pushed up together. So it can't be set in IB but must be set in code or manually in the nib/xib file, by opening the nib as a text file.

Spotter

Answer 2

This is code from Apple Sample codes... NavBar and both the images used in the code.. you shoud be able to get exact same view as mail App.

// "Segmented" control to the right
UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:
                                            [NSArray arrayWithObjects:
                                                [UIImage imageNamed:@"up.png"],
                                                [UIImage imageNamed:@"down.png"],
                                             nil]];
[segmentedControl addTarget:self action:@selector(segmentAction:) forControlEvents:UIControlEventValueChanged];
segmentedControl.frame = CGRectMake(0, 0, 90, 30);
segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;
segmentedControl.momentary = YES;

defaultTintColor = [segmentedControl.tintColor retain];    // keep track of this for later

UIBarButtonItem *segmentBarItem = [[UIBarButtonItem alloc] initWithCustomView:segmentedControl];
[segmentedControl release];

self.navigationItem.rightBarButtonItem = segmentBarItem;
[segmentBarItem release];

Hindenburg

I'm using the iPad, that code is for iphone, in that its the wrong color – Spotter

Answer 3

You seek the tintColor property!

When you use a UISegmentedControl you can change its tint color to any color you can dream up. So, if you added the UISegmentedControl in Interface Builder then you would style it in your - (void)viewWillAppear:(BOOL)animated method as such (assuming you had it hooked up to a @synthesized ivar:

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];

    // Set the tintColor to match the navigation bar
    self.mySegmentedControl.tintColor = [UIColor colorWithRed:.94 green:.94 blue:.94 alpha:1];

    ... do whatever else in your viewWillAppear ...
}

Now obviously you will want to play with the red, green, blue, and alpha's that I've put in the sample code above, but you can literally tint the UISegmentedController any color you would like (or make it as transparent as you would like), so it's just a matter of finding the RGBA values that look perfect to you.

Remember that per Apple's docs that the default value of this property is nil (no color). UISegmentedControl uses this property only if the style of the segmented control is UISegmentedControlStyleBar.

Good luck!

Notochord

Thanks, but I know of this, I need to know what tint Color to use to get the same tint as a normal UIBarButtonItem. Is there a private property of a UIBarButton item which I can use to just get the valu – Spotter

Try red:.15 green:.19 blue:.31 . Like I said, you just have to play with it a bit to get the exact color you want. There's a nifty tool that comes with OS X called DigitalColor Meter (it's inside of Applications/Utilities). You can use that to mouse over anything on your screen and it will give you the exact color combo you are looking for. – Notochord

Well .15, .19 and .31 are nowhere near the other buttons, but I guess I just have to fiddle :( – Spotter

Well the UIBarButton Item is a gradient not a solid colour so unless theres a private method to get a controls tint color, the closest you can get is (tint color doesn't have the same gradient as UIBarButtonItem) [UIColor colorWithRed:(151.0/255.0) green:(156.0/255.0) blue:(162.0/255.0) alpha:1] – Spotter

Answer 4

I dont know exactly what you mean.. but i believe the "UISegmentedControlStyleBar" as segmentedControlStyle could it be.

segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar

You can set this property in the IB too! (It's the property called "style")

Veta

I know but thanks for answering, what I mean is in the Mail the segmented control (the up and down buttons) is the exact same colour as a UIbarbuttonitem, however I added a segmented control in IB and it was noticeable lighter. – Spotter

Answer 5

I'm not sure I exactly understand what you're trying to do, but I'll give it a shot.

The solution is not obvious, you need to use a UISearchDisplayController in order to get a matching UISearchBar and UISegmentedControl.

See the TableSearch sample code for an example.

Marino

However the screen is bigger so I don't want a search Bar, also I need other bar button items next to the segmented control. – Spotter