UISegmentedControl with Direction or Arrow theme

Question

I have implemented UISegmentedControl with Direction theme using BASequenceControl from cocoacontrols.com.

I have added BASequenceControl.h and BASequenceControl.m classes and required images from GitHub

Great. Its working fine for me..However I have a concern with the last segment section tip.

Its displaying the junk space of last segment section.

Original Screen Shot

I need like this

The code I have Implemented

        #import "BASequenceControl.h"

BASequenceControl *bASequenceControl = [[BASequenceControl alloc] init];                                    
bASequenceControl.frame = CGRectMake(10, 10, 200, 44);
[bASequenceControl addSegmentWithTitle:@"First" animated:NO];
[bASequenceControl addSegmentWithTitle:@"Second" animated:NO];

bASequenceControl.leftMargin = -22;
bASequenceControl.rightMargin = 0;
bASequenceControl.overlapWidth = 22;

[self.view addSubview:bASequenceControl];

Any help on this is appreciated.

Thanks.

Answer 1

This is a pretty simple fix. You will have to edit the BASequenceControl.m file or you can duplicate the class and rename it.

The line that is causing the problem is in drawRect: it basically draws the grey arrow across the entire background of the control. Creating that nice gradient in the empty space.

[passiveSegmentImage drawInRect:CGRectMake(-passiveSegmentImage.size.width, 0,
                                           w + 2 * passiveSegmentImage.size.width, h)];

You can change it to:

[passiveSegmentImage drawInRect:CGRectMake(0, 0,
                                           w, h)];

Now you have to tell the control that it should not be opaque. Update the initializers like this.

- (void)awakeFromNib {
    _selectedSegmentIndex = -1;
    [self setOpaque:NO];
    [super awakeFromNib];
}

- (id)init {
    if ((self = [super init])) {
        [self setOpaque:NO];
        _selectedSegmentIndex = -1;
    }
    return self;
}

This is pretty quick and dirty, you could potentially make this settable with a property. Then submit a pull request to BaseAppKit, but I'll leave that to you. Here is a gist that you can copy and paste directly in BASequenceControl.m to fix the overhang. https://gist.github.com/4632686

Edit: Make sure that you are using init as the initializer and then setFrame: (I'm not really sure why initWithFrame: wasn't overridden in the class.)

BASequenceControl *control = [[BASequenceControl alloc] init];
[control setFrame:CGRectMake(0, 0, 300, 40)];

Green background for dramatic effect

Answer 2

How about to use a mask like this :

to mask your SegmentedControl