iOS初级开发学习笔记：实现按钮点击切换高亮状态

想必你们用过不少app都有一个导航栏，上面各个按钮对应显示不一样的列表。相似微信之类的底部的导航栏同样。而本例要说的是一个页面中间的列表导航。

先上效果图：

其中红色框内就是本文须要解决的问题。效果就是每当点击到对应区域，数字、文字以及底部横线变为红色，其余3个还原为默认灰色，且底部线隐藏。

首先建立按钮，由于布局以及可复用特色，因此应进行封装；

而决定用view来封装并添加手势，而不是直接封装成button。

1、封装并建立控件

一、封装：建立文件，建立三个控件（数字、文字、底部红线），并写好布局

二、封装：建立方法，并将接口（方法）暴露在.h文件中：

- (instancetype)initWithNumber:(NSString *)number andStateLabel:(NSString *)stateLabel{
    if(self = [super init]){
        self.numberLabel.text = number;
        self.stateLabel.text = stateLabel;
        [self setLayout];
    };
    return self;
}
复制代码

建立控件：在父视图view内使用此封装接口（方法）建立4个控件并赋值便可（完成按钮建立）。

2、实现点击事件

一、使用 ReactiveObjc（即RAC），建立RAC实例subject，懒加载

/** RAC传订单状态*/
@property (nonatomic, strong) RACSubject *subject;

复制代码

- (RACSubject *)subject{
    if(!_subject){
        _subject = [RACSubject subject];
    }
    return _subject;
}
复制代码

二、按钮懒加载内建立tap手势，并给4个按钮不一样tag，使用同个点击事件方法如三、中

三、在点击事件方法中，把点击的tag传到controller内：

- (void)tapGestureWithTag:(UITapGestureRecognizer *)tap{
    [self.subject sendNext:@(tap.view.tag)];
    }
复制代码

四、在controller对应的承载view的懒加载中接收信号并判断，进行点击事件处理：

//由于传过来的@()是NSNumber类型，因此接收要类型也要为NSNumber。
[_topView.subject subscribeNext:^(NSNumber *x) {
            if([x intValue] == 1){
                [MBProgressHUD showMessage:@"待发货"];
            }else if ([x intValue] == 2){
                [MBProgressHUD showMessage:@"待收货"];
            }else if ([x intValue] == 3){
                [MBProgressHUD showMessage:@"已完成"];
            }else if ([x intValue] == 4){
                [MBProgressHUD showMessage:@"售后中"];
            }
        }];
复制代码

此时点击各个按钮就会实现各自点击事件（弹出不一样内容弹窗）。

3、实现点击到的按钮的高亮状态

一、首先要在封装的view.h中暴露一个接口，来判断是否为点击选中状态，只有两种状态，因此选择建立BOOL变量：

/** 选中状态*/
@property (nonatomic, assign) BOOL isSelected;
复制代码

二、在view.m的set方法中进行不一样状态的赋值改变

- (void)setIsSelected:(BOOL)isSelected{
    _isSelected = isSelected;
    //选中时数字和文字为红色、下部红线显示
    if(isSelected == YES){
        self.numberLabel.textColor = Red_Color;
        self.stateLabel.textColor = Red_Color;
        self.lineView.hidden = NO;
    }else{
        self.lineView.hidden = YES;
        self.numberLabel.textColor = FontGray_Color;
        self.stateLabel.textColor = FontGray_Color;
    }
}
复制代码

三、在建立了4个按钮的父视图view中，的点击事件方法里，判断选中的按钮，这里用到了数组遍历：

首先建立数组并将4个按钮放到数组中：

- (NSArray *)dataArray{
    if(!_dataArray){
        _dataArray = @[self.waitView,self.receiveView,self.doneView,self.afterView];
    }
    return _dataArray;
}
复制代码

方法内添加forin循环：

- (void)tapGestureWithTag:(UITapGestureRecognizer *)tap{
    [self.subject sendNext:@(tap.view.tag)];
    
    for (ABActivityOrderStateView *stateView in self.dataArray) {
        if(stateView.tag == tap.view.tag){
            stateView.isSelected = YES;
        }else{
            stateView.isSelected = NO;
        }
    }
}
复制代码

此时就会实现点击选中的按钮为红色，其余为灰色。

做者介绍

• 李鸿：广州芦苇科技 APP 团队 iOS 开发工程师

内推信息

• 咱们正在招募小伙伴，有兴趣的小伙伴能够把简历发到 app@talkmoney.cn，备注：来自掘金社区
• 详情能够戳这里--> 广州芦苇信息科技