iPhone development
RSS icon Email icon Home icon

  • A UIPickerView with labels

    Posted on March 29th, 2009 Kare 13 comments

    I recently needed a picker view with labels (like the one in the timer tab in the Clock app) to select minutes and seconds for a time interval. So I made the following subclass of UIPickerView:

    1. #import
    2.  
    3. /**
    4. A picker view with labels under the selection indicator.
    5. Similar to the one in the timer tab in the Clock app.
    6. NB: has only been tested with less than four wheels.
    7. */
    8. @interface LabeledPickerView : UIPickerView {
    9. NSMutableDictionary *labels;
    10. }
    11.  
    12. /** Adds the label for the given component. */
    13. - (void) addLabel:(NSString *)labeltext forComponent:(NSUInteger)component;
    14.  
    15. @end

    … and the implementation:

    1. /*******************************************************************************
    2. * Copyright (c) 2009 Kåre Morstøl (NotTooBad Software).
    3. * All rights reserved. This program and the accompanying materials
    4. * are made available under the terms of the Eclipse Public License v1.0
    5. * which accompanies this distribution, and is available at
    6. * http://www.eclipse.org/legal/epl-v10.html
    7. *
    8. * Contributors:
    9. *    Kåre Morstøl (NotTooBad Software) – initial API and implementation
    10. *******************************************************************************/
    11.  
    12. // http://stackoverflow.com/questions/367471/fixed-labels-in-the-selection-bar-of-a-uipickerview/616517
    13.  
    14. #import "LabeledPickerView.h"
    15.  
    16. @implementation LabeledPickerView
    17.  
    18. /** loading programmatically */
    19. - (id)initWithFrame:(CGRect)aRect {
    20. if (self = [super initWithFrame:aRect]) {
    21. labels = [[NSMutableDictionary alloc] initWithCapacity:3];
    22. }
    23. return self;
    24. }
    25.  
    26. /** loading from nib */
    27. - (id)initWithCoder:(NSCoder *)coder {
    28. if (self = [super initWithCoder:coder]) {
    29. labels = [[NSMutableDictionary alloc] initWithCapacity:3];
    30. }
    31. return self;
    32. }
    33.  
    34. - (void) dealloc
    35. {
    36. [labels release];
    37. [super dealloc];
    38. }
    39.  
    40. #pragma mark Labels
    41.  
    42. - (void) addLabel:(NSString *)labeltext forComponent:(NSUInteger)component {
    43. [labels setObject:labeltext forKey:[NSNumber numberWithInt:component]];
    44. }
    45.  
    46. /**
    47. Adds the labels to the view, below the selection indicator glass-thingy.
    48. The labels are aligned to the right side of the wheel.
    49. The delegate is responsible for providing enough width for both the value and the label.
    50. */
    51. - (void)didMoveToWindow {
    52. // exit if view is removed from the window or there are no labels.
    53. if (!self.window || [labels count] == 0)
    54. return;
    55.  
    56. UIFont *labelfont = [UIFont boldSystemFontOfSize:20];
    57.  
    58. // find the width of all the wheels combined
    59. CGFloat widthofwheels = 0;
    60. for (int i=0; i
    61. widthofwheels += [self rowSizeForComponent:i].width;
    62. }
    63.  
    64. // find the left side of the first wheel.
    65. // seems like a misnomer, but that will soon be corrected.
    66. CGFloat rightsideofwheel = (self.frame.size.width - widthofwheels) / 2;
    67.  
    68. // cycle through all wheels
    69. for (int component=0; component
    70. // find the right side of the wheel
    71. rightsideofwheel += [self rowSizeForComponent:component].width;
    72.  
    73. // get the text for the label.
    74. // move on to the next if there is no label for this wheel.
    75. NSString *text = [labels objectForKey:[NSNumber numberWithInt:component]];
    76. if (text) {
    77.  
    78. // set up the frame for the label
    79. CGRect frame;
    80. frame.size = [text sizeWithFont:labelfont];
    81. // center it vertically
    82. frame.origin.y = (self.frame.size.height / 2) - (frame.size.height / 2) - 0.5;
    83. // align it to the right side of the wheel, with a margin.
    84. // use a smaller margin for the rightmost wheel.
    85. frame.origin.x = rightsideofwheel - frame.size.width -
    86. (component == self.numberOfComponents - 1 ? 5 : 7);
    87.  
    88. // set up the label
    89. UILabel *label = [[[UILabel alloc] initWithFrame:frame] autorelease];
    90. label.text = text;
    91. label.font = labelfont;
    92. label.backgroundColor = [UIColor clearColor];
    93. label.shadowColor = [UIColor whiteColor];
    94. label.shadowOffset = CGSizeMake(0,1);
    95.  
    96. /*
    97. and now for the tricky bit: adding the label to the view.
    98. kind of a hack to be honest, might stop working if Apple decides to
    99. change the inner workings of the UIPickerView.
    100. */
    101. if (self.showsSelectionIndicator) {
    102. // if this is the last wheel, add label as the third view from the top
    103. if (component==self.numberOfComponents-1)
    104. [self insertSubview:label atIndex:[self.subviews count]-3];
    105. // otherwise add label as the 5th, 10th, 15th etc view from the top
    106. else
    107. [self insertSubview:label aboveSubview:[self.subviews objectAtIndex:5*(component+1)]];
    108. } else
    109. // there is no selection indicator, so just add it to the top
    110. [self addSubview:label];
    111. }
    112. }
    113. }
    114.  
    115. @end

    A big thanks to dizy from stackoverflow.com for showing how to add the labels below the selection indicator.

    If anyone knows of a better place to put the label-adding code than didMoveToWindow then please let me know. It seems out of place where it is now.

    This class is part of the mySettings project and the latest version can always be found here: LabeledPickerView.h, LabeledPickerView.m.
    kick it on iPhoneKicks.com

    iPhone development ,
     

    13 responses to “A UIPickerView with labels” RSS icon

    • Very nice and very helpful. Thank you.

      However I have a need to update the labels on the fly. So for example changingthe picker from 2 to 1 will change my label from “minutes” to “minute” etc.

      I’m not 100% sure how I can do this. I’ve tried adding a tag to the label setup just below label.shadowoffset:

      label.tag = component;

      And then I’ve added an update routine to the class as follows:

      - (void) upDateLabel:(NSString *)labeltext forComponent:(NSUInteger)component {
      UILabel *theLabel = [self viewWithTag:component];
      theLabel.text = labeltext;
      }

      This returns a warning for starters (initialisation from distinct objective-c type) but when I run it, it does appear to update the value for the view (in the debugger). However the label in the pickerView never changes.

      Any ideas or pointers on how to do this correctly?

      Thanks, Michael.

      Reply

    • I think you need to call setNeedsDisplay on the label. And be aware that the label is set to the smallest size possible so you might need to change the size too.

      Please let me know if you get this to work because I could really use this functionality in the mySettings project.

      Reply

    • Hi Kare,

      Turns out it was a bug in another bit of code….so everything is working now (you don’t even need setNeedsDisplay).

      I still have the warning though….which I’m trying to sort now. When I do I’ll come back to you.

      Thanks, Michael.

      Reply

    • Ok done…I needed to cast the viewWithTag to a UILabel of course,

      I’m sure there is a better way to do this but for the moment using the component as the tag is the easiest way because nothing else in your code needs to be modified. Also it makes it very easy to find the label view regardless of where it is added.

      So please go ahead and add this in.

      Thanks again.

      //add the following line

      - (void)didMoveToWindow {
      …
      label.tag = component;
      …
      }

      // Update method
      - (void) upDateLabel:(NSString *)labeltext forComponent:(NSUInteger)component {
      UILabel *theLabel = [self viewWithTag:component];
      theLabel.text = labeltext;
      //[theLabel setNeedsDisplay];
      }

      Obviously the best place to call the update method is in the pickerView didSelectRow method for the component being updated. i.e. [thePicker upDateLabel:NSLocalizedString(@"minute", @"") forComponent:1];

      Thanks again for doing all the hard work.

      Regards, Michael

      Reply

    • In fact Apple animates the label change so you could do this to replicate what apple does (not sure about the timings though!:

      - (void) upDateLabel:(NSString *)labeltext forComponent:(NSUInteger)component {
      UILabel *theLabel = (UILabel*)[self viewWithTag:component];

      [UIView beginAnimations:nil context:NULL];
      [UIView setAnimationDuration:0.75];
      [UIView setAnimationCurve:UIViewAnimationCurveLinear];
      theLabel.alpha = 0.00;
      theLabel.text = labeltext;
      theLabel.alpha = 1.00;
      [UIView commitAnimations];
      }

      Reply

    • sorry! In fact you only want to update the label if the label value has changed:

      - (void) upDateLabel:(NSString *)labeltext forComponent:(NSUInteger)component {
      UILabel *theLabel = (UILabel*)[self viewWithTag:component];

      // Update label if it doesn’t match current label
      if (theLabel.text != labeltext) {
      [UIView beginAnimations:nil context:NULL];
      [UIView setAnimationDuration:0.75];
      [UIView setAnimationCurve:UIViewAnimationCurveLinear];
      theLabel.alpha = 0.00;
      theLabel.text = labeltext;
      theLabel.alpha = 1.00;
      [UIView commitAnimations];
      }

      }

      Reply

      • I finally got around to updating mySettings with Michael’s changes. Now just add something similar to this to your delegate and the labels will update automatically when a new row is selected:

        1. // called when the wheel stops
        2. - (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
        3.         if (component == 0) {
        4.                 [(LabeledPickerView *)pickerView updateLabel:(row==1 ? @"min" : @"mins") forComponent:0];
        5.         } else if (component == 1) {
        6.                 [(LabeledPickerView *)pickerView updateLabel:(row==1 ? @"sec" : @"secs") forComponent:1];
        7.         }
        8. }

        The latest version can be found here: LabeledPickerView.h, LabeledPickerView.m.

    • Cleaned up the code a bit, should have been done long time ago obviously. And removed some completely unnecessary reloading of views.

      Reply

    • Thanks for this useful little class! It’s strange that the iPhone HIG recommends doing exactly this, yet doesn’t suggest how to do it, nor do the APIs seem to support it easily!

      By the way, I noticed that this class always tries to send a pickerView:didSelectRow:inComponent: message to its delegate, which crashes the app if the delegate doesn’t implement that method. The regular UIPickerView doesn’t do this, and indeed that method is listed as “optional” in the UIPickerViewDelegate protocol reference.

      Otherwise, very nice work. Thanks again!

      Reply

    • This is great stuff!

      I did notice, however, that its calling ‘didSelectRow’ upon creation (or at least when added to view). I haven’t narrowed it down exactly but has anyone else seen this?

      Reply

    • dispenses employ a great web-site decent Gives thank you for the work to support people

      Reply

    • I’m working on a iOS 4.0 app, when I try to use a LabledPickerView I get an EXE_BAD_ACCESS at this line:

      if ([self.delegate respondsToSelector:@selector(pickerView:didSelectRow:inComponent:)])
      [self.delegate pickerView:self didSelectRow:[self selectedRowInComponent:component] inComponent:component];

      Has this code been broken by an Apple update, or am I doing something wrong?

      Thanks!

      Reply


    Leave a reply

Powered by WordPress
Designed by My Mobiles