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

时间:2018-02-24 11:03:30

标签: ios objective-c iphone

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

非常感谢任何建议或帮助,谢谢!

3 个答案:

答案 0 :(得分:2)

我不会使用UIButton,而是使用带有来自Xib的标签的UIView。可以在此处找到相关教程:link

然后你可以为你的UIView添加一个目标,这样当点击它时会调用一些方法(就像UIButton那样):

yourView.isUserInteractionEnabled = true
let tap = UITapGestureRecognizer(target: self, action: #selector(buttonTapped))
yourView.addGestureRecognizer(tap)

方法:

@objc func buttonTapped() {
    // do what you need on tap here
}

希望它有所帮助!如果您有任何疑问,请发表评论。

PS。我不确定,但从我看到你可能正在建立一个UITableView。是吗?你能否展示全屏设计?如果您有许多“按钮”,那么它不是一个“按钮”,而是一个表视图。

答案 1 :(得分:1)

要显示多行,请使用以下代码

button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
button.titleLabel.numberOfLines = 2; // or 0(Zero)

你需要添加UIView并向该视图添加点击手势,并像上面的图像一样设计该视图。

手势

//Create tap gustures for view
UITapGestureRecognizer *viewTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(onClickView:)];
[self.yourViewName addGestureRecognizer: viewTap];

- (void) onClickView:(UITapGestureRecognizer *)recognizer {
//Write your code
}

这是一种方法。

第二个是......

为此使用UITableViewCell并设计该单元格。

这是第二种方法。

答案 2 :(得分:1)

你绝对应该使用自定义UIButton课程。这样做的原因是UIButton具有您想要的其他属性,例如被iOS识别为按钮,符合按钮的辅助功能,显示在故事板中作为按钮类,让你的同事看到它实际上是一个按钮,具有与按钮相同/相似的界面,等等。

创建自定义按钮并不难。基本上,只需要子类UIButton并实现awakeFromNib来设置内部和layoutSubviews来定位和调整所有内容。

以下是如何操作的概述......

<强> 1。创建UIButton子类(.h)
将自定义界面添加到标题文件中。它可能看起来像这样。

@interface MyButton : UIButton

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

@end

<强> 2。添加控件以保持按钮的内部(.m)
三个标签和一个视图用作红色侧边栏。从此处开始,您可以添加代码文件。

@interface MyButton ()

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

@end

第3。添加与界面(.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通常会在控件生命周期内多次调用,因此请勿在此处添加子视图。用它来定位和调整按钮内部的大小。 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中选择新的按钮类。像往常一样,将按钮绑定到视图控制器类中的变量。当然,变量应该是你的按钮类。这就是设计的原因!

@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来完成。投影需要更多编码,因为您剪切按钮以具有圆角。您可能需要在两者之间再添加一个UIView来包含随后剪辑的所有内容,然后将阴影添加到按钮视图中。

相关问题