ios - Objective-C - UIButton 保持高亮/选中状态，背景颜色和字体颜色在高亮/选中时发生变化

Question

我使用界面构建器为不同的时间段创建了以下 UIButton 和为 Search 创建了一个 UIButton。我希望不同时间段的 UIButton 在用户点击它时保持选中/突出显示。背景颜色和字体颜色也会发生变化(参见图片说明)。此外，用户一次只能选择其中一个时间段。

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];

}

Answer 1

理论上，您可以执行以下操作:

1. 将所有按钮存储在一个数组中(一个实例变量)
2. 为每个按钮添加一个目标，设置一个按钮被选中并取消选择所有其他按钮。

按钮的构造函数是这样的:

-(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;
}

按钮 Action 函数可以是:

-(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 的方式，而且绝对不是一个优雅的解决方案。

这里有多个问题:

1. 如何绑定(bind)每个按钮和它所代表的值之间的数据？您可以通过使用关联对象或通过子类化 UIButton 并添加属性或通过使用标签和查找表来做到这一点。所有这些都不是很好的解决方案。

2. 这种设计是硬编码的，不灵活。有很多用于创建按钮的样板代码，您必须跟踪所有这些属性。

3. 如果需求发生变化，您一天中的每个小时都需要一个按钮，您打算怎么办？

用户 10277996 暗示，实现此布局的更好方法是使用 Collection View 。它将允许您分离关注点:

1. 一个数据源，您可以在其中决定应该包含多少个按钮(单元格)创建(以及它们应该包含什么数据)
2. 单元格的构造函数类，您可以在其中定义设计一次。
3. 一个布局类，您可以在其中定义如何布置按钮。

您应该花一两天时间真正熟悉 UICollectionView，因为它是 iOS 中最强大和有用的类之一。

这是一个帮助您入门的教程: https://www.raywenderlich.com/975-uicollectionview-tutorial-getting-started

苹果官方文档: https://developer.apple.com/library/archive/documentation/WindowsViews/Conceptual/CollectionViewPGforIOS/Introduction/Introduction.html#//apple_ref/doc/uid/TP40012334-CH1-SW1

如果您想更深入地挖掘，请查看以下资源(尽管对于解决您的特定问题不是必需的): https://www.objc.io/issues/3-views/collection-view-layouts/ https://ashfurrow.com/uicollectionview-the-complete-guide/