iOS中的二级菜单及Cell的展开收起示例

最近又做了一个项目,涉及到二级菜单及cell的展开收起,这是我所做过的第三个项目中做这个功能了,我当然不能把公司的项目界面show出来,所以我重新创建一个工程,数据都写的是固定的数据。作为总结,记录实现过程,及要注意的一些点:如进来默认选中第一行,数据优化等。

先看看我们实现的效果:

基本UI布局思路:

1.将view分为左右两部分,左,右分别是一个tableView

2.点击左边的cell时候,刷新右边的数据

需要注意及处理的点有:

1.默认进来界面显示左边选中第一行,及对应右边的数据

2.每次点击左边的cell,右边都需要刷新数据,如果每次点击左边都要请求一次数据,那么会很消耗用户的流量

3.cell的展开收起我们通过cell 的高度变化实现

在这里主要罗列需要注意的那三点,功能的全部实现我已经提交到github,需要的伙伴,可以去下载https://github.com/mumuna/AboutCell

首先说明,一般类似这样的布局,后台提供接口,左边的tableview的数据源会是一个接口,左边的tableview的每个cell对应的右边的数据也是一个接口,但是不同的cell需要传入id请求获取对应的数据,这样每点击一个左边的cell就需要请求一次右边的数据。

1.初次进入界面默认显示左边第一行及对应的右边的数据,及数据优化

(1)首先获取到左边的tableview所需的数据及第一行对应的右边的数据
(2)其它cell对应的右边的数据我们在tableView didSelectRowAtIndexPath 方法中请求获得
(3)默认选中第一行

 //默认选中第一行
  NSIndexPath *ip=[NSIndexPath indexPathForRow:0 inSection:0];
  [leftTable selectRowAtIndexPath:ip animated:YES scrollPosition:UITableViewScrollPositionBottom];

(4)在tableView didSelectRowAtIndexPath 方法中,根据点击的左边的cell,请求右边的数据。我们不能每次点击都请求一次,这样很耗费用户的流量。

我们需要把右边的数据放在可变数组里arr,全部初始化arr = [NSMutable array];,每次点击,先判断arr.count ==0 ,如果!=0 再去请求数据,然后reload data。

2.cell的弹开和收起

在效果图中可以看到点击tableview的区的headerview,对应区的row会弹开收起。

(1)我们在获取数据的时候,创建一个数组,给每个区的headerview一个标志“0”,即默认为收起

//specificaArr是效果图中左边的cell英国,对应的右边的数据源
//flagArr是左边对每个区的标识
for (int i = 0; i<specificArr.count; i++) {
    [flagArr addObject:@"0"];
          }

(2)给headerview添加一个手势,且给headerview一个tag值方便在手势响应事件中知道我们具体点击的是哪个区

    view.tag = 100+section;
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(sectionClick:)];
    [view addGestureRecognizer:tap];

(3)在手势响应事件中根据headerview的标识选择展开还是收起row,且改变标识

-(void)sectionClick:(UITapGestureRecognizer *)tap{
//根据tag值获取点击的区
  int index = tap.view.tag%100;
//创建可变数据,存储所点击的区的所有行的indexpath,tableview刷新区对应的行,重新设置行高
  NSMutableArray *indexArray = [[NSMutableArray alloc]init];
  NSArray *arr = specificArr[index];
  for (int i = 0; i<arr.count; i++) {
    NSIndexPath *path = [NSIndexPath indexPathForRow:i inSection:index];
    [indexArray addObject:path];
  }
  //展开
  if ([flagArr[index] isEqualToString:@"0"]) {
    [flagArr replaceObjectAtIndex:index withObject:@"1"];
    [specificTable reloadRowsAtIndexPaths:indexArray withRowAnimation:UITableViewRowAnimationBottom];
  }else{
    [flagArr replaceObjectAtIndex:index withObject:@"0"];
    [specificTable reloadRowsAtIndexPaths:indexArray withRowAnimation:UITableViewRowAnimationBottom];
  }
}

