Photoshop Question posted in
The official user guide can be found here.

How to achieve this layout on buttons in Storyboard? – Photoshop

I have finished my app design in Photoshop and I am currently coding the app in XCode. I have been scratching my head for several hours now how I can make the design below in a “nice” way. I thought there was a simple way to make the UISegmentedControl do as the image below shows, but it seems like you can’t add image and text to a button on a UISegmentedControl. I tried several other ways like using a label, imageview and a button that is transparent above those layers but it seems so hackish. How can I achieve this layout with the square corners and the border below?

enter image description here

Tags:

2

Answers


  1. 0

    In order to do this using a UISegmentedControl I think you’d have to create a custom UISegmentedControl class and programatically add your custom views into each segment.

    Another nicer way may be to use a UICollectionView with custom cells?

    Login or Signup to reply.
  2. 0

    As someone already mentioned, probably the best way around this (if you want to have EXACTLY what you designed), is to write your own custom control. I have done something similar a while ago, here is a part of that:

    - (id)initInsideFrame:(CGRect)frame withSegments:(NSArray*)inputArray
{
    self = [super initWithFrame:frame];

    if (self) {
        [self configureDefaultAppearanceInFrame:frame];
        [self initSegmentsFromArray:inputArray];
        [self selectSegmentAtIndex:0];
    }

    return self;
}


- (void)initSegmentsFromArray:(NSArray*)inputArray isSimpleSwitch:(bool)isSimpleSwitch
{
    [self.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];

    _segmentsNumber = (int)inputArray.count;
    _selectedSegmentIndex = 0;
    _segmentsArray = [[NSMutableArray alloc] init];
    _titlesArray = [[NSMutableArray alloc] initWithArray:inputArray];

    for (int i = 0; i < _segmentsNumber; i++) {
        CustomSegment* segment = [[CustomSegment alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width / _segmentsNumber, self.frame.size.height)];

        segment.center = CGPointMake(self.frame.size.width * (2 * i + 1) / (_segmentsNumber * 2), self.frame.size.height / 2);
        segment.index = i;

        segment.title = [[UILabel alloc] initWithFrame:segment.frame];
        segment.title.center = CGPointMake(segment.frame.size.width / 2, segment.frame.size.height / 2);
        segment.title.textAlignment = NSTextAlignmentCenter;
        [segment addSubview:segment.title];

        [segment addTapGestureRecognition];
        segment.delegate = self;

        [self addSubview:segment];
        [_segmentsArray addObject:segment];
    }

    [self refreshInterface];
}

    The CustomSegment class is only a UIView with gesture recognizers, and a delegate wchich allows recognition of tapped segment. In your case, you could put some additional graphics,labels inside.

    The sad reality is that if you want some nice custom interface, you will probably have to write it yourself.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search