iOS如何封裝倒計時按鈕HLCountDownButton

iOS如何封裝倒計時按鈕HLCountDownButton

在iOS開發中，倒計時按鈕是一個常見的需求，尤其是在驗證碼發送、短信驗證等場景中。為了提高代碼的復用性和可維護性，我們可以將倒計時功能封裝成一個自定義的按鈕控件。本文將詳細介紹如何封裝一個名為HLCountDownButton的倒計時按鈕。

1. 需求分析

在開始編碼之前，我們需要明確HLCountDownButton的功能需求：

1. 倒計時功能：按鈕點擊后開始倒計時，倒計時期間按鈕不可點擊。
2. 倒計時顯示：倒計時期間，按鈕顯示剩余時間。
3. 倒計時結束：倒計時結束后，按鈕恢復初始狀態，可以再次點擊。
4. 自定義倒計時時間：允許外部設置倒計時的總時間。
5. 自定義按鈕樣式：允許外部設置按鈕的樣式，如背景顏色、文字顏色等。

2. 創建HLCountDownButton類

首先，我們創建一個繼承自UIButton的HLCountDownButton類。

#import <UIKit/UIKit.h>

@interface HLCountDownButton : UIButton

// 設置倒計時總時間（單位：秒）
@property (nonatomic, assign) NSInteger countDownTime;

// 開始倒計時
- (void)startCountDown;

// 停止倒計時
- (void)stopCountDown;

@end

3. 實現倒計時功能

接下來，我們在HLCountDownButton.m文件中實現倒計時功能。

#import "HLCountDownButton.h"

@interface HLCountDownButton ()

@property (nonatomic, strong) NSTimer *countDownTimer;
@property (nonatomic, assign) NSInteger remainingTime;

@end

@implementation HLCountDownButton

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        [self setup];
    }
    return self;
}

- (void)setup {
    self.countDownTime = 60; // 默認倒計時時間為60秒
    [self setTitle:@"獲取驗證碼" forState:UIControlStateNormal];
    [self setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    self.backgroundColor = [UIColor blueColor];
    self.layer.cornerRadius = 5.0;
    [self addTarget:self action:@selector(buttonClicked) forControlEvents:UIControlEventTouchUpInside];
}

- (void)buttonClicked {
    [self startCountDown];
}

- (void)startCountDown {
    self.remainingTime = self.countDownTime;
    self.enabled = NO;
    self.countDownTimer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(updateCountDown) userInfo:nil repeats:YES];
}

- (void)updateCountDown {
    if (self.remainingTime > 0) {
        [self setTitle:[NSString stringWithFormat:@"%ld秒后重試", (long)self.remainingTime] forState:UIControlStateNormal];
        self.remainingTime--;
    } else {
        [self stopCountDown];
    }
}

- (void)stopCountDown {
    [self.countDownTimer invalidate];
    self.countDownTimer = nil;
    self.enabled = YES;
    [self setTitle:@"獲取驗證碼" forState:UIControlStateNormal];
}

- (void)dealloc {
    [self.countDownTimer invalidate];
    self.countDownTimer = nil;
}

@end

代碼解析

1. 初始化方法：在initWithFrame:方法中調用setup方法進行初始化設置。
2. setup方法：設置默認的倒計時時間、按鈕樣式，并添加點擊事件。
3. buttonClicked方法：按鈕點擊后調用startCountDown方法開始倒計時。
4. startCountDown方法：設置剩余時間，禁用按鈕，并啟動定時器。
5. updateCountDown方法：定時器每秒調用一次，更新按鈕標題顯示剩余時間。
6. stopCountDown方法：停止定時器，恢復按鈕狀態。
7. dealloc方法：在對象銷毀時停止定時器，防止內存泄漏。

4. 使用HLCountDownButton

在需要使用倒計時按鈕的地方，我們可以直接創建HLCountDownButton實例并添加到視圖中。

#import "ViewController.h"
#import "HLCountDownButton.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    HLCountDownButton *countDownButton = [[HLCountDownButton alloc] initWithFrame:CGRectMake(100, 100, 200, 40)];
    countDownButton.countDownTime = 120; // 設置倒計時時間為120秒
    [self.view addSubview:countDownButton];
}

@end

代碼解析

1. 創建HLCountDownButton實例：在viewDidLoad方法中創建HLCountDownButton實例，并設置倒計時時間為120秒。
2. 添加到視圖：將按鈕添加到當前視圖控制器的視圖中。

5. 自定義按鈕樣式

HLCountDownButton繼承自UIButton，因此我們可以通過UIButton的屬性來自定義按鈕的樣式。例如，設置按鈕的背景顏色、文字顏色、圓角等。

countDownButton.backgroundColor = [UIColor redColor];
[countDownButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
countDownButton.layer.cornerRadius = 10.0;

6. 總結

通過封裝HLCountDownButton，我們可以輕松地在iOS應用中實現倒計時按鈕功能。該控件具有良好的復用性和可擴展性，開發者可以根據實際需求進一步定制按鈕的樣式和行為。

優點

• 代碼復用：將倒計時功能封裝成獨立的控件，可以在多個項目中復用。
• 易于維護：倒計時邏輯集中在HLCountDownButton類中，便于維護和修改。
• 靈活性：允許外部設置倒計時時間和按鈕樣式，適應不同的業務需求。

擴展

在實際開發中，我們還可以進一步擴展HLCountDownButton的功能，例如：

• 支持倒計時結束回調：在倒計時結束時執行自定義操作。
• 支持暫停和恢復倒計時：在特定情況下暫停倒計時，稍后恢復。
• 支持多種倒計時格式：例如顯示“分:秒”格式的倒計時。

通過不斷優化和擴展，HLCountDownButton可以成為一個功能強大且靈活的倒計時按鈕控件。