UIPickerView with custom views broken in iOS7

Question

I have an app with a UIPickerView. I am returning a custom view with the method

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view 

It looked fine in iOS 6. In iOS 7, not so much -- screen shot below.

Notice that in the cells that don't have focus, the second and third columns overlap. The central row is correct.

Any suggestions?

Answer 1

It seems that for a strange reason, if the width of any column is higher than 1/3 of the picker view's width the layout breaks. So if you have a 320 pixel wide picker view 106 or less is working, but 107 or higher is wrong, regardless if you have 2,3,4 ... components. Really strange.

Answer 2

As imihaly said in his earlier post it looks like this only happens if the widthForComponent value for the LAST component is more than 106 pixels. The other components can return a value over 106 and it will look fine. Also, if you return a view that's smaller in width than the value returned by widthForComponent it will center the view, but it will be offset to the left by about 10 pixels.

Answer 3

I had a similar issue, but I was displaying simple numbers instead. See my similar question. Short answer is that I had to break up the components into different UIPickerViews.

Answer 4

As @imihaly mentioned, There is only one solutions that I come up with to increase a width of picker view which is add into view.

I have created a demo like https://github.com/Dharmesh-shah2412/demoPickerView