(4)在tableView heightForRowAtIndexPath方法中设置tableview的高度

 if ([flagArr[indexPath.section] isEqualToString:@"0"]) {
      return 0;
    }else{
      return 96;
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • iOS基于UITableView实现多层展开与收起

    本文实例为大家分享了bleView多层展开与收起的具体代码,供大家参考,具体内容如下 规则要求: tableview 有多层,类似于xcode文件目录的层级关系,每一个最开始展示的层姑且称之为根目录吧,并且,每个根目录下的层数不定. 与文件目录类似,每个目录下可以有不同层级的目录同时展开,但是同一层次中只有一层是展开的,即要展开B层次的某一层,则需要收起B层次所有其他的层级. 最底层是一个个文件,不能再展开(这里在业务逻辑上用处是:跳转到不同的页面). 想法: 整个界面是一个tableview,

  • iOS中Cell的Section展开和收起的示例代码

    整理文档,搜刮出一个iOS中Cell的Section展开和收起的示例代码,稍微整理精简一下做下分享. 首先,先上图,让大家看看效果 相信大家对于TableViewd数据的设置都熟悉,这方面就不多说的,重点的还是来看: 1.如何实现cell的Section的展开和收起的效果 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { [self.tableView des

  • iOS中的二级菜单及Cell的展开收起示例

    最近又做了一个项目,涉及到二级菜单及cell的展开收起,这是我所做过的第三个项目中做这个功能了,我当然不能把公司的项目界面show出来,所以我重新创建一个工程,数据都写的是固定的数据.作为总结,记录实现过程,及要注意的一些点:如进来默认选中第一行,数据优化等. 先看看我们实现的效果: 基本UI布局思路: 1.将view分为左右两部分,左,右分别是一个tableView 2.点击左边的cell时候,刷新右边的数据 需要注意及处理的点有: 1.默认进来界面显示左边选中第一行,及对应右边的数据 2.每

  • element实现二级菜单和顶部导航联动的示例

    目前 原本数据结构 const users = [{ id: 1, username: 'normal', password: 'normal', token: 'abcdefghijklmnopqrstuvwxyz', leftMenus: [{ title: '用户管理', key: '/user', name: 'user', icon: 'el-icon-user-solid', rights: ['view', 'edit', 'add', 'delete'] }, { title:

  • iOS中的应用启动原理以及嵌套模型开发示例详解

    程序启动原理和UIApplication   一.UIApplication 1.简单介绍 (1)UIApplication对象是应用程序的象征,一个UIApplication对象就代表一个应用程序. (2)每一个应用都有自己的UIApplication对象,而且是单例的,如果试图在程序中新建一个UIApplication对象,那么将报错提示. (3)通过[UIApplicationsharedApplication]可以获得这个单例对象 (4) 一个iOS程序启动后创建的第一个对象就是UIAp

  • iOS中设置view圆角化的四种方法示例

    前言 在最近进行项目性能优化的过程中,遇到view圆角优化的问题,有一些粗略的看法,现总结一下.分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 设置圆角目前知道的有四种方法: 1.通过shapeLayer设置 2.通过view的layer设置 3.通过BezierPath设置 4.通过贴图的方式设置 1.shapeLayer的实现 通过bezizerpath设置一个路径,加到目标视图的layer上.代码如下: // 创建一个view UIView *showView = [[U

  • iOS中仿QQ侧滑菜单功能

    UITabBarController做QQ侧滑菜单效果: 首先要了解UITabBarController的层级结构: UITabBarController加载的其它UIViewController的View都是被添加在UITransitionView上(这是一个私有API),UITransitionView在self.view的0层,UITabBar在的第一层. 所以我的思路是这样的: UITransitionView与UITabBar转移到一个新的View1上去,作为滑动的部分: 在View1

  • iOS的客户端菜单功能仿百度糯米/美团二级菜单

    我刚好最近在开发一个商城项目,实现了一个简单的控件,就和大家一起分享一下. 控件的效果就是类似百度糯米或者美团的二级菜单,我开发iOS的客户端菜单功能,直接参考了git一个项目,对应的UI效果: 其实效果看起来还不错.iOS开发完成以后,又要准备开发Android,发现对应网上的案例还是很少的,或者不是想要的效果.我想参考了别人的项目代码,也为开源项目做点贡献,准备自己开发一个Android的menu项目: 折腾了大概三个小时,终于搞定了,效果如下: 从图片不难看出,这是一个多级菜单,控制者填充

  • JS中用三种方式实现导航菜单中的二级下拉菜单

    我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片.那么如何实现导航菜单栏中的二级下拉菜单?下面小编给大家分享实现思路. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding: 0;list-style

  • 以JavaScript来实现WordPress中的二级导航菜单的方法

    导航菜单 导航菜单早已 "深入民心", 在博客上的应用日益重要且多样. 从本文开始, 我将开展几个关于 WordPress 导航菜单的话题, 讨论如何在 WordPress 上使用和加强导航菜单, 话题间有一定的承接关系, 难度也会逐步增加. WordPress 上的导航菜单一般有两种, 页面导航菜单和分类导航菜单. 可曾记得? WordPress 是可以撰写独立页面的, 页面导航菜单就是以首页和各个独立页面组成的菜单. 而分类导航菜单则是以首页和各个分类组成的菜单. 这是效果演示 既

  • IOS中safari下的select下拉菜单文字过长不换行的解决方法

    今天遇到下图这种问题,文字过长,显示不全.折腾了老半天,在网上搜了半天也找不到解决方案. 于是问了下同事,同事提到了<optgroup>,这个标签厉害. <optgroup> 标签定义选项组. optgroup 元素用于组合选项.当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易. 以上所述是小编给大家介绍的IOS中safari下的select下拉菜单文字过长不换行的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对

随机推荐