当前位置： 移动技术网 > 移动技术>移动开发>Android > iOS开发中TableView类似QQ分组的折叠与展开效果

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

2019年07月24日  | 移动技术网移动技术  | 我要评论

类似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分组的折叠与展开效果，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网