iOS: 懸浮的條件篩選下拉框的使用

1、介紹

app中條件篩選視圖是很常用的功能，一般它搭配着tableView的表頭懸浮滾動使用，點擊按鈕時，就會彈出下拉框顯示條件，選擇一個條件后，下拉框自動隱藏。

 

2、效果圖如下

從中間點擊彈出，然后滾動tableView隨着移動，到頂部就懸浮着，下拉時仍然跟着滾動，一直滾動初始位置就停止。。。

 

 

3、實現方式

 首先：采用分組的tableView，不過類型必須選擇為Plain，這種類型本身就帶懸浮效果。如果用Group類型，就沒有懸浮效果；

//設置tableView風格
-(instancetype)initWithStyle:(UITableViewStyle)style{
    return [super initWithStyle:UITableViewStylePlain];
}

 其次：計算組頭到導航欄下邊的距離。我將tableView分2組,第一組section表頭高為260px,行高0.01,第二組section表頭高為39px，則它距離導航欄頂部260px。

 然后：給下拉框一個默認的frame，y= 260px + 39px = 299px， height=0。然后通過[UIView animation...]動畫修改frame的值即可。 

 DDHomeConditionView是添加過tableView的view

 //條件視圖(需要設置299為默認的y值)
 _conditionView = [[DDHomeConditionView alloc]initWithFrame:CGRectMake(0, 299, SCREEN_WIDTH, 0)];
 _conditionView.hidden = YES；

-(void)buttonCilicked:(UIButton *)sender{
    
    if (sender.selected) {
        [self showConditionView:sender];  //點擊顯示
    }else{
        [self hideConditionView];  //再次點擊隱藏
    }
}

//顯示條件視圖
-(void)showConditionView:(UIButton *)sender{
    
    //將所有選中的按鈕保存起來
    if (![self.buttonGroup containsObject:sender]) {
        [self.buttonGroup addObject:sender];
    }
    //顯示條件視圖
    [UIView animateWithDuration:0.2 animations:^{
        
        if (self.tableView.contentOffset.y > 260) { //tableView往上滾動距離大於260，y值為tableView的y偏移值+高
            
            _conditionView.frame = CGRectMake(0, self.tableView.contentOffset.y + 39, SCREEN_WIDTH , 160);
        }else{
            _conditionView.frame = CGRectMake(0, 299, SCREEN_WIDTH , 160);  //固定尺寸
        }
        _conditionView.hidden = NO;
    }];
}

//隱藏條件視圖
-(void)hideConditionView{
    
    //隱藏條件視圖
    [UIView animateWithDuration:0.2 animations:^{
        
        _conditionView.frame = CGRectMake(0, 260, SCREEN_WIDTH , 0);
        _conditionView.hidden = YES;
        
    } completion:^(BOOL finished) {
        
        //將所有選中的按鈕設置為未選中狀態
        for (UIButton *btn in self.buttonGroup) {
            [btn setSelected:NO];
        }
        
        //清除數組全部按鈕
        [self.buttonGroup removeAllObjects];
    }];
} 

最后：監聽tableView的滾動，其實就是ScrollView的滾動距離值scrollView.contentOffset.y，判斷它是否大於上面計算的260px；

　　　 如果大於，下拉框的y值等於scrollView.contentOffset.y + 39px，否則下拉框的y值就固定等於260px + 39px = 299px。

#pragma mark - UIScrollViewDelegate
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    if (scrollView.contentOffset.y > 260) { //tableView往上滾動距離大於260，y值為tableView的y偏移值+高
        _conditionView.frame = CGRectMake(0, scrollView.contentOffset.y + 39, SCREEN_WIDTH , 160);
    }else{
        _conditionView.frame = CGRectMake(0, 299, SCREEN_WIDTH , 160);  //固定尺寸
    }
}

本人原創，歡迎分享