您绝对应该使用自定义 UIButton 类。原因是 UIButton 具有您想要的其他属性,例如被 iOS 识别为 button,符合 Accessibility 作为 button,显示在故事板作为按钮类,让您的同事看到它实际上是一个按钮,具有与按钮相同/相似的界面,等等。
创建自定义按钮并不难。基本上,只需子类 UIButton 并实现 awakeFromNib 来设置内部结构和 layoutSubviews 来定位和调整所有内容。
这里是如何做到这一点的大纲......
1.创建一个 UIButton 子类 (.h)
将自定义接口添加到 header 文件中。它可能看起来像这样。
@interface MyButton : UIButton
- (void)setServiceText:(NSString *)serviceText;
- (void)setPriceText:(NSString *)priceText;
- (void)setTimeText:(NSString *)timeText;
@end
2。添加控件以保持按钮的内部结构 (.m)
三个标签和一个用作红色侧边栏的视图。从这里开始添加到 code 文件。
@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 中选择您的新按钮类。像往常一样,将按钮绑定到 视图控制器类 中的变量。当然,该变量应该属于 your 按钮类。设计就是这样!
@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 以包含您随后剪辑的所有内容,然后为按钮视图添加阴影。