如何在Storyboard中的按钮上实现这种布局？

Question

我已经在Photoshop中完成了我的应用程序设计，目前我正在使用XCode编写应用程序。我已经抓了几个小时了，现在我可以用“漂亮”的方式制作下面的设计。我认为有一种简单的方法可以使UISegmentedControl按照下面的图像显示，但似乎无法将图像和文本添加到UISegmentedControl上的按钮。我尝试了其他几种方法，比如使用标签，imageview和在这些图层上方透明的按钮，但它看起来如此hackish。如何使用方角和下方边框实现此布局？

Answer 1

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

另一个更好的方法可能是使用带自定义单元格的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类只是一个带有手势识别器的UIView，而一个委托wchich允许识别tapped segment。在您的情况下，您可以在其中添加一些额外的图形，标签。

可悲的是，如果你想要一些不错的自定义界面，你可能需要自己编写。