最近在项目中遇到一个需要在tableView上加下拉列表的界面，一开始想的挺简单的，决定用两个tableView来做，在一个tableView的自定制cell中加一个tableView。但是遇到最大的一个问题就是，下拉列表要比自定制的cell长很多，导致超出父视图的界限而无法点击，所以决定直接将下拉列表加在self.view上。 倒是没多么难，但是比较麻烦，考虑的东西比较多。 Demo github地址 看一下效果图

点击管理按钮，使总体布局处于编辑状态，就用一个BOOL值来决定。这是整个页面的总线，根据他判断输入框的样式，下拉列表的显示等等。 在点击输入框的时候给下拉列表的frame赋值，能够决定下拉列表显示的位置。 在scrollView的代理方法中去动态改变下拉列表的位置，使下拉列表能够跟随输入框移动。 - (void)scrollViewDidScroll:(UIScrollView *)scrollView

好了，我们开始来做 先做一些基础的工作 给ViewController添加导航,在AppDelegate中设置 - (BOOL)application:(UIApplication * )application didFinishLaunchingWithOptions:(NSDictionary )launchOptions { UINavigationController * nav = [[UINavigationController alloc]initWithRootViewController:[ViewController new]]; self.window.rootViewController = nav; return YES; } 添加导航右边的管理按钮 //创建管理按钮 -(void)addNavigationItem{ self.rightBtn = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 44, 44)]; [self.rightBtn setTitle:@"管理" forState:UIControlStateNormal]; [self.rightBtn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal]; [self.rightBtn addTarget:self action:@selector(rightBtnClick) forControlEvents:UIControlEventTouchUpInside]; UIBarButtonItem * rightItem = [[UIBarButtonItem alloc]initWithCustomView:self.rightBtn]; self.navigationItem.rightBarButtonItem = rightItem; } 点击事件 //管理按钮点击事件 -(void)rightBtnClick创建主体tabelView //创建tableView -(void)createTableView{ self.tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, KSCREENW, KSCREENH)]; self.tableView.delegate = self; self.tableView.dataSource = self; [self.view addSubview:self.tableView]; } 这里重点说一下tabelView的代理方法中return cell的时候，不要用复用，会出现很多问题 // 这里不用复用是因为在复用的时候有点问题 CustomCell(星号) cell = [tableView cellForRowAtIndexPath:indexPath]; if (cell == nil) { cell = [[[NSBundle mainBundle]loadNibNamed:@"CustomCell" owner:nil options:nil] lastObject]; } 然后创建自定制的cell,cell里的输入框我没有用textFiled,因为他的一下点击事件并不好用，所以用label来伪制了一下，在非编辑状态下，他就是一个label的样式，在编辑状态下，是一个看似为textField的样式。 if (isEdit) { self.categoryLabel.layer.cornerRadius = 3; self.categoryLabel.layer.masksToBounds = YES; self.categoryLabel.layer.borderWidth = 1; self.categoryLabel.layer.borderColor = [UIColor lightGrayColor].CGColor; }else{ self.categoryLabel.layer.borderWidth = 0; } 然后给输入框添加点击手势，通过block回到实现点击事件 //点击 -(void)labeltap{ if (self.Block) { self.Block(); } } 创建下拉列表 //创建下拉列表 -(void)createDrawList{ // 这里先不给cell设置frame，等到我们点击输入框的时候在给他赋值 self.drawList = [[UITableView alloc]init]; self.drawList.delegate = self; self.drawList.dataSource = self; self.drawList.showsVerticalScrollIndicator = NO; self.drawList.showsHorizontalScrollIndicator = NO; self.drawList.layer.borderWidth = 1; self.drawList.layer.borderColor = [UIColor lightGrayColor].CGColor; self.drawList.layer.cornerRadius = 3; self.drawList.scrollEnabled = NO; self.drawList.separatorStyle = UITableViewCellSeparatorStyleNone; // 先把下拉列表隐藏 self.drawList.hidden = YES; [self.view addSubview:self.drawList]; } 在管理按钮点击的时候改变管理按钮的text，并刷新一下tableView,改变tableView的状态，在完成编辑的时候再将下拉列表隐藏 //管理按钮点击事件 -(void)rightBtnClick{ _isEdit = !_isEdit; if (_isEdit) { [self.rightBtn setTitle:@"完成" forState:UIControlStateNormal]; }else{ [self.rightBtn setTitle:@"管理" forState:UIControlStateNormal]; // 编辑完成隐藏下拉列表 self.drawList.hidden = YES; } // 刷新一下tableView [self.tableView reloadData]; } 关键点 这里创建cell的时候不用复用，因为在复用的时候会有很多问题； 在点击输入框的回到block中动态的去改变drawList的frame; 这里计算有点小复杂，原来的做法是这样的，但是这样做的话，在点击最后一行的cell时，下拉列表会显示不完全，你可以替换试一下，按下面的算法可使下拉列表时刻在屏幕上完全显示 CGFloat drawListY = -tableView.contentOffset.y + indexPath.rowcell.frame.size.height; 这里的cellCount，是计算出屏幕上能显示几个cell，然后（KSCREENH - drawListH）计算出下拉列表在屏幕上可活动的高度，再除以cellCount得到，每下移一个cell，下拉列表所能移动的位置。这里除是得到整数，为使位置更加准确一下，然后加上了他的模之后的值，然后可得到下拉列表的y值。再改变下拉列表的隐藏状态，使他显示出来 - (UITableViewCell )tableView:(UITableView )tableView cellForRowAtIndexPath:(NSIndexPath )indexPath{ if (tableView == self.tableView) { // 这里不用复用是因为在复用的时候有点问题 CustomCell * cell = [tableView cellForRowAtIndexPath:indexPath]; if (cell == nil) { cell = [[[NSBundle mainBundle]loadNibNamed:@"CustomCell" owner:nil options:nil] lastObject]; } cell.selectionStyle = UITableViewCellSelectionStyleNone; // 给cell传个是否处于编辑状态的值 cell.isEdit = _isEdit; cell.categoryText = _contentArr[indexPath.row]; // 处于编辑状态才去执行 if (_isEdit) { __weak typeof(self)weakSelf = self; //点击输入框的回调block cell.Block = ^{ _selectedIndexPath = indexPath; _selectedCell = cell; // 下拉框高度 CGFloat drawListH = 30 * _drawListArr.count; // 屏幕上能显示几个cell int cellCount = KSCREENH / cell.frame.size.height; // 点击输入框改变下拉列表的位置 CGFloat moveOffset = (KSCREENH - drawListH)/cellCount + (int)(KSCREENH - drawListH) % cellCount; //根据点击的是哪个cell和tableView的偏移量计算出drawList的y轴位置 CGFloat drawListY = -tableView.contentOffset.y + indexPath.rowmoveOffset; //尺寸和位置根据你的cell大小自己调整 weakSelf.drawList.frame = CGRectMake(80, drawListY, 65, 30_drawListArr.count); // 我们在点击输入框的时候才让他显示出来 weakSelf.drawList.hidden = !_isEdit; }; } return cell; }else{ // 下拉列表cell UITableViewCell * cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"drawListCell"]; cell.textLabel.text = _drawListArr[indexPath.row]; cell.textLabel.font = [UIFont systemFontOfSize:10]; cell.textLabel.textAlignment = NSTextAlignmentCenter; cell.selectionStyle = UITableViewCellSelectionStyleNone; return cell; } } 在scrollView的开始滚动代理方法中也计算drawList的y值，使他时刻跟随tableView移动 //在tableView滚动的时候动态的改变drawList的frame,使它一直跟随输入框 -(void)scrollViewDidScroll:(UIScrollView )scrollView{ if (_isEdit) { CGFloat drawListH = 30 * _drawListArr.count; // 屏幕上能显示几个cell int cellCount = KSCREENH / 80; // 点击输入框改变下拉列表的位置 CGFloat moveOffset = (KSCREENH - drawListH)/cellCount + (int)(KSCREENH - drawListH) % cellCount; //根据点击的是哪个cell和tableView的偏移量计算出drawList的y轴位置 CGFloat drawListY = -scrollView.contentOffset.y + _selectedIndexPath.rowmoveOffset; self.drawList.frame = CGRectMake(80, drawListY, 65, 30_drawListArr.count); } } 在点击下拉列表时，给输入框赋值，并将cell的内容数组contentArr中的值对应替换一下，完成之后将下拉列表隐藏 //在点击下拉列表的时候改变输入框的值，并把contentArr的值替换一下，并隐藏当前的下拉列表 -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ if (tableView == self.drawList) { _selectedCell.categoryText = _drawListArr[indexPath.row]; // 替换contentArr的值 [_contentArr replaceObjectAtIndex:_selectedIndexPath.row withObject:_drawListArr[indexPath.row]]; // 隐藏下拉列表 self.drawList.hidden = YES; } } 好，大功告成，这是我第一个发文，简书的编辑器都不怎么会使用，希望网友们给点鼓励啊，有什么不好的地方，请尽管提出来，我再做修改。 奉上本人的QQ：344810187,希望有志同道合之友多多交流。 Demo地址:https://github.com/wang6077185/DrawListDemo,顺便给留个星啊，感激不尽！！！