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

 更新时间:2016年12月29日 11:27:22   作者:花落的花  
这篇文章主要介绍了iOS开发中TableView类似QQ分组的折叠与展开效果,其实要做这个效果我先想到的是在tableView中再嵌套多个tableView。下面通过本文给大家分享实现思路,需要的朋友可以参考下

类似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分组的折叠与展开效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 基于Android实现仿QQ5.0侧滑

    基于Android实现仿QQ5.0侧滑

    本课程将带领大家通过自定义控件实现QQ5.0侧滑菜单,课程将循序渐进,首先实现最普通的侧滑菜单,然后引入属性动画与拖动菜单效果相结合,最终实现QQ5.0侧滑菜单效果。通过本课程大家会对侧滑菜单有更深层次的了解,通过自定义控件和属性动画打造千变万化的侧滑菜单效果
    2015-12-12
  • Android Menu详解及示例代码

    Android Menu详解及示例代码

    本文主要介绍Android Menu,这里对Android菜单(menu)进行了详细的介绍,并给出示例代码和实现效果图,有需要的小伙伴可以参考下
    2016-08-08
  • Android SDK Manager解决更新时的问题 :Failed to fetch URL...

    Android SDK Manager解决更新时的问题 :Failed to fetch URL...

    本文主要介绍解决安装使用SDK Manager更新时的问题:Failed to fetch URL...,这里提供了详细的资料及解决问题办法,有需要的小伙伴可以参考下
    2016-09-09
  • Android使用PowerImageView实现播放强大的ImageView动画效果

    Android使用PowerImageView实现播放强大的ImageView动画效果

    今天我们就来编写一个PowerImageView控件,让它既能支持ImageView控件原生的所有功能,同时还可以播放GIF图片
    2018-05-05
  • 详解Android Webview加载网页时发送HTTP头信息

    详解Android Webview加载网页时发送HTTP头信息

    这篇文章主要介绍了详解Android Webview加载网页时发送HTTP头信息的相关资料,需要的朋友可以参考下
    2017-05-05
  • Flutter实现支付宝集五福手画福字功能

    Flutter实现支付宝集五福手画福字功能

    支付宝一年一度的集五福活动又开始了,其中包含了一个功能就是手写福字,还包括撤销一笔,清除重写,保存相册等。本文将介绍如何使用Flutter实现这些功能,感兴趣的可以了解一下
    2022-01-01
  • Android开发MQTT协议的模型及通信浅析

    Android开发MQTT协议的模型及通信浅析

    这篇文章主要W为大家介绍了Android开发MQTT协议的模型及通信浅析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 详解在Flutter中如何使用dio

    详解在Flutter中如何使用dio

    应用程序开发的一个关键部分是优雅地处理网络请求。网络返回的响应可能包含意想不到的结果,为了获得良好的用户体验,您需要提前处理边缘情况。本文将详细为大家介绍Flutter如何使用dio,需要的可以参考一下
    2022-04-04
  • Android自定义webView头部进度加载效果

    Android自定义webView头部进度加载效果

    这篇文章主要介绍了Android自定义webView头部进度加载效果,小编画一条进度线,然后加载webview上面,具体实现代码大家参考下本文
    2017-11-11
  • android实现验证码按钮

    android实现验证码按钮

    这篇文章主要为大家详细介绍了android实现验证码按钮功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07

最新评论