iOS开发中TableView类似QQ分组的折叠与展开效果

类似QQ分组的样子,实现tableView的折叠与展开。其实要做这个效果我先想到的是在tableView中再嵌套多个tableView,这个想法实现起来就有点难了。

所以还是换个思路,把tableView的HeaderView用上了。给headerView加上手势,轻松解决折叠展开的问题。

直接上代码吧。

@property (nonatomic, strong) UITableView *myTableView;
@property (nonatomic, strong) NSMutableArray *listArray;  // 数据源
@property (nonatomic, strong) NSMutableArray *titlesArray;  // 分组的名称
@property (nonatomic, strong) NSMutableDictionary *openSectionDict; // 记录哪个组展开
- (void)viewDidLoad {
 [super viewDidLoad];
 // 初始化tableView
 _myTableView = [[UITableView alloc] initWithFrame:self.view.frame style:UITableViewStyleGrouped];
 self.myTableView.delegate = self;
 self.myTableView.dataSource = self;
 [self.view addSubview:_myTableView];
 self.openSectionDict = [[NSMutableDictionary alloc] init]; // 初始化字典
 [self setUpData];
}
// 给数据源赋值
- (void)setUpData {
 self.listArray = [NSMutableArray new];
 self.titlesArray = [NSMutableArray new];
 for (int i = 0; i < 5; i++) {  // 5个section
  [self.titlesArray addObject:[NSString stringWithFormat:@"section %d", i]];
  NSMutableArray *array = [NSMutableArray new];
  for (int i = 0; i < 4; i++) { // 每个section有4个row
   [array addObject:[NSString stringWithFormat:@"row %d", i]];
  }
  [self.listArray addObject:array];
 }
}
// 实现tableView的代理方法
#pragma mark - tableView dataSource
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
 return 5;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
 if ([[self.openSectionDict valueForKey:[NSString stringWithFormat:@"%ld", section]] integerValue] == 0) { //根据记录的展开状态设置row的数量
  return 0;
 } else {
  return 4;
 }
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"CELL_ID"];
 if (!cell) {
  cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"CELL_ID"];
  cell.textLabel.text = [NSString stringWithFormat:@"row %ld", indexPath.row];
 }
 return cell;
}
#pragma mark - tableView delegate
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
 return 45;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
 return 40;
}
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
 UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 40)];
 view.backgroundColor = [UIColor whiteColor];
 view.tag = KTAG + section;
 UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(20, 0, view.bounds.size.width, view.bounds.size.height)];
 label.text = self.titlesArray[section];
 [view addSubview:label];
 if ([[self.openSectionDict valueForKey:[NSString stringWithFormat:@"%ld", section]] integerValue] == 0) {
  UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, (view.bounds.size.height - 10) / 2, 7, 10)];
  imageView.image = [UIImage imageNamed:@"Triangle_right_gray"]; // 三角形小图片
  [view addSubview:imageView];
 } else {
  UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, (view.bounds.size.height - 7) / 2, 10, 7)];
  imageView.image = [UIImage imageNamed:@"Triangle_down_gray"];
  [view addSubview:imageView];
 }
 UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(collegeTaped:)];
 [view addGestureRecognizer:tap];
 return view;
}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
 return 0.1;
}
#pragma mark - sectionHeader clicked
- (void)collegeTaped:(UITapGestureRecognizer *)sender {
 NSString *key = [NSString stringWithFormat:@"%ld", sender.view.tag - KTAG];
 // 给展开标识赋值
 if ([[self.openSectionDict objectForKey:key] integerValue] == 0) {
  [self.openSectionDict setObject:@"1" forKey:key];
 } else {
  [self.openSectionDict setObject:@"0" forKey:key];
 }
 NSUInteger index = sender.view.tag;
 NSIndexSet *set = [NSIndexSet indexSetWithIndex:index - KTAG];
 [self.myTableView reloadSections:set withRowAnimation:UITableViewRowAnimationFade];
}

最后的效果:

