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，備註：來自掘金社區
• 詳情能夠戳這裏--> 廣州蘆葦信息科技