美文网首页iOS开发资料收集
iOS tableView Section 展开与关闭(缩放)动

iOS tableView Section 展开与关闭(缩放)动

作者: 天明天 | 来源:发表于2017-03-30 14:59 被阅读0次

这个小demo是之前项目中使用的一个需求,单独拿出来,效果还不错。主要是利用tableView自带刷新效果和scrollView的动画来实现TableView的展开与关闭功能。

TableViewCell.gif
主要逻辑与代码: 在tableView的代理方法- (UIView*)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section里面做ScrollView,变化scrollView.contentOffset来实现加减动画效果
- (UIView*)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    
    CGFloat headerHeight = 55;
    UIView* headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, headerHeight)];
    [headerView setBackgroundColor:[UIColor whiteColor]];
    // 选择头View
    UIView *selectView =[[UIView alloc] initWithFrame:CGRectMake(10, 15, SCREEN_WIDTH-20,40)];
    selectView.layer.masksToBounds=YES;
    selectView.layer.cornerRadius =3.0f;
    selectView.tag =7000+section;
    [headerView addSubview:selectView];
    if(selectSection !=section){
        selectView.layer.borderColor =RGBACOLOR(187, 187, 187, 1).CGColor;
        selectView.layer.borderWidth=1.0f;
    }else{
        
        selectView.layer.borderColor =RGBACOLOR(29, 187, 214, 1).CGColor;
        selectView.layer.borderWidth=1.0f;
    }
    // 图片背景
    UIView *imageBackView =[[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
    if(selectSection!=section){
        imageBackView.backgroundColor =RGBACOLOR(187, 187, 187, 1);
    }else{
        imageBackView.backgroundColor =RGBACOLOR(29, 187, 214, 1);
    }
    [selectView addSubview:imageBackView];
    
    // 动画scrollView
    UIScrollView *imageScroll =[[UIScrollView alloc] initWithFrame:CGRectMake(0,0,40, 40)];
    imageScroll.contentSize =CGSizeMake(40,40*2);
    imageScroll.bounces =NO;
    imageScroll.pagingEnabled =YES;
    imageScroll.tag =section+1000;
    imageScroll.backgroundColor =[UIColor clearColor];
    [selectView addSubview:imageScroll];
    
    NSArray *imageArr =@[[UIImage imageNamed:@"pluse"],[UIImage imageNamed:@"minus"]];
    
    for (NSInteger i=0; i<2; i++) {
        UIImageView *imageView =[[UIImageView alloc] initWithFrame:CGRectMake(0,i*40,40,40)];
        imageView.backgroundColor =[UIColor clearColor];
        imageView.image =imageArr[i];
        [imageScroll addSubview:imageView];
    }
    
    if(selectSection==section){
        imageScroll.contentOffset=CGPointMake(0,40);
    }else{
        
        imageScroll.contentOffset=CGPointMake(0,0);
    }
    
    UILabel* sectionLabel = [[UILabel alloc] initWithFrame:CGRectMake(55, 10, SCREEN_WIDTH - 80, 20)];
    [sectionLabel setBackgroundColor:[UIColor clearColor]];
    [sectionLabel setTextColor:RGBACOLOR(29, 187, 214, 1)];
    [sectionLabel setFont:[UIFont systemFontOfSize:17]];
    
    sectionLabel.text = [NSString stringWithFormat:@"Section %ld 号",(long)section];
    
    [selectView addSubview:sectionLabel];
    
    UITapGestureRecognizer *tapGes =[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapgesDown:)];
    
    [selectView addGestureRecognizer:tapGes];

    return headerView;
}

记录上次点击的section 比较新旧Section来刷新不同的tableViewCell 具体代码如下:

 // 刷新indexpath row的标准方式
    if(oldSection != selectSection){
        
        NSMutableArray* oldIndexPathArray = [NSMutableArray arrayWithCapacity:0];
        
        for (int i = 0; i < oldCount; i++) {
            NSIndexPath* indexPath = [NSIndexPath indexPathForRow:i inSection:oldSection];
            [oldIndexPathArray addObject:indexPath];
        }
        
        NSMutableArray* selectedIndexPathArray = [NSMutableArray arrayWithCapacity:0];
        for (int i = 0; i < selectedCount; i++) {
            NSIndexPath* indexPath = [NSIndexPath indexPathForRow:i inSection:selectSection];
            [selectedIndexPathArray addObject:indexPath];
        }
        
        NSMutableArray* rowsArray = [NSMutableArray arrayWithCapacity:0];
        [rowsArray addObjectsFromArray:oldIndexPathArray];
        [rowsArray addObjectsFromArray:selectedIndexPathArray];
        
        [_tableView reloadRowsAtIndexPaths:rowsArray withRowAnimation:UITableViewRowAnimationBottom];
        [NSTimer scheduledTimerWithTimeInterval:0.2f target:self selector:@selector(chnageScrollView) userInfo: nil repeats:NO];
    }else{
    
       // NSLog(@">>>");
        
        NSMutableArray* oldIndexPathArray = [NSMutableArray arrayWithCapacity:0];
        
        for (int i = 0; i < oldCount; i++) {
            NSIndexPath* indexPath = [NSIndexPath indexPathForRow:i inSection:oldSection];
            [oldIndexPathArray addObject:indexPath];
        }

        [_tableView reloadRowsAtIndexPaths:oldIndexPathArray withRowAnimation:UITableViewRowAnimationBottom];
        [NSTimer scheduledTimerWithTimeInterval:0.2f target:self selector:@selector(chnageScrollView) userInfo: nil repeats:NO];
    }

特别需要注意的几个点:
1.要在代理方法- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath中控制row的行高来实现展开与关闭。不要根据行数来进行控制。
2.刷新多个section的方法你要知道,很容易崩。

 NSMutableArray* oldIndexPathArray = [NSMutableArray arrayWithCapacity:0];
        for (int i = 0; i < oldCount; i++) {
            NSIndexPath* indexPath = [NSIndexPath indexPathForRow:i inSection:oldSection];
            [oldIndexPathArray addObject:indexPath];
        }
        NSMutableArray* selectedIndexPathArray = [NSMutableArray arrayWithCapacity:0];
        for (int i = 0; i < selectedCount; i++) {
            NSIndexPath* indexPath = [NSIndexPath indexPathForRow:i inSection:selectSection];
            [selectedIndexPathArray addObject:indexPath];
        }
        NSMutableArray* rowsArray = [NSMutableArray arrayWithCapacity:0];
        [rowsArray addObjectsFromArray:oldIndexPathArray];
        [rowsArray addObjectsFromArray:selectedIndexPathArray];
        
        [_tableView reloadRowsAtIndexPaths:rowsArray withRowAnimation:UITableViewRowAnimationBottom];

前提是方法

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
// 这个地方要全部加载进去 要不然单独刷新某Section时会崩溃 使用`heightForRowAtIndexPath`代理方法来控制展开与关闭
    NSArray *array =[_origionArr objectAtIndex:section];
    
    return array.count;

}

3.若果Section的下面有多处的cell的东西,可以添加代码cell.clipsToBounds = YES;
最后代码地址:我的Github

相关文章

网友评论

    本文标题:iOS tableView Section 展开与关闭(缩放)动

    本文链接:https://www.haomeiwen.com/subject/hozuottx.html