customize UISegmentedControl with resizableImageWithCapInsets

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: screen shot

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?

score 2 · Answer 1 · answered Apr 27 '13 at 07:18

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) {
             }
      }

i have same problem and i use this http://stackoverflow.com/questions/10562300/customizing-left-right-uisegmentedcontrol-buttons but not succeeded, than use HMSegmentedControl. — SAMIR RATHOD, Apr 27 '13 at 07:39

score 0 · Answer 2 · edited Mar 21 '20 at 20:46

0

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.

edited Mar 21 '20 at 20:46

Dharman

30,962
25
85
135

answered Oct 11 '13 at 03:27

Linh Nguyen

2,006
1
20
16

customize UISegmentedControl with resizableImageWithCapInsets

2 Answers2