以上所述是小编给大家介绍的iOS开发中TableView类似QQ分组的折叠与展开效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 详解iOS开发中UITableview cell 顶部空白的多种设置方法

    我知道没人会主动设置这个东西,但是大家一定都遇到过这个问题,下面总结下可能是哪些情况: 1, self.automaticallyAdjustsScrollViewInsets = NO; 这个应该是最常见而且不容易被发现的原因,起因是iOS7在Conttoller中新增了automaticallyAdjustsScrollViewInsets这个属性,当设置为YES时(默认YES),如果视图里面存在唯一一个UIScrollView或其子类View,那么它会自动设置相应的内边距,这样可以让scr

  • iOS App开发中使用及自定义UITableViewCell的教程

    UITableView用来以表格的形式显示数据.关于UITableView,我们应该注意: (1)UITableView用来显示表格的可见部分,UITableViewCell用来显示表格的一行. (2)UITableView并不负责存储表格中的数据,而是仅仅存储足够的数据使得可以画出当前可见部分. (3)UITableView从UITableViewDelegate协议获取配置信息,从UITableViewDataSource协议获得数据信息. (4)所有的UITableView实现时实际上只有

  • iOS 中使用tableView实现右滑显示选择功能

    1.在iOS8以前,我们实现tableview中滑动显示删除,置顶,更多等等的按钮时,都需要自己去实现,在iOS8中系统已经写好了,只要一个代理方法和一个类就行了 2.iOS8的协议对了一个方法,返回值是数组的tableview:editActionForRowAtIndexPath:方法,我们可以在方法内部写好几个按钮,然后放到数组中返回,那些按钮的类就是UITableviewRowAction 3.在UITableviewRowAction类.我们可以设置按钮的样式,显示文字.背景色和按钮事

  • IOS实现左右两个TableView联动效果

    一.先来看看要实现的效果图 二.小解析,可以先看看后面的! 三.实现 tableView联动 主要分两种状况 1.点击 左侧 cell 让右侧 tableView 滚到对应位置 2.滑动 右侧 tableView 让左侧 tableView 滚到对应位置 1.先实现简单的:点击 左侧 cell 让右侧 tableView 滚到对应位置 //MARK: - 点击 cell 的代理方法 - (void)tableView:(UITableView *)tableView didSelectRowAt

  • iOS UITableView展开缩放动画实例代码

    Swift - UITableView展开缩放动画 效果 源码:https://github.com/YouXianMing/Swift-Animations // // HeaderViewTapAnimationController.swift // Swift-Animations // // Created by YouXianMing on 16/8/9. // Copyright © 2016年 YouXianMing. All rights reserved. // import

  • iOS开发中TableView类似QQ分组的折叠与展开效果

    类似QQ分组的样子,实现tableView的折叠与展开.其实要做这个效果我先想到的是在tableView中再嵌套多个tableView,这个想法实现起来就有点难了. 所以还是换个思路,把tableView的HeaderView用上了.给headerView加上手势,轻松解决折叠展开的问题. 直接上代码吧. @property (nonatomic, strong) UITableView *myTableView; @property (nonatomic, strong) NSMutableA

  • iOS开发中Quartz2D控制圆形缩放和实现刷帧效果

    Quartz2D简要回顾 一.什么是Quartz2D Quartz 2D是⼀个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作: 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片(图像) 读取\生成PDF 截图\裁剪图片 自定义UI控件 二.Quartz2D在iOS开发中的价值 为了便于搭建美观的UI界面,iOS提供了UIKit框架,⾥⾯有各种各样的UI控件 UILabel:显⽰文字 UIImageView:显示图片 UIButton:同时显示图片和⽂

  • iOS 实现类似QQ分组样式的两种方式

    思路 思路很简单,对模型数据操作或则控制界面显示 先看下json部分数据 "chapterDtoList": [{ "token": null, "id": 1295, "chapterName": "第一章", "parentId": 0, "chapterLevel": 0, "attachmentUrl": "", &qu

  • IOS开发中加载大量网络图片优化方法

    IOS开发中加载大量网络图片如何优化 1.概述 在IOS下通过URL读一张网络图片并不像其他编程语言那样可以直接把图片路径放到图片路径的位置就ok,而是需要我们通过一段类似流的方式去加载网络图片,接着才能把图片放入图片路径显示.比如: -(UIImage *) getImageFromURL:(NSString *)fileURL { //NSLog(@"执行图片下载函数"); UIImage * result; NSData * data = [NSData dataWithCont

  • IOS 开发中画扇形图实例详解

    IOS 开发中画扇形图实例详解 昨天在做项目中,遇到一个需要显示扇形图的功能,网上搜了一下,发现code4app里面也没有找到我想要的那种类似的效果,没办法了,只能自己学习一下如何画了. 首先我们需要了解一个uiview的方法 -(void)drawRect:(CGRect)rect 我们知道了这个方法,就可以在自定义UIView的子类的- (void)drawRect:(CGRect)rect里面绘图了,关于drawrect的调用周期,网上也是一找一大堆,等下我会整理一下,转载一篇供你们参考.

  • iOS开发中使用UIScrollView实现无限循环的图片浏览器

    一.概述 UIKit框架中有大量的控件供开发者使用,在iOS开发中不仅可以直接使用这些控件还可以在这些控件的基础上进行扩展打造自己的控件.在这个系列中如果每个控件都介绍一遍确实没有必要,所谓授人以鱼不如授人以渔,这里会尽可能让大家明白其中的原理,找一些典型的控件进行说明,这样一来大家就可以触类旁通.今天我们主要来看一下UIScrollView的内容: UIView UIScrollView 实战--图片浏览器 二.UIView 在熟悉UIScrollView之前很有必要说一下UIView的内容.

  • IOS开发中的设计模式汇总

    iOS开发学习中,经常弄不清楚ios的开发模式,今天我们就来进行简单的总结和探讨~ (一)代理模式 应用场景:当一个类的某些功能需要由别的类来实现,但是又不确定具体会是哪个类实现. 优势:解耦合 敏捷原则:开放-封闭原则 实例:tableview的 数据源delegate,通过和protocol的配合,完成委托诉求. 列表row个数delegate 自定义的delegate (二)观察者模式 应用场景:一般为model层对,controller和view进行的通知方式,不关心谁去接收,只负责发布

  • 总结iOS开发中的断点续传与实践

    前言 断点续传概述 断点续传就是从文件上次中断的地方开始重新下载或上传数据,而不是从文件开头.(本文的断点续传仅涉及下载,上传不在讨论之内)当下载大文件的时候,如果没有实现断点续传功能,那么每次出现异常或者用户主动的暂停,都会去重头下载,这样很浪费时间.所以项目中要实现大文件下载,断点续传功能就必不可少了.当然,断点续传有一种特殊的情况,就是 iOS 应用被用户 kill 掉或者应用 crash,要实现应用重启之后的断点续传.这种特殊情况是本文要解决的问题. 断点续传原理 要实现断点续传 , 服

  • iOS开发中关键字const/static/extern、UIKIT_EXTERN的区别和用法

    一.前言 对于刚入行的新手们这些关键字可能会经常搞混淆或不清楚它们的意思和用法吧,即使在网上看了区别,但是很久不用下次又不清楚了,而且即使清楚自己的代码恐怕也很少用起来吧.通过阅读别人优秀的代码总会发现一些常用的关键字,随着自己的编程经验的积累慢慢的明白的. 二.关键字const/static/extern/UIKIT_EXTERN的释义和用法 1.const 这个单词翻译成中文是"常量"的意思.在程序中我们知道"常量"的值是不能变的,固定的.所以const关键字的

  • iOS开发中TabBar再次点击实现刷新效果

    需求 之前已经实现了自定义TabBar,如图所示: 自定义TabBar.jpeg 现在需要实现一个类似今日头条TabBar的功能 -- 如果继续点击当前TabBar的选中项,那么该界面需要刷新UITableView. 分析 既然已经自定义了TabBar,那么最简单的就是在自定义中给TabBar中需要的UITabBarButton添加事件 -- 点击就发送通知,并且将当前的索引传出去.对应的界面监听通知,拿到索引比对,如果和当前索引一致,就执行对应的操作. 实现 1. 自定义TabBar的layo

随机推荐