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

未命名1.gif

先说一下总体思路

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

好了，我们开始来做
先做一些基础的工作
给ViewController添加导航,在AppDelegate中设置
<pre>- (BOOL)application:(UIApplication * )application didFinishLaunchingWithOptions:(NSDictionary )launchOptions {
UINavigationController * nav = [[UINavigationController alloc]initWithRootViewController:[ViewController new]];
self.window.rootViewController = nav;
return YES;
}</pre>
添加导航右边的管理按钮
<pre>//创建管理按钮
-(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;
}
</pre>
点击事件
<pre>//管理按钮点击事件
-(void)rightBtnClick</pre>创建主体tabelView
<pre>//创建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];
}</pre>
这里重点说一下tabelView的代理方法中return cell的时候，不要用复用，会出现很多问题
<pre>// 这里不用复用是因为在复用的时候有点问题
CustomCell(星号) cell = [tableView cellForRowAtIndexPath:indexPath];
if (cell == nil) {
cell = [[[NSBundle mainBundle]loadNibNamed:@"CustomCell" owner:nil options:nil] lastObject];
}</pre>
然后创建自定制的cell,cell里的输入框我没有用textFiled,因为他的一下点击事件并不好用，所以用label来伪制了一下，在非编辑状态下，他就是一个label的样式，在编辑状态下，是一个看似为textField的样式。
<pre>
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;
}</pre>
然后给输入框添加点击手势，通过block回到实现点击事件
<pre>//点击
-(void)labeltap{
if (self.Block) {
self.Block();
}
}</pre>
创建下拉列表
<pre>//创建下拉列表
-(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];
}</pre>
在管理按钮点击的时候改变管理按钮的text，并刷新一下tableView,改变tableView的状态，在完成编辑的时候再将下拉列表隐藏
<pre>//管理按钮点击事件
-(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];
}</pre>
关键点
这里创建cell的时候不用复用，因为在复用的时候会有很多问题；
在点击输入框的回到block中动态的去改变drawList的frame;
这里计算有点小复杂，原来的做法是这样的，但是这样做的话，在点击最后一行的cell时，下拉列表会显示不完全，你可以替换试一下，按下面的算法可使下拉列表时刻在屏幕上完全显示
<pre>CGFloat drawListY = -tableView.contentOffset.y + indexPath.rowcell.frame.size.height;</pre>
这里的cellCount，是计算出屏幕上能显示几个cell，然后（KSCREENH - drawListH）计算出下拉列表在屏幕上可活动的高度，再除以cellCount得到，每下移一个cell，下拉列表所能移动的位置。这里除是得到整数，为使位置更加准确一下，然后加上了他的模之后的值，然后可得到下拉列表的y值。再改变下拉列表的隐藏状态，使他显示出来
<pre>- (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;
}
}</pre>
在scrollView的开始滚动代理方法中也计算drawList的y值，使他时刻跟随tableView移动
<pre>//在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);
}
}</pre>
在点击下拉列表时，给输入框赋值，并将cell的内容数组contentArr中的值对应替换一下，完成之后将下拉列表隐藏
<pre>//在点击下拉列表的时候改变输入框的值，并把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;
}
}</pre>
好，大功告成，这是我第一个发文，简书的编辑器都不怎么会使用，希望网友们给点鼓励啊，有什么不好的地方，请尽管提出来，我再做修改。
奉上本人的QQ：344810187,希望有志同道合之友多多交流。
Demo地址:https://github.com/wang6077185/DrawListDemo,顺便给留个星啊，感激不尽！！！