Question

如何收起和展开UITableView Sections

Answer 1

UITableView中section的展开和收起

首先上效果图：全部在iPhone4S上面真机测试过的。从左至右一次是 收起状态 展开状态

思路：在写代码的时候我们可以很容易的写出cell和setion。但是系统并没有提供记录section状态的方法或是属性。我们需要点击某个section的时候收起和弹出cell。怎么做呢？只有是人为的给section增加一个标记了，每个section一个标记，section被点击了就把这个状态标记取反，根据这个标记来展开和收起cell（其实就是设置cell的高度，高度为0了cell就收起了，高度大于0了cell就弹出了，在具体设置cell的高度的时候也是这么处理的）。
下面就直接贴代码了。

ViewController.m

[objc] view plain copy
#import "ViewController.h"
#import "SectionViewController.h"

@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>
@property (nonatomic,strong)UITableView *tableView;

@property (nonatomic,strong)NSMutableArray *sectionArray;
@property (nonatomic,strong)NSMutableArray *flagArray;

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
[self makeData];
_tableView = [[UITableView alloc] initWithFrame:self.view.frame style:UITableViewStyleGrouped];
_tableView.delegate = self;
_tableView.dataSource = self;
[self.view addSubview:_tableView];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

/**
* 处理数据 _sectionArray里面存储数组
*/
- (void)makeData{
_sectionArray = [NSMutableArray array];
_flagArray = [NSMutableArray array];
NSInteger num = 6;
for (int i = 0; i < num; i ++) {
NSMutableArray *rowArray = [NSMutableArray array];
for (int j = 0; j < arc4random()%20 + 1; j ++) {
[rowArray addObject:[NSString stringWithFormat:@"%d",j]];
}
[_sectionArray addObject:rowArray];
[_flagArray addObject:@"0"];
}
}
//设置组数
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return _sectionArray.count;
}
//设置行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
NSArray *arr = _sectionArray[section];
return arr.count;
}
//组头高度
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
return 44;
}
//cell的高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
if ([_flagArray[indexPath.section] isEqualToString:@"0"])
return 0;
else
return 44;
}
//组头
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
UILabel *sectionLabel = [[UILabel alloc] init];
sectionLabel.frame = CGRectMake(0, 0, self.view.frame.size.width, 444);
sectionLabel.textColor = [UIColor orangeColor];
sectionLabel.text = [NSString stringWithFormat:@"组%d",section];
sectionLabel.textAlignment = NSTextAlignmentCenter;
sectionLabel.tag = 100 + section;
sectionLabel.userInteractionEnabled = YES;
sectionLabel.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"itembg.png"]];

UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(sectionClick:)];
[sectionLabel addGestureRecognizer:tap];

return sectionLabel;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identify = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identify];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:identify];
}
cell.textLabel.text= [NSString stringWithFormat:@"第%d组的第%d个cell",indexPath.section,indexPath.row];
cell.clipsToBounds = YES;<span style="font-size:18px;color:#ff0000;"><strong>//这句话很重要 不信你就试试</strong></span>
return cell;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
SectionViewController *sVC = [[SectionViewController alloc] init];
sVC.rowLabelText = [NSString stringWithFormat:@"第%d组的第%d个cell",indexPath.section,indexPath.row];
[self presentViewController:sVC animated:YES completion:nil];
}
- (void)sectionClick:(UITapGestureRecognizer *)tap{
int index = tap.view.tag % 100;

NSMutableArray *indexArray = [[NSMutableArray alloc]init];
NSArray *arr = _sectionArray[index];
for (int i = 0; i < arr.count; i ++) {
NSIndexPath *path = [NSIndexPath indexPathForRow:i inSection:index];
[indexArray addObject:path];
}
//展开
if ([_flagArray[index] isEqualToString:@"0"]) {
_flagArray[index] = @"1";
[_tableView reloadRowsAtIndexPaths:indexArray withRowAnimation:UITableViewRowAnimationBottom]; //使用下面注释的方法就 注释掉这一句
} else { //收起
_flagArray[index] = @"0";
[_tableView reloadRowsAtIndexPaths:indexArray withRowAnimation:UITableViewRowAnimationTop]; //使用下面注释的方法就 注释掉这一句
}
// NSRange range = NSMakeRange(index, 1);
// NSIndexSet *sectionToReload = [NSIndexSet indexSetWithIndexesInRange:range];
// [_tableView reloadSections:sectionToReload withRowAnimation:UITableViewRowAnimationAutomatic];
}
@end

SectionViewController.m
这里面的Label的显示是用xib拉的

[objc] view plain copy
- (void)viewDidLoad {
[super viewDidLoad];
//设置显示
self.rowLabel.text = self.rowLabelText;
// Do any additional setup after loading the view from its nib.
}
//返回上一页
- (IBAction)backButton:(id)sender {
[self dismissViewControllerAnimated:YES completion:nil];
}

SectionViewController.h
增加一个属性

[objc] view plain copy
@property (nonatomic,copy)NSString *rowLabelText;

这次做距离上一次实现这个功能的时候有段时间了，导致在调试的过程中出现了下面的问题：左图中的问题。有图是第二个VC。

每个section下面的cell都出来了，而且还是堆叠在一起。有问题就要解决，首先查看相关的头文件，看看里面有没有上面属性或是方法可以解决这个问题的。还好很快就找到了。

[objc] view plain copy
@property(nonatomic) BOOL clipsToBounds; // When YES, content and subviews are clipped to the bounds of the view. Default is NO.
看了这句话，有个关键词clipped是夹住的意思，默认是NO。在想想以前在处理图片的时候，需要设置图片圆角的时候也有这么一个属性。

到底能不能起作用呢？试试就知道了。

[objc] view plain copy
cell.clipsToBounds = YES;
果然可以解决上面的问题了。

关于收起和弹出，在代码中，我是列出了两种解决问题的方法。两种方法的优劣还需要在以后的使用中多多比较。