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(, , SCREEN_WIDTH, )];

 _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 > ) { //tableView往上滚动距离大于260，y值为tableView的y偏移值+高

            _conditionView.frame = CGRectMake(, self.tableView.contentOffset.y + , SCREEN_WIDTH , );

        }else{

            _conditionView.frame = CGRectMake(, , SCREEN_WIDTH , );  //固定尺寸

        }

        _conditionView.hidden = NO;

    }];

}

//隐藏条件视图

-(void)hideConditionView{

    //隐藏条件视图

    [UIView animateWithDuration:0.2 animations:^{

        _conditionView.frame = CGRectMake(, , SCREEN_WIDTH , );

        _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 > ) { //tableView往上滚动距离大于260，y值为tableView的y偏移值+高

        _conditionView.frame = CGRectMake(, scrollView.contentOffset.y + , SCREEN_WIDTH , );

    }else{

        _conditionView.frame = CGRectMake(, , SCREEN_WIDTH , );  //固定尺寸

    }

}

本人原创，欢迎分享