我已经使用界面构建器为不同的时隙创建了以下UIButton
,为UIButton
创建了Search
。我希望不同时间段的UIButton在用户点击时保持选中/突出显示。并且背景颜色和字体颜色也将发生变化(请参见图片中的插图)。而且,用户一次只能选择一个时隙。
我要实现的按钮
代码
#import "Search.h"
#import <QuartzCore/QuartzCore.h>
@interface Search(){
}
@end
@implementation Search
@synthesize btn1;
@synthesize btn2;
@synthesize btn3;
@synthesize btn4;
@synthesize btn5;
@synthesize btn6;
@synthesize btn7;
@synthesize btn8;
@synthesize btn9;
@synthesize btnSearch;
- (void)viewDidLoad
{
[super viewDidLoad];
_borderBox.layer.shadowRadius = 5;
_borderBox.layer.shadowColor = [UIColor colorWithRed:211.f/255.f green:211.f/255.f blue:211.f/255.f alpha:1.f].CGColor;
_borderBox.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
_borderBox.layer.shadowOpacity = 0.9f;
_borderBox.layer.masksToBounds = NO;
btn1.layer.borderColor = [UIColor lightGrayColor].CGColor;
btn1.layer.borderWidth =1.0f;
btn2.layer.borderColor = [UIColor lightGrayColor].CGColor;
btn2.layer.borderWidth =1.0f;
btn3.layer.borderColor = [UIColor lightGrayColor].CGColor;
btn3.layer.borderWidth =1.0f;
btn4.layer.borderColor = [UIColor lightGrayColor].CGColor;
btn4.layer.borderWidth =1.0f;
btn5.layer.borderColor = [UIColor lightGrayColor].CGColor;
btn5.layer.borderWidth =1.0f;
btn6.layer.borderColor = [UIColor lightGrayColor].CGColor;
btn6.layer.borderWidth =1.0f;
btn7.layer.borderColor = [UIColor lightGrayColor].CGColor;
btn7.layer.borderWidth =1.0f;
btn8.layer.borderColor = [UIColor lightGrayColor].CGColor;
btn8.layer.borderWidth =1.0f;
btn9.layer.borderColor = [UIColor lightGrayColor].CGColor;
btn9.layer.borderWidth =1.0f;
}
-(void)viewWillAppear:(BOOL)animated{
}
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
}
- (void)viewDidDisappear:(BOOL)animated
{
[super viewDidDisappear:animated];
}
+(void)makeButtonColored:(UIButton*)button color1:(UIColor*) color
{
CALayer *layer = button.layer;
layer.cornerRadius = 8.0f;
layer.masksToBounds = YES;
layer.borderWidth = 4.0f;
layer.opacity = .3;//
layer.borderColor = [UIColor colorWithWhite:0.4f alpha:0.2f].CGColor;
CAGradientLayer *colorLayer = [CAGradientLayer layer];
colorLayer.cornerRadius = 8.0f;
colorLayer.frame = button.layer.bounds;
//set gradient colors
colorLayer.colors = [NSArray arrayWithObjects:
(id) color.CGColor,
(id) color.CGColor,
nil];
//set gradient locations
colorLayer.locations = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0f],
[NSNumber numberWithFloat:1.0f],
nil];
[button.layer addSublayer:colorLayer];
}
答案 0 :(得分:4)
理论上,您可以执行以下操作:
按钮的构造函数将如下所示:
-(UIButton *)newButtonWithTitle:(NSString *)title fontSize:(NSInteger)fontSize {
UIColor *selectedButtonColor = [UIColor colorWithRed:1.0 green:0.2 blue:0.2
alpha:0.5];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setTitle:title forState:UIControlStateNormal];
[button setTitleColor:selectedButtonColor forState:UIControlStateHighlighted];
[button setTitleColor:selectedButtonColor forState:UIControlStateSelected];
button.titleLabel.font = [UIFont systemFontOfSize:16 weight:UIFontWeightRegular];
button.layer.borderColor = [UIColor lightGrayColor].CGColor;
button.layer.borderWidth = 1.0;
[button addTarget:self action:@selector(scheduleButtonAction:) forControlEvents:UIControlEventTouchUpInside];
return button;
}
按钮动作功能可以是:
-(void)scheduleButtonAction:(UIButton *)button {
button.selected = YES;
[self.buttons enumerateObjectsUsingBlock:^(UIButton *aButton, NSUInteger idx, BOOL * _Nonnull stop) {
if (![aButton isEqual:button]) {
aButton.selected = NO;
}
}];
}
但是我不会这样。这种解决方案的问题在于,尽管有可能,但这不是Apple的方式,而且绝对不是一个优雅的解决方案。
这里有多个问题:
如何在每个按钮与其代表的值之间绑定数据?您可以通过使用关联对象或通过子类化UIButton并添加属性或通过使用标签和查找表来实现。所有这些都不是很好的解决方案。
此设计是硬编码且不灵活。创建按钮有很多样板代码,您必须跟踪所有这些属性。
如果需求会发生变化并且一天中的每个小时都需要一个按钮,该怎么办?
user10277996暗示一种更好的布局方法是使用集合视图。它将使您能够分开关注点:
您应该花一两天的时间才能真正熟悉UICollectionView,因为它是iOS中功能最强大,最有用的类之一。
以下是可帮助您入门的教程: https://www.raywenderlich.com/975-uicollectionview-tutorial-getting-started
如果您想更深入地研究,请查看以下资源(尽管对于解决特定问题不是必需的): https://www.objc.io/issues/3-views/collection-view-layouts/ https://ashfurrow.com/uicollectionview-the-complete-guide/
答案 1 :(得分:2)
我能够实现您正在使用的功能,下面是我的工作方式。
我通过情节提要创建了设计,并将9个按钮的所有action方法都连接到一个Selector方法,在具有help sender参数的action方法内部,我们可以获得选定按钮的引用并使用它。
- (IBAction)btnPressed:(UIButton*)sender {
/* Below for loop works as a reset for setting the default colour of button and to not select the same one twice*/
for (UIButton* button in buttons) {
[button setSelected:NO];
[button setBackgroundColor:[UIColor whiteColor]];
[button setUserInteractionEnabled:true];
// [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateSelected];
}
NSInteger tag = sender.tag; // Here we get the sender tag, which we can use for our needs. Also we can directly use the sender and get the title or whatsoever needed.
/*Now below line works as a toggle for the button where multiple buttons can't be selected at the same time.*/
sender.selected = ! sender.selected;
if(sender.selected)
{
/* Here we set the color for the button and handle the selected function*/
[sender setSelected:YES];
[sender setUserInteractionEnabled:false];
[sender setBackgroundColor:[UIColor magentaColor]];
}
}
您还可以使用“ sender.Layer”属性为按钮添加自定义图层。
下面添加了整个代码,
所有按钮的动作都需要连接到一个选择器方法, -(IBAction)btnPressed:(UIButton *)sender;
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *mainViewOL;
@property (weak, nonatomic) IBOutlet UIButton *btn1;
@property (weak, nonatomic) IBOutlet UIButton *btn2;
@property (weak, nonatomic) IBOutlet UIButton *btn3;
@property (weak, nonatomic) IBOutlet UIButton *btn4;
@property (weak, nonatomic) IBOutlet UIButton *btn5;
@property (weak, nonatomic) IBOutlet UIButton *btn6;
@property (weak, nonatomic) IBOutlet UIButton *btn7;
@property (weak, nonatomic) IBOutlet UIButton *btn8;
@property (weak, nonatomic) IBOutlet UIButton *btn9;
@end
@implementation ViewController
NSArray* buttons;
- (void)viewDidLoad {
[super viewDidLoad];
buttons = [NSArray arrayWithObjects:_btn1, _btn2, _btn3,_btn4,_btn5,_btn6,_btn7,_btn8,_btn9,nil];
self.mainViewOL.layer.shadowRadius = 5;
self.mainViewOL.layer.shadowColor = [UIColor colorWithRed:211.f/255.f green:211.f/255.f blue:211.f/255.f alpha:1.f].CGColor;
self.mainViewOL.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
self.mainViewOL.layer.shadowOpacity = 0.9f;
self.mainViewOL.layer.masksToBounds = NO;
/* I Have added the 9 button's in an array and used it to reduce the lines of code and for easy understanding as well*/
for (UIButton* button in buttons) {
button.layer.borderColor = [UIColor lightGrayColor].CGColor;
button.layer.borderWidth =1.0f;
}
}
- (IBAction)btnPressed:(UIButton*)sender {
for (UIButton* button in buttons) {
[button setSelected:NO];
[button setBackgroundColor:[UIColor whiteColor]];
[button setUserInteractionEnabled:true];
// [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; //Based on your needs and colour variant you cant add properties to the button for different control states.
[button setTitleColor:[UIColor blackColor] forState:UIControlStateSelected];
}
NSInteger tag = sender.tag;
sender.selected = ! sender.selected;
if(sender.selected)
{
[sender setSelected:YES];
[sender setUserInteractionEnabled:false];
[sender setBackgroundColor:[UIColor purpleColor]];
sender.backgroundColor = [UIColor magentaColor];
}
}
@end
以及最终结果
忽略按钮选择的延迟,这是由视频到gif转换引起的。
希望这会有所帮助。
答案 2 :(得分:0)
尝试使用自定义类型按钮。
UIButton *customButton = [UIButton buttonWithType:UIButtonTypeCustom];
或在Interface Builder中设置此属性。
答案 3 :(得分:0)
您可以使用帮助UICollectionView准备屏幕。
使用UICollectionViewCell创建自定义类,并覆盖下面的属性。
override var isSelected: Bool `{
willSet{
super.isSelected = newValue
// put button background color value as per selected state`
答案 4 :(得分:0)