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];
}