IOS7 UIPickerView how to hide the selection indicator

Question

How can I hide those 2 lines on the selected row?

enter image description here

The lines are by-design. I'd be very surprised if you could remove them. — James Webster, Dec 16 '13 at 13:37

score 37 · Answer 1 · edited Oct 29 '14 at 04:10

37

[[pickerview.subviews objectAtIndex:1] setHidden:TRUE];
[[pickerview.subviews objectAtIndex:2] setHidden:TRUE];

Use this in titleForRow or viewForRow delegate method of the pickerView.

edited Oct 29 '14 at 04:10

user454322

7,300
5
41
52

answered Feb 25 '14 at 10:39

motox

759
10
17

ChrisH · Answer 2 · 2017-05-02T18:43:49.247

25

Based on the other answers, I decided to enumerate the subviews and saw that the lines have a height of 0.5 so my solution now looks like this in Swift:

func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {

     pickerView.subviews.forEach({

          $0.hidden = $0.frame.height < 1.0
     })

     return myRowCount
}

And in Objective-C

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {

     [pickerView.subviews enumerateObjectsUsingBlock:^(UIView *subview, NSUInteger idx, BOOL *stop) {

        subview.hidden = (CGRectGetHeight(subview.frame) < 1.0) 
     }];

    return myRowCount
}

Obviously not particularly future proof, but probably more so than hiding a subview at a given index.

Edit: Updated to handle the case provided by @Loris

edited May 02 '17 at 18:43

answered Feb 18 '16 at 17:52

ChrisH

4,468
2
33
42

1

BTW, if you added some subview to a UIPickerView which also has a height of 0.5, you can use `.tag` for this subview in order to identify it and prevent from hiding – efimovdk Oct 18 '16 at 17:59
1

On iPhone 7 + the height of the line is 2/3 (0.666666666666667) instead of 0.5, so I ended up checking if the height was less than 1. `func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int { pickerView.subviews.forEach({ $0.hidden = $0.frame.height <= 1 }) return myRowCount }` – Loris Dec 05 '16 at 06:31

score 11 · Answer 3 · answered Jan 04 '14 at 18:54

11

In iOS7 setting the parameter pickerview.showsSelectionIndicator has no effect, according to the documentation (https://developer.apple.com/library/ios/documentation/userexperience/conceptual/UIKitUICatalog/UIPickerView.html).

However, as a UIPickerView in the end is a UIView with subviews, I checked what subviews there were. I found 3, the first one contained all the components of the UIPickerView, and the other two are the two lines.

So by setting the second and third (index 1 and 2) hidden, the two lines were removed.

[[pickerview.subviews objectAtIndex:1] setHidden:TRUE];
[[pickerview.subviews objectAtIndex:2] setHidden:TRUE];

It's not a real nice solution, and definitely not forward compatible, but for now it gets the job done. Hope this helps.

answered Jan 04 '14 at 18:54

morksinaanab

682
7
20

5

By the way. When you remove these lines, the look is kindof weird, because the 3d effect of the roll changes the position of the views. I was playing around and you can also change the color of these lines like this: `((UIView *)[self.subviews objectAtIndex:1]).backgroundColor = [UIColor whiteColor]; ((UIView *)[self.subviews objectAtIndex:2]).backgroundColor = [UIColor whiteColor];` – morksinaanab Jan 05 '14 at 04:29
thank for your answer but it thrown a NSRangeException -> -[__NSArrayI objectAtIndex:]: index 1 beyond bounds for empty array' – james075 Jan 06 '14 at 09:52
I've added 2 views to hide these lines but it's very ugly, have no choice for now – james075 Jan 06 '14 at 10:01
I just rechecked. I actually subclassed the UIPickerview and added these lines in the initWithFrame method (so referenced self.subviews). Perhaps the pickerview was not initialized yet in your code at the point where you added the setHidden lines? – morksinaanab Jan 06 '14 at 15:51
Maybe you can share some code? I am interested if this solution would break easily in other situations. – morksinaanab Jan 06 '14 at 16:23
5

@James03 changing the color of selector lines works. If you don't subclass the UIPickerView, you should call the code from -viewDidLayoutSubviews, it won't work from -viewDidLoad – Andris Zalitis May 26 '14 at 09:18
morksinaanab's comment is what worked for me and my webview picker. Thank You :) – ChrisOSX Apr 18 '15 at 13:14

score 8 · Answer 4 · answered Aug 07 '15 at 12:56

8

This worked for me in Swift in iOS 9 Beta.

datePicker.subviews[0].subviews[1].hidden = true
datePicker.subviews[0].subviews[2].hidden = true

answered Aug 07 '15 at 12:56

Justin Domnitz

3,217
27
34

score 7 · Answer 5 · answered Dec 08 '16 at 09:11

7

Swift 3 Version (Working):

pickerView.subviews[1].isHidden = true
pickerView.subviews[2].isHidden = true

answered Dec 08 '16 at 09:11

ofeida

129
1
8

worked for me, put it in viewDidLoad function. thanks! – Dima Gimburg Jul 09 '17 at 21:44

score 7 · Answer 6 · answered Oct 01 '17 at 03:11

7

func numberOfComponents(in pickerView: UIPickerView) -> Int
    {
        pickerView.subviews.forEach({
            $0.isHidden = $0.frame.height < 1.0
        })
        return 1
    }

answered Oct 01 '17 at 03:11

Larry Feldman

39
1
8

Dharmbir Singh · Answer 7 · 2013-12-16T13:45:32.730

6

It is working before ios7.

pickerView.showsSelectionIndicator = NO;

for more info in ios7 see this doc

https://developer.apple.com/library/ios/documentation/userexperience/conceptual/UIKitUICatalog/UIPickerView.html

edited Dec 16 '13 at 13:45

answered Dec 16 '13 at 13:40

Dharmbir Singh

17,485
5
50
66

yes already tried, on ios7 apple's doc says that it cannot be hidden, I'm looking for a trick, is there a proper way to hide indicators ? – james075 Dec 16 '13 at 13:47
There is no technical way right now. If you wanna then its on you make it according to your logic. – Dharmbir Singh Dec 16 '13 at 13:48
@James03 , i believe found a way to remove the lines, see my answer. – morksinaanab Jan 06 '14 at 08:22

score 4 · Answer 8 · answered Dec 30 '13 at 17:34

4

This is easily achieved. Just place your PickerView inside a ScrollView with the desired size of your row, and use the picker delegate(pickerView:rowHeightForComponent:) method to change the the row height of the picker to a little bigger than your ScrollView. Like that, the lines will be hidden.

answered Dec 30 '13 at 17:34

tperei

353
2
8

i like this method. it's easy for a user to see what to do, without taking up too much screen space.. – ICL1901 Aug 01 '14 at 08:31

score 4 · Answer 9 · answered Oct 01 '18 at 21:33

4

Swift 4.2

Paste both lines of code into either your titleForRow or viewForRow delegate method of the pickerView.

pickerView.subviews[1].isHidden = true
pickerView.subviews[2].isHidden = true

And you should be good to go.

answered Oct 01 '18 at 21:33

Douglas Putnam

142
1
4

score 3 · Answer 10 · answered Aug 12 '14 at 10:25

3

I solved this by a simple trick: Place picker view in a view, and set clip subviews property of this view = true. Now, just set height of row in picker view = height of container view then the line will disappear.

answered Aug 12 '14 at 10:25

Son Nguyen

3,481
4
33
47

score 3 · Answer 11 · answered Jul 04 '20 at 07:03

3

Swift 5

func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) ->  String? {
        pickerView.subviews[1].isHidden = true
        pickerView.subviews[2].isHidden = true
        return pickerData[row]
}

