iOS实现跟随tableview移动的下拉框

实现下拉框,这种需求比较常见,当然也比较简单,这里只是提供我的一个实现方法;具体需求如下所示:

具体需求是市场简介和选择按钮跟随tableview滑动,选择按钮悬浮

1,市场简介可做成表头,具体代码如下:

- (void)loadHeadView{
    
    UIView *headView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, WINDOW_WIDTH, 150)];
    headView.backgroundColor = BGROUND_COLOR;
    
    searchTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 64, WINDOW_WIDTH, WINDOW_HEIGHT-64) style:UITableViewStylePlain];
    searchTableView.delegate = self;
    searchTableView.dataSource = self;
    searchTableView.tableHeaderView = headView;//将headView设置为表头
    [self.view addSubview:searchTableView];
    
}

2,将选择按钮做成区头,tableview的style设置成 UITableViewStylePlain 这样实现悬浮效果,设置好区头并且设置区头高度

- (nullable UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
        UIView *headView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, WINDOW_WIDTH, 44)];
        headView.backgroundColor = [UIColor yellowColor];
        
        
        sortButton = [UIButton buttonWithType:UIButtonTypeCustom];
        sortButton.frame = CGRectMake(0, 0, WINDOW_WIDTH/2, 44);
        sortButton.backgroundColor = [UIColor whiteColor];
        [sortButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        [sortButton setTitle:sortName forState:0];
        sortButton.titleLabel.font = [UIFont systemFontOfSize:14];
        [sortButton addTarget:self action:@selector(sortButton) forControlEvents:UIControlEventTouchUpInside];
        [headView addSubview:sortButton];
        
        screenButton = [UIButton buttonWithType:UIButtonTypeCustom];
        screenButton.frame = CGRectMake(self.view.frame.size.width/2, 0, WINDOW_WIDTH/2, 44);
        screenButton.backgroundColor = [UIColor whiteColor];
        [screenButton setTitleColor:[TncTool colorWithHexString:@"333333"] forState:UIControlStateNormal];

        [screenButton setTitle:floorName forState:0];
        screenButton.titleLabel.font = [UIFont systemFontOfSize:14];
        [screenButton addTarget:self action:@selector(screenButton) forControlEvents:UIControlEventTouchUpInside];
        [headView addSubview:screenButton];        
        return headView;
}

3,要实现下拉框跟随区头进行移动,首先要找到区头的位置

#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    if (!sortFlag && !screenFlag) {//这两个bool值,是记录下拉框的状态 NO是合起来 YES是展开 如果是合起来就记录下区头位置 如果展开tableview是不可以进行滑动的
//根据tag值找到具体的下拉框
        UIView *view1 = [self.view viewWithTag:8004];
        UIView *view2 = [self.view viewWithTag:8003];
        if (scrollView.contentOffset.y<150) {//150是表头的高度,因为区头是要进行悬浮的 sorHeight 记录tableview滑动位置
            sorHeight = scrollView.contentOffset.y;
        }else{
            sorHeight = 150;
        }
        view2.frame = CGRectMake(0, 108+150- sorHeight, WINDOW_WIDTH, 0);

        view1.frame = CGRectMake(0, 108+150- sorHeight, WINDOW_WIDTH, 0);
    }
}

4,添加下拉框 这里使用的是两个tableview 并且一开始 这两个tableview的高度都是 0

- (void)loadSortView{
    
    sortTableview = [[UITableView alloc] initWithFrame:CGRectMake(0,108+150- sorHeight, WINDOW_WIDTH, 0) style:UITableViewStylePlain];
    sortTableview.backgroundColor = [UIColor whiteColor];
    sortTableview.dataSource = self;
    sortTableview.delegate = self;
    sortTableview.tag = 8003;
    sortTableview.scrollEnabled = NO;
    [self.view addSubview:sortTableview];
    
    floorTableview = [[UITableView alloc] initWithFrame:CGRectMake(0, 108+150- sorHeight, WINDOW_WIDTH, 0) style:UITableViewStylePlain];
    floorTableview.backgroundColor = [UIColor whiteColor];
    floorTableview.dataSource = self;
    floorTableview.delegate = self;
    floorTableview.tag = 8004;
    [self.view addSubview:floorTableview];

}

5,区头上选择按钮的实现方法 sortFlag screenFlag 这是连个bool值 记录下拉框的状态 NO是关闭 YES打开

#pragma mark - ButtonAction

- (void)sortButton{
    UIView *view1 = [self.view viewWithTag:8004];//floor
    UIView *view2 = [self.view viewWithTag:8003];
    [self.view bringSubviewToFront:view2];

    if (!sortFlag) {
        [backView removeFromSuperview];
        searchTableView.scrollEnabled = NO;
        [self addBlackViewWithY:176];
        [UIView animateWithDuration:0.3 animations:^{
            view2.frame = CGRectMake(0, 108+150- sorHeight, WINDOW_WIDTH, 176);
            view1.frame = CGRectMake(0, 108+150- sorHeight, WINDOW_WIDTH, 0);
        }];
        sortFlag = YES;
        screenFlag = NO;
    }else{
        [backView removeFromSuperview];
        searchTableView.scrollEnabled = YES;
        [UIView animateWithDuration:0.3 animations:^{
            view2.frame = CGRectMake(0, 108+150- sorHeight, WINDOW_WIDTH, 0);
        } completion:^(BOOL finished) {
        }];
        sortFlag = NO;
    }
    
}

- (void)screenButton{
    UIView *view = [self.view viewWithTag:8004];//sort
    UIView *view1 = [self.view viewWithTag:8003];
    [self.view bringSubviewToFront:view];//改变两个下拉框的层级关系
    if (!screenFlag) {
        [backView removeFromSuperview];
        searchTableView.scrollEnabled = NO;
        [self addBlackViewWithY:floorMuArray.count * 44];
        [UIView animateWithDuration:0.3 animations:^{
            view.frame = CGRectMake(0, 108+150- sorHeight, WINDOW_WIDTH, floorMuArray.count * 44);
            view1.frame = CGRectMake(0, 108+150- sorHeight, WINDOW_WIDTH, 0);
        }];
        screenFlag = YES;
        sortFlag = NO;
    }else{
        [backView removeFromSuperview];
        searchTableView.scrollEnabled = YES;
        [UIView animateWithDuration:0.3 animations:^{
            view.frame = CGRectMake(0, 108+150- sorHeight, WINDOW_WIDTH, 0);
        }];
        screenFlag = NO;
    }
}

6,下拉框出现时 出现的阴影 这个不是很完美 需要动画效果的可以自行添加

- (void)addBlackViewWithY:(CGFloat)Y{
    backView = [[UIView alloc] initWithFrame:CGRectMake(0, 108+150- sorHeight + Y, WINDOW_WIDTH, WINDOW_HEIGHT)];
    backView.clipsToBounds = YES;
    backView.backgroundColor = [UIColor blackColor];
    backView.alpha = 0.6;
    [self.view addSubview:backView];
}

这只是其中的一种解决方案,也许还会有更简单的方法.不过鄙人不才,暂时只能使用这个方式进行实现;