实现下拉列表的一种方法

桃扇骨 2022-07-28 09:31 141阅读 0赞

如下图，这种点击可以展开详细列表的表视图，下面阐释一种简单的实现方法:

![Center][]

**实现思路如下：**

**首先，给表视图初始化N个分区，给每个分区用一个布尔值参数来判断该分区是否需要展开详细列表，初始的时候，每个分区返回的cell个数是0，即不展开。**

\-(NSInteger)numberOfSectionsInTableView:(UITableView \*)tableView\{

return\_provinceArray.count;

\}

\-(NSInteger)tableView:(UITableView \*)tableView numberOfRowsInSection:(NSInteger)section\{

NSInteger num = 0;

NSArray \*citiArray = \_citiesArray\[section\];

if (!\_isOpen\[section\]) \{

num=0;

\}else\{

num = citiArray.count;

\}

return num;

\}

**然后，给表视图返回分区头的方法中添加具有点击手势的UIView，来实现点击该分区头时展开列表的功能。分区头的高度需要设置一下，否则不显示。**

\-(UIView \*)tableView:(UITableView \*)tableView viewForHeaderInSection:(NSInteger)section\{

UIView \*view;

view = \[\[UIViewalloc\]initWithFrame:CGRectMake(0, 0, DEVICE\_WIDTH, 44)\];

UILabel \*titleLabel = \[\[UILabelalloc\]initWithFrame:CGRectMake(10, 0, 100, 44)\];

titleLabel.font = \[UIFontsystemFontOfSize:15\];

NSString\*provinceStr = \_provinceArray\[section\];

titleLabel.text = provinceStr;

\[view addSubview:titleLabel\];

view.backgroundColor = \[UIColorwhiteColor\];

view.tag = section +10;

UITapGestureRecognizer \*tap = \[\[UITapGestureRecognizeralloc\]initWithTarget:selfaction:@selector(ggShouFang:)\];

\[view addGestureRecognizer:tap\];

UIButton \*jiantouBtn = \[UIButtonbuttonWithType:UIButtonTypeCustom\];

\[jiantouBtn setFrame:CGRectMake(DEVICE\_WIDTH\-44, 0, 44, 44)\];

jiantouBtn.userInteractionEnabled = NO;

\[view addSubview:jiantouBtn\];

if ( !\_isOpen\[view.tag\-10\]) \{

\[jiantouBtn setImage:\[UIImageimageNamed:@"buy\_jiantou\_d.png"\] forState:UIControlStateNormal\];

\}else\{

\[jiantouBtn setImage:\[UIImageimageNamed:@"buy\_jiantou\_u.png"\] forState:UIControlStateNormal\];

\}

\}

return view;

\}

**最后实现分区头的点击手势的点击方法：点击时对应改变相应分区用于判断是否展开的布尔值参数。刷新tableview或者刷新对应的分区的时候即可展示下拉菜单详情。**

\-(void)ggShouFang:(UIGestureRecognizer\*)ges\{

\_isOpen\[ges.view.tag\-10\]=!\_isOpen\[ges.view.tag\-10\];

NSIndexSet \*indexSet=\[\[NSIndexSetalloc\]initWithIndex:ges.view.tag\-10\];

\[\_tabelViewreloadSections:indexSet  withRowAnimation:UITableViewRowAnimationAutomatic\];

\}

[Center]: /images/20220724/a49f5bb1fcfc434d823ce8edf85be3b6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，141人围观）

还没有评论，来说两句吧...

相关阅读

相关 Jquery 实现下拉列表三级联动

需求: (1) 根据省、获得市、 (2) 通过市，再获得到县， (3) 每个下拉框数据都由一个数组组成; 效果：初始页面 ![201901151552241

朴灿烈づ我的快乐病毒、/ 2023年10月18日 13:46/ 0 赞/ 98 阅读

相关如何实现省市关联的下拉列表

![format_png][] ![format_png 1][] 前言：在某些电商网站或者APP中，通常填写地址时，会有这样的功能：当我们选择的省份是“山东”时，则城市的

朴灿烈づ我的快乐病毒、/ 2022年12月27日 09:12/ 0 赞/ 150 阅读

相关 android--多级下拉列表菜单的实现

原文链接：[http://blog.csdn.net/minimicall/article/details/39484493][http_blog.csdn.net_minim

ゝ一纸荒年。/ 2022年08月12日 16:08/ 0 赞/ 273 阅读

相关实现下拉列表的一种方法

如下图，这种点击可以展开详细列表的表视图，下面阐释一种简单的实现方法: ![Center][] 实现思路如下：首先，给表视图初始化N个分区，给每个分区用一个布尔值参数来

桃扇骨/ 2022年07月28日 09:31/ 0 赞/ 142 阅读

相关纯CSS实现下拉列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xh

向右看齐/ 2022年07月12日 06:40/ 0 赞/ 259 阅读

相关 js实现级联下拉列表

效果图： ![20190301193935424.png][]![20190301194000250.png][] HTML: <select class="

忘是亡心i/ 2022年03月15日 09:35/ 0 赞/ 346 阅读

相关 jquery 实现的select下拉列表

效果如下: ![20200602153152578.png][] html <div class="select_item"> <

浅浅的花香味﹌/ 2021年07月26日 19:05/ 0 赞/ 415 阅读

相关下拉列表前端实现步骤

一组件脚本 Info.vue组件中引入teacher api import teacherApi from '@/api/teacher' 定义data

电玩女神/ 2021年07月25日 02:33/ 0 赞/ 532 阅读

相关下拉列表多级联动前端实现

一获取一级分类 1 组件数据定义添加在Info.vue的data中 subjectList: [], // 一级分类 subjec

川长思鸟来/ 2021年07月24日 19:04/ 0 赞/ 544 阅读

相关 js如何实现下拉控制列表

js如何实现下拉控制列表重要属性介绍： ondblclick="selectOne()"：双击事件 select标签的属性： multiple="multiple"：

小灰灰/ 2020年06月03日 12:29/ 0 赞/ 687 阅读