[iOS] Custom Segmented Control

以下是作為UISegmentedControl客製化的紀錄。

先在storyboard裡面放一個UISegmentedControl。

修改背景顏色：

- (void)setSegmentedControl:(UISegmentedControl *)segmentedControl

{

    segmentedControl.backgroundColor = [UIColor redColor];

    

    _segmentedControl = segmentedControl;

}

將背景顏色還原，接下來要動的是兩個segment的樣式了，這邊有兩個方法可以設定：

- setDividerImage:forLeftSegmentState:rightSegmentState:barMetrics:

- setBackgroundImage:forState:barMetrics:

這兩個一定要設定，都設定完成之後才會看得到改變，不然都會用預設的樣式。

首先要注意的是第一個方法，他代表的是兩個segment中間的樣子，比方說以原始的樣式來說，他是一條垂直的藍線。這邊要設定normal-normal、normal-selected、selected-normal三種情況時的格式。

第二個方法是segment各自的樣式，這也要配合著正常、選取兩種不同狀態去做設定，而且也要和第一個方法裡面做的設定相符合。

- (void)setSegmentedControl:(UISegmentedControl *)segmentedControl

{

    [segmentedControl setDividerImage:[self underlineImageNormal] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

    [segmentedControl setDividerImage:[self underlineImageNormal] forLeftSegmentState:UIControlStateSelected rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

    [segmentedControl setDividerImage:[self underlineImageNormal] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateSelected barMetrics:UIBarMetricsDefault];

    [segmentedControl setBackgroundImage:[self underlineImageNormal] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

    [segmentedControl setBackgroundImage:[self underlineImageSelected] forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];

    

    _segmentedControl = segmentedControl;

}

順便附上我這邊使用的image的code：

- (UIImage *)underlineImageNormal

{

    return [self underlineImageForState:UIControlStateNormal];

}

- (UIImage *)underlineImageSelected

{

    return [self underlineImageForState:UIControlStateSelected];

}

- (UIImage *)underlineImageForState:(UIControlState)state

{

    UIColor *color = [UIColor clearColor];

    if (state == UIControlStateSelected) {

        color = [UIColor redColor];

    }

    UIGraphicsBeginImageContext(CGSizeMake(10, 44));

    

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetStrokeColorWithColor(context, color.CGColor);

    

    CGFloat underlineWidth = 5;

    CGFloat yPosi = 44 - underlineWidth;

    CGContextMoveToPoint(context, 0, yPosi);

    

    CGContextAddLineToPoint(context, 10, yPosi);

    

    CGContextSetLineWidth(context, underlineWidth);

    CGContextClosePath(context);

    

    CGContextDrawPath(context, kCGPathStroke);

    

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    

    image = [image resizableImageWithCapInsets:UIEdgeInsetsMake(0, image.size.width*.5f-1, 0, image.size.width*.5f-1) resizingMode:UIImageResizingModeStretch];

    return image;

}

當你在切換時，中間會有一點空格，這應該是由於我在第一個方法裡面都是設定空白畫面的緣故，於是乎divide的圖樣造就了這樣的空白，你可以試著填滿。

你如果仔細看的話會看到我的code裡面產生的圖片，是可拉伸的，可拉伸的圖片才能符合各種segment的尺寸，這點在你使用一般的圖片時也要注意。