ios - 如何在 UIButton 的左侧和右侧放置文本

Question

我是 iOS 开发的新手，最近遇到了一个问题，我无法在按钮的两侧设置文本。我还希望在按钮中添加多行文本(如下所示)。我经历了很多答案，但没有一个能满足我的要求。

任何建议或帮助将不胜感激，谢谢!

Answer 1

您绝对应该使用自定义 UIButton类(class)。原因是 UIButton具有您想要的其他属性，例如被 iOS 识别为按钮，符合可访问性作为按钮，在 Storyboard 中显示为按钮类，让您的同事看到它实际上是一个按钮，具有相同/相似界面作为一个按钮，等等。

创建自定义按钮并不难。基本上，只是子类UIButton并实现awakeFromNib设置内部结构和layoutSubviews定位和调整一切。

以下是如何做到这一点的概述......

1.创建一个UIButton子类(.h)
将自定义接口(interface)添加到 标题 文件。它可能看起来像这样。

@interface MyButton : UIButton

- (void)setServiceText:(NSString *)serviceText;
- (void)setPriceText:(NSString *)priceText;
- (void)setTimeText:(NSString *)timeText;

@end

2. 添加控件以保持按钮的内部 (.m)
三个标签和一个用作红色侧边栏的 View 。从这里开始您添加到 代码 文件。

@interface MyButton ()

@property (strong, nonatomic) UILabel *serviceLabel;
@property (strong, nonatomic) UILabel *priceLabel;
@property (strong, nonatomic) UILabel *timeLabel;
@property (strong, nonatomic) UIView *redSideBarView;

@end

3.添加接口(interface)对应的代码(.m)
由于 UILabel当我们设置 text 时重绘自身属性，我们不需要做更多的事情来让它出现在按钮上。

- (void)setServiceText:(NSString *)serviceText {
    _serviceLabel.text = serviceText;
}

- (void)setPriceText:(NSString *)priceText {
    _priceLabel.text = priceText;
}

- (void)setTimeText:(NSString *)timeText {
    _timeLabel.text = timeText;
}

4. 实现 awakeFromNib (.m)
这个方法会在 Storyboard 实例化你的按钮时被调用，所以这里是创建你的标签和做其他只需要做一次的事情的好地方。

- (void)awakeFromNib {
    [super awakeFromNib];

    _sideBarView = [[UIView alloc] initWithFrame:CGRectZero];
    _sideBarView.backgroundColor = [UIColor redColor];
    [self addSubview:_sideBarView];

    _serviceLabel = [[UILabel alloc] initWithFrame:CGRectZero];
    _serviceLabel.font = [UIFont systemFontOfSize:18.0];
    [self addSubview:_serviceLabel];

    _priceLabel = [[UILabel alloc] initWithFrame:CGRectZero];
    _priceLabel.textColor = [UIColor greenColor];
    _priceLabel.font = [UIFont systemFontOfSize:16.0];
    _priceLabel.textAlignment = NSTextAlignmentRight;
    [self addSubview:_priceLabel];

    _timeLabel = [[UILabel alloc] initWithFrame:CGRectZero];
    _timeLabel.font = [UIFont systemFontOfSize:14.0];
    [self addSubview:_timeLabel];

    self.clipsToBounds = YES;
}

5. 添加代码来布局你的按钮 (.m)
这是自定义按钮代码的最后一部分。请注意，layoutSubviews 通常会在控件生命周期内被多次调用，因此不要在此处添加 subview 。使用它来定位和调整按钮内部的大小。 self.bounds.size代表按钮的当前大小，因此这是所有其他元素的良好引用。

- (void)layoutSubviews {
    // Layout sub-elements
    CGFloat buttonWidth = self.bounds.size.width;
    CGFloat buttonHeight = self.bounds.size.height;

    _serviceLabel.frame = CGRectMake(30.0, 2.0, buttonWidth * 0.7, buttonHeight * 0.5);
    _priceLabel.frame = CGRectMake(buttonWidth - 40, 5.0, 30.0, buttonHeight * 0.4);
    _timeLabel.frame = CGRectMake(30.0, buttonHeight * 0.5, buttonWidth * 0.7, buttonHeight * 0.4);
    _sideBarView.frame = CGRectMake(0.0, 0.0, 10.0, buttonHeight);

    self.layer.cornerRadius = 10.0;
}

6.使用它!
要使用它，您可以在 Storyboard 中创建一个常规按钮，然后在 Identity Inspector 中选择您的新按钮类。像往常一样，将按钮绑定(bind)到 中的变量。 View Controller 类 .当然，该变量应该属于您的按钮类。这就是设计!

@property (weak, nonatomic) IBOutlet MyButton *button;

现在不要忘记设置属性。

self.button.backgroundColor = [UIColor lightGrayColor];
[self.button setServiceText:@"FULL SERVICE HAIRCUT"];
[self.button setPriceText:@"$30"];
[self.button setTimeText:@"30 minutes"];

我在这里没有提到的几件事是渐变和阴影。渐变可能最好使用 CAGradientLayer添加到按钮的 View 层。投影需要更多编码，因为您将按钮剪裁为圆角。可能你需要再添加一个 UIView在两者之间包含您随后剪辑的所有内容，然后将阴影添加到按钮 View 。