customize UISegmentedControl with resizableImageWithCapInsets - ios

Question

I am customize UISegmentedControl with custom background images.
Code is like this:
UIImage *segmentSelected = [[UIImage imageNamed:#"segcontrol_sel.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 10, 0, 10)];
UIImage *segmentUnselected = [[UIImage imageNamed:#"segcontrol_uns.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 10, 0, 10)];
UIImage *segmentSelectedUnselected = [[UIImage imageNamed:#"segcontrol_sel-uns.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];
UIImage *segUnselectedSelected = [[UIImage imageNamed:#"segcontrol_uns-sel.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];
UIImage *segmentUnselectedUnselected = [[UIImage imageNamed:#"segcontrol_uns-uns.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];
[[UISegmentedControl appearance] setBackgroundImage:segmentUnselected
forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] setBackgroundImage:segmentSelected
forState:UIControlStateSelected
barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] setDividerImage:segmentUnselectedUnselected
forLeftSegmentState:UIControlStateNormal
rightSegmentState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] setDividerImage:segmentSelectedUnselected
forLeftSegmentState:UIControlStateSelected
rightSegmentState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] setDividerImage:segUnselectedSelected
forLeftSegmentState:UIControlStateNormal
rightSegmentState:UIControlStateSelected
barMetrics:UIBarMetricsDefault];
But the result is not what it is supposed to be. I am not very sure about the usage of the method: resizableImageWithCapInsets.
image is attached.
it should be like this:
but actually it is like this:
I guess I used the wrong UIEdgeInset value.
The background image is of width: 22; height: 30
and the divider image is of width: 11; height: 30
Any suggestion?

Answer 1

Try this
HMSSegmentControl
only use these two files and its selected and unselect images
HMSegmentedControl.h
HMSegmentedControl.m
.h file
#import "HMSegmentedControl.h"
HMSegmentedControl *segmentedControl;
.m file
code for viewDidLoad
segmentedControl = [[HMSegmentedControl alloc] initWithSectionImages:#[[UIImage imageNamed:#"1"], [UIImage imageNamed:#"2"], [UIImage imageNamed:#"3"]] sectionSelectedImages:#[[UIImage imageNamed:#"1-selected"], [UIImage imageNamed:#"2-selected"], [UIImage imageNamed:#"3-selected"]]]; // it create size as per your segment total image
[segmentedControl setSelectionIndicatorHeight:4.0f];
[segmentedControl setFrame:CGRectMake(0, 45, 320, 45)];
[segmentedControl setSegmentEdgeInset:UIEdgeInsetsMake(0, 0, 0, 0)];
[segmentedControl addTarget:self action:#selector(segmentedControlChangedValue:) forControlEvents:UIControlEventValueChanged];
[segmentedControl setBackgroundColor:[UIColor blueColor]];
[segmentedControl setSelectionLocation:HMSegmentedControlSelectionLocationDown];
[segmentedControl setSelectionStyle:HMSegmentedControlSelectionStyleTextWidthStrip];
[self.view addSubview:segmentedControl];
- (void)segmentedControlChangedValue:(HMSegmentedControl *)segmentedControl1 {
if (segmentedControl1.selectedSegmentIndex==0) {
}
else if (segmentedControl1.selectedSegmentIndex==1) {
}
else if(segmentedControl1.selectedSegmentIndex==2) {
}
}

Answer 2

I think that you should to use higher quality images.
I guest i used the wrong UIEdgeInset value. The background image is of width: 22; height: 30 and the divider image is of width: 11; height: 30 Any suggestion?
You should try 60 * 60 px for your images.