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

这个小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开发中UITableView可以说是使用最广泛的控件,我们平时使用的软件中到处都可以看到它的影子,类似...
    liudhkk阅读 9,093评论 3 38
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • 冰冰的课堂,学到很多,感悟或许没有同学们那么多那么深,对我来说已经很够我去咀嚼和消化吸收了。 与自己的内在连接,听...
    Janewei阅读 197评论 0 0
  • 今又七夕欢乞巧,花样姑娘,涌上湖心岛。织女欲言眼含笑,管弦歌舞惊飞鸟。 风雨消停新月照,鲜果红烛,香气沾裙祆。纤手...
    诗人夏沐阅读 287评论 0 3
  • 闷热的季节,公交车里没有人说话。 可是,在燥动的空气里,分明流倘着车内人混杂的思绪。 只是,每一个个体还是静默,空...
    于腾腾腾腾爱耳朵阅读 268评论 0 0