iOS开发UI篇-实现tableView的层级显示

 进来要实现一个tableView 的cell层级显示,网上找的思路都各不相同.下面说一下我的实现思路.

 根据根标题存储cell的展开状态,添加到字典中.

话不多说,直接上代码.

#define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height
#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width

@interface CellTreesController ()<UITableViewDelegate,UITableViewDataSource>

@property(nonatomic,strong)UITableView *MyTableView;

@property(nonatomic,strong)NSMutableArray *dataArray;//存放标题

@property(nonatomic,strong)NSMutableDictionary *boolDcitionary;//存放对应分区section是否展开

@end

@implementation CellTreesController

- (void)viewDidLoad {
    [super viewDidLoad];

    _MyTableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT) style:UITableViewStylePlain];
    _MyTableView.dataSource = self;
    _MyTableView.delegate = self;
    _MyTableView.tableFooterView = [UIView new];
    [self.view addSubview:_MyTableView];

    //组头数据
    for (int i = 0; i < 20; i ++) {

        NSString *titleString = [NSString stringWithFormat:@"第%d组",i + 1];
        [self.dataArray addObject:titleString];
    }

    // Do any additional setup after loading the view.
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark - dalegate dataSource

//区头视图高度
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{

    return 44;
}

//区头视图
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    UIView *headerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 44)];
    UILabel *lable = [[UILabel alloc]initWithFrame:CGRectMake(20, 7, 150, 30)];
    lable.text = self.dataArray[section];
    lable.textColor = [UIColor orangeColor];
    headerView.tag = 1000 + section;
    //添加手势->控制cell的展开
    [headerView addGestureRecognizer:[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(clickView:)]];
    [headerView addSubview:lable];
    return headerView;
}

//section
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return 20;
}

//row
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

    NSString *clickTag = [NSString stringWithFormat:@"%ld",section + 1000];

    if ([self.boolDcitionary[clickTag] integerValue] == 1) {
        return 6;

    }else{

        return 0;
    }
}

//cell
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *identifier = @"myTableViewCell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
    }

    cell.textLabel.text = [NSString stringWithFormat:@"第%ld行",indexPath.row + 1];

    return cell;

}

#pragma mark - tap手势点击事件

- (void)clickView:(UITapGestureRecognizer *)action{

    NSString *clickTag = [NSString stringWithFormat:@"%ld",action.view.tag];

     //第二个cell展开时仍然保持前一个cell的展开状态
    //状态为0 代表关闭
    if ([self.boolDcitionary[clickTag] integerValue] == 0) {

        [self.boolDcitionary setValue:@(1) forKey:clickTag];
    }else{
        //状态为1 代表展开
        [self.boolDcitionary setValue:@(0) forKey:clickTag];
    }

//    //第二个cell展开时自动关闭之前展开的cell
//    //状态为0 代表关闭
//    if ([self.boolDcitionary[clickTag] integerValue] == 0) {
//        
//        for (int i = 1000; i < (1000 + 20); i++) {
//            NSString *clickStr = [NSString stringWithFormat:@"%d",i];
//            if ([clickStr isEqualToString:clickTag]) {
//                
//                [self.boolDcitionary setValue:@(1) forKey:clickStr];
//                
//            }else{
//                
//                [self.boolDcitionary setValue:@(0) forKey:clickStr];
//            }
//            
//        }
//    }else{
//        //状态为1 代表展开
//        [self.boolDcitionary setValue:@(0) forKey:clickTag];
//    }

    //刷新tableView(不可少)
    [_MyTableView reloadData];

}

#pragma mark - 懒加载
-(NSMutableDictionary *)boolDcitionary{
    if (!_boolDcitionary) {
        _boolDcitionary = [NSMutableDictionary dictionary];
    }
    return _boolDcitionary;
}

- (NSMutableArray *)dataArray{
    if (!_dataArray) {
        _dataArray = [NSMutableArray array];
    }
    return _dataArray;
}

那么又有人问了,我的cell虽然展开了,但是都是直上直下得展开,还没有一点动画效果.下面给大家介绍一下cell展开的动画效果实现.

实现下面UITableViewDelegate的方法

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath;

写一个UITableViewCell的简单动画效果.

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{

    CATransform3D rotation;
    rotation = CATransform3DMakeRotation( (90.0*M_PI)/180, 0.0, 0.7, 0.4);
    rotation.m34 = 1.0/ -600;

    cell.layer.shadowColor = [[UIColor blackColor]CGColor];
    cell.layer.shadowOffset = CGSizeMake(10, 10);
    cell.alpha = 0;
    cell.layer.transform = rotation;

    [UIView beginAnimations:@"rotation" context:NULL];
    [UIView setAnimationDuration:0.8];
    cell.layer.transform = CATransform3DIdentity;
    cell.alpha = 1;
    cell.layer.shadowOffset = CGSizeMake(0, 0);
    [UIView commitAnimations];
}