CODEWITHSUNDEEP
objective-c
Abdullah Alhattami
Abdullah Alhattami

Reputation: 298

how to add title to segmentedSliderControl

I made this button as SegmentedSliderControl programmatically. (with out nib file)

it's working good but how can I add a title for each circle like this picture

thank's

Upvotes: 0

Views: 289

Answers (1)

foundry
foundry

Reputation: 31745

You can use NSString's drawInRect method.

The old version would be 

  - (CGSize)drawInRect:(CGRect)rect 
              withFont:(UIFont *)font 
         lineBreakMode:(NSLineBreakMode)lineBreakMode 
             alignment:(NSTextAlignment)alignment

Newer API (recommended going forwards)

  - (void)drawInRect:(CGRect)rect 
      withAttributes:(NSDictionary *)attrs

You will want to draw the text centered on each of the circles, which suggests using the paragraph attribute NSTextAlignmentCenter. Here is a font drawing method…

 - (void)drawText:(NSString*)string centeredOnX:(CGFloat)centerX {
        _textBoxRect.origin.x = centerX - _textBoxRect.size.width/2;
        NSMutableParagraphStyle *paragraph = [[NSMutableParagraphStyle alloc] init];
        paragraph.alignment = NSTextAlignmentCenter;
        NSDictionary* attributes = @{
                            NSParagraphStyleAttributeName : paragraph,
                                      NSFontAttributeName : self.font
                                    };
        [string drawInRect:_textBoxRect withAttributes:attributes];
    }

This presupposes you have set up a UIFont* font property and a CGRect textBoxRect property which defines a box for drawing the text in. You can set the rect's origin.y, size.width, size.height once for all of the labels. Only the origin.x needs to change as you move along the line - that is passed in to the method as centerX.

(If you want more flexibility you can use NSAttributedStrings instead of NSStrings. Then you could get the size of each string prior to drawing, to ensure your box width and height are large enough.)

Assuming you have an array of label strings, one for each circle on the line: 

  self.labelStrings = @[@"2012",@"2013",@"2014",@"2015",@"2016",@"2017"];

You would call this method thus:

[self drawText:self.labelStrings[i] centeredOnX:centerPoint.x];

If you call this at the end of the first three conditionals in your drawing loop, you will end up with text floating above or below each of the circles on your line. The position above or below the line will be determined by the value of origin.y in self.textBoxRect.

Upvotes: 2

Related Questions