Customize UIPicker appearence

Question

I was wondering if it's possible to customize a UIPicker in order to give it the appearence we want.

I saw the Mappy iPad app picker here (on the left of the screenshot) and I want to do the same picker for my app. So, my question is : how to make the same picker like this one ?

Thanks a lot !

Regards, Sébastien ;)

score 0 · Answer 1 · answered May 30 '12 at 12:35

0

The one on your screenshot looks like a normal UITableView with custom Cells for me. Maybe you can try it that way.

answered May 30 '12 at 12:35

Olli

1

That's what I thought before use it. Did you already use this app ? In fact, the selected item stayed at the middle of the list, like the UIPicker not like the UITableView. Hoping that I'm clear.. – Sébastien Polytech' May 30 '12 at 13:12

score 0 · Answer 2 · answered May 30 '12 at 13:21

0

That's what I thought before use it. Did you already use this app ? In fact, the selected item stayed at the middle of the list, like the UIPicker not like the UITableView. Hoping that I'm clear..

answered May 30 '12 at 13:21

Sébastien Polytech'

316
3
19

htafoya · Accepted Answer · 2012-10-30T16:09:10.320

I guess that they made it their own way. It can be done in several ways.

In fact it may be a ListView with a "floating" view above it. When you scroll the list then change the values inside the indicator to match the element that is below it.

It may even be a single ListView that knows which element is at the middle so that it uses another UITableViewCell design for that one element, giving the illusion that is the one selected. (Carrousels do this)

It could also be done with a UIScrollView and the commented view indicator.

As I remember you can't change much of the UIPicker design.

EDIT

However, you can still edit the UIPickerView styles using the - (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view method.

Also, you can "remove" or change the default picker border by adding some PNG image above it with transparent center and allowsUserInteraction = NO, so that you can still use the picker bellow it. To remove it just create an image that will look as the background.

The only drawback is that picker view has specific height sizes that you must use (162.0, 180.0 or 216.0). That's why I don't think the example you provided uses a picker view.

Customize UIPicker appearence

3 Answers3