如何在情节提要中的按钮上实现这种布局？

Question

我已经在 Photoshop 中完成了应用程序设计，目前正在 XCode 中编写应用程序代码。我已经绞尽脑汁好几个小时了，如何以 "nice" 的方式制作下面的设计。我认为有一种简单的方法可以使 UISegmentedControl 如下图所示，但您似乎无法将图像和文本添加到 UISegmentedControl 上的按钮。我尝试了其他几种方法，比如使用标签、图像视图和在这些层上方透明的按钮，但它看起来很老套。我怎样才能用方角和下面的边框实现这种布局？

Answer 1

为了使用 UISegmentedControl 执行此操作，我认为您必须创建自定义 UISegmentedControl class 并以编程方式将自定义视图添加到每个段中。

另一种更好的方法可能是使用带有自定义单元格的 UICollectionView？

Answer 2

正如有人已经提到的那样，解决这个问题的最佳方法（如果您想完全按照您的设计），可能是编写您自己的自定义控件。我之前做过类似的事情，这里是其中的一部分：

- (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];
}

CustomSegment class 只是一个带有手势识别器的 UIView，以及一个允许识别点击段的委托。在你的情况下，你可以在里面放一些额外的图形和标签。

可悲的现实是，如果您想要一些漂亮的自定义界面，您可能不得不自己编写。

如何在情节提要中的按钮上实现这种布局？

How to achieve this layout on buttons in Storyboard?

storyboard

ios

swift

ios9