類似淘寶的選擇價格區間Demo

1、大致搭建UI:
這裏寫圖片描述

2、鍵盤
(1)點擊空白處退下鍵盤

@property (weak, nonatomic) IBOutlet UITextField *lowPrice;
@property (weak, nonatomic) IBOutlet UITextField *highPrice;
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [_lowPrice resignFirstResponder];
    [_highPrice resignFirstResponder];
}

(2)右上角添加”確定”按鈕
這裏關鍵就是給textField添加inputAccessoryView

// 創建“完成”按鈕
    UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake([UIScreen mainScreen].bounds.size.width - 90, 7, 80, 30)];
    button.layer.cornerRadius = 5;
    button.layer.borderWidth = 0.5;
    button.layer.borderColor = [UIColor grayColor].CGColor;
    [button setTitle:@"完成"forState:UIControlStateNormal];
    button.titleLabel.font = [UIFont systemFontOfSize:14];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [button addTarget:self action:@selector(refreshPriceInterval) forControlEvents:UIControlEventTouchUpInside];
- (void)refreshPriceInterval {
    time = 2; // 這個地方模擬拉取網絡數據(更新成對應價格區間的商品)所需的時間

    [_lowPrice resignFirstResponder];
    [_highPrice resignFirstResponder];

    // 數據大小判斷
    if((![_lowPrice.text isEqualToString:@""]) && (![_highPrice.text isEqualToString:@""])) {
        if([_lowPrice.text integerValue] > [_highPrice.text integerValue]) {
            _lowP = _highPrice.text;
            _highP = _lowPrice.text;
        }
    } else {
        _lowP = _lowPrice.text;
        _highP = _highPrice.text;
    }  
    [_activityIndicatorView startAnimating];

    [self hideActivityIndicatorView];
}

- (void)hideActivityIndicatorView {
    _myTimer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(updateTimer) userInfo:nil repeats:YES];

    [[NSRunLoop mainRunLoop] addTimer:_myTimer forMode:NSRunLoopCommonModes];
}

- (void)updateTimer {
    time--; 

    // 判斷是否拉取完數據
    if (time == 0) {
        _lowPrice.text =  _lowP ;
        _highPrice.text = _highP;
        [self.myTimer invalidate];
        [self.activityIndicatorView stopAnimating];
    }
}

// 給textField添加inputAccessoryView

【方法一】:用UIView

    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 44)];
    [view setBackgroundColor: [UIColor colorWithRed:210/250.0 green:214/250.0 blue:220/250.0 alpha:1.0]];
    [view addSubview:button];
    _lowPrice.inputAccessoryView = view;
    _highPrice.inputAccessoryView = view;

【方法二】:用UIToolBar
用barTintColor設置UIToolBar的背景色

 UIToolbar *view = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 44)];
 view.barTintColor = [UIColor colorWithRed:210/250.0 green:214/250.0 blue:220/250.0 alpha:1.0]; // 注意:是barTintColor
[view addSubview:button];
_lowPrice.inputAccessoryView = view;
_highPrice.inputAccessoryView = view;

到此,可以運行看到效果:
這裏寫圖片描述

3、添加轉動的小菊花

@property (nonatomic, strong) UIActivityIndicatorView *activityIndicatorView;
_activityIndicatorView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
_activityIndicatorView.color = [UIColor grayColor];
_activityIndicatorView.frame = self.view.bounds;
[self.view addSubview:_activityIndicatorView];

完整的Demo可以在:https://github.com/Yangchengfeng/IntervalOfPrice查看


這裏所說的“類似淘寶的選擇價格區間”並沒有置於tableView和scrollView之上來做的,所以未涉及到上面所講視圖引起的問題,待後續···

發佈了239 篇原創文章 · 獲贊 30 · 訪問量 12萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章