answered Jul 04 '20 at 07:03

Rashid Latif

2,809
22
26

score 2 · Answer 12 · answered Dec 19 '16 at 11:10

I opted for a different approach to make it a bit more future proof just in case Apple decide to change something down the line

for subview in setPickerView.subviews{
    if subview.frame.origin.y != 0{
        subview.isHidden = true
    }
}

since the (subView that contains the items)'s origin y location is 0 then I can safely hide anything else without risking an index out of bounds error

Enjoy

EDIT: I forgot to tell you that I put it in the viewDidLayoutSubviews method!

This works also in - func numberOfComponents(in pickerView: UIPickerView) -> Int {} — PAULMAX, Jun 08 '21 at 21:04

score 0 · Answer 13 · answered Aug 12 '14 at 11:14

0

Just write this code in your viewdidload method

[[PickerView.subviews objectAtIndex:1] setHidden:TRUE];
[[PickerView.subviews objectAtIndex:2] setHidden:TRUE];

answered Aug 12 '14 at 11:14

BHASKAR

1,201
1
9
20

I have a feeling this only worked in your viewDidLoad because the pickerView was totally defined. I had to use ChrisH's answer above for Swift to hide the lines. I'm not sure why Apple has a setting and they ignore it. – LevinsonTechnologies Feb 29 '16 at 20:39
Yes If you use interface builder then you get the pickerview. otherwise you have to set this after programatically created the picker – BHASKAR Mar 01 '16 at 04:09

score 0 · Answer 14 · answered Dec 08 '14 at 09:32

In ios7 we can't hidden the separate line in UIPickerView and we can know that from this page: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIPickerView_Class/index.html#//apple_ref/occ/instm/UIPickerView/showsSelectionIndicator

But we can add two UIViews to cover it and the width of two UIViews is 1. Some sample code here:

s_leftLine = [[UIView alloc] initWithFrame:CGRectMake(s_pickerView.frame.size.height/2,
                                                      s_pickerView.frame.size.width/2 - kWidthOfPickerPage/2 + 1,
                                                      1,
                                                      s_pickerView.frame.size.height)];
s_leftLine.backgroundColor = [UIColor whiteColor];
s_leftLine.layer.zPosition = s_pickerView.layer.zPosition + 1; // make sure the line is on the top
[s_pickerView addSubview:s_leftLine];

Ok, this will be much better :] if someone has better answer just write it down for sharing :)

score -1 · Answer 15 · answered Aug 10 '17 at 11:20

-1

This code works fine for iOS 10 with swift 3

Just add this code in your view controller class.

override func viewDidLayoutSubviews() {
        timePickerView.subviews[1].isHidden = true
        timePickerView.subviews[2].isHidden = true
        }

answered Aug 10 '17 at 11:20

SAIF

126
8

Should't hard-code index offsets. Could crash is iOS changes. – Leslie Godwin Dec 12 '17 at 09:16

score -3 · Answer 16 · answered Aug 20 '17 at 09:37

-3

You can also make an extension to UIPickerView:

extension UIPickerView {
    func hideSelectionIndicator() {
        for i in [1, 2] {
            self.subviews[i].isHidden = true
        }
    }
}

And then just call myPickerView.hideSelectionIndicator() for each PickerView you want to alter.

answered Aug 20 '17 at 09:37

Jan-Willem

1

`Terminating app due to uncaught exception 'NSRangeException, reason: -[__NSSingleObjectArrayI objectAtIndex:]: index 1 beyond bounds [0 .. 0]` in 2018 – ScottyBlades Sep 02 '18 at 17:36
Shouldn't hard-code index offsets. (Possible crash) – maslovsa Aug 15 '22 at 17:17

IOS7 UIPickerView how to hide the selection indicator

16 Answers16

Linked