ObjectiveC-UIButton保持突出显示/选择,突出显示/选择时背景颜色和字体颜色更改

时间:2018-08-27 03:09:15

标签: ios objective-c uibutton

我已经使用界面构建器为不同的时隙创建了以下UIButton,为UIButton创建了Search。我希望不同时间段的UIButton在用户点击时保持选中/突出显示。并且背景颜色和字体颜色也将发生变化(请参见图片中的插图)。而且,用户一次只能选择一个时隙。

UIButton具有不同的时隙enter image description here

我要实现的按钮

enter image description here

代码

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

}

5 个答案:

答案 0 :(得分:4)

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

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

按钮动作功能可以是:

-(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. 如何在每个按钮与其代表的值之间绑定数据?您可以通过使用关联对象或通过子类化UIButton并添加属性或通过使用标签和查找表来实现。所有这些都不是很好的解决方案。

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

  3. 如果需求会发生变化并且一天中的每个小时都需要一个按钮,该怎么办?

user10277996暗示一种更好的布局方法是使用集合视图。它将使您能够分开关注点:

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

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

以下是可帮助您入门的教程: https://www.raywenderlich.com/975-uicollectionview-tutorial-getting-started

Apple的官方文档: 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/

答案 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)

您可以通过标签控件获得任何按钮并控制任何按钮。

enter image description here