点击单个cell高度变化的动画效果

简介:

点击单个cell高度变化的动画效果

 

效果

 

说明

1. 点击单个cell的时候,其展开与缩放动画实现起来是很麻烦的,做过相关需求的朋友一定知道其中的坑

2. 本例子只是提供了一个解决方案,为了简化操作,将cell高度封装到了Model当中

 

源码

https://github.com/YouXianMing/TableViewTapAnimation



//
//  Model.h
//  TableViewTapAnimation
//
//  Created by YouXianMing on 15/9/18.
//  Copyright © 2015年 YouXianMing. All rights reserved.
//

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface Model : NSObject

@property (nonatomic) CGFloat  normalHeight;
@property (nonatomic) CGFloat  expendHeight;
@property (nonatomic) BOOL     expend;

+ (instancetype)ModelWithNormalHeight:(CGFloat)normalHeight expendHeight:(CGFloat)expendHeight expend:(BOOL)expend;

@end


//
//  Model.m
//  TableViewTapAnimation
//
//  Created by YouXianMing on 15/9/18.
//  Copyright © 2015年 YouXianMing. All rights reserved.
//

#import "Model.h"

@implementation Model

+ (instancetype)ModelWithNormalHeight:(CGFloat)normalHeight expendHeight:(CGFloat)expendHeight expend:(BOOL)expend {

    Model *model = [[Model alloc] init];
    
    model.normalHeight = normalHeight;
    model.expendHeight = expendHeight;
    model.expend       = expend;
    
    return model;
}

@end


//
//  InfoCell.h
//  TableViewTapAnimation
//
//  Created by YouXianMing on 15/9/18.
//  Copyright © 2015年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "Model.h"

@interface InfoCell : UITableViewCell

@property (nonatomic, weak) NSIndexPath  *indexPath;
@property (nonatomic, weak) UITableView  *tableView;

- (void)loadData:(id)data;

@end


//
//  InfoCell.m
//  TableViewTapAnimation
//
//  Created by YouXianMing on 15/9/18.
//  Copyright © 2015年 YouXianMing. All rights reserved.
//

#import "InfoCell.h"

@interface InfoCell ()

@property (nonatomic, strong) UIButton *button;
@property (nonatomic, weak)   Model    *model;
@property (nonatomic, strong) UIView   *lineView;
@property (nonatomic, strong) UILabel  *infoLabel;

@end

@implementation InfoCell

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        
        [self setup];
    }
    
    return self;
}

- (void)setup {
    
    self.selectionStyle = UITableViewCellSelectionStyleNone;
    
    self.button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 320, 100)];
    [self.button addTarget:self action:@selector(buttonEvent) forControlEvents:UIControlEventTouchUpInside];
    [self addSubview:self.button];
    
    self.lineView                 = [[UIView alloc] initWithFrame:CGRectMake(0, 49.5, 320, 0.5f)];
    self.lineView.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:0.5f];
    [self addSubview:self.lineView];
    
    self.infoLabel      = [[UILabel alloc] initWithFrame:CGRectMake(10, 0, 100, 50)];
    self.infoLabel.text = @"Demo";
    [self addSubview:self.infoLabel];
}

- (void)buttonEvent {
    
    if (self.model.expend == YES) {
        
        self.model.expend = NO;
        [self.tableView beginUpdates];
        [self.tableView endUpdates];
        
        [self normalStateWithAnimated:YES];
        
    } else {
        
        self.model.expend = YES;
        [self.tableView beginUpdates];
        [self.tableView endUpdates];
    
        [self expendStateWithAnimated:YES];
    }
}

- (void)loadData:(id)data {
    
    self.model = data;
    
    if (self.model.expend == YES) {
        
        self.lineView.frame  = CGRectMake(0, 99.5f, 320, 0.5f);
        self.infoLabel.frame = CGRectMake(30, 0, 100, 50);
        
    } else {
    
        self.lineView.frame  = CGRectMake(0, 49.5, 320, 0.5f);
        self.infoLabel.frame = CGRectMake(10, 0, 100, 50);
    }
}

- (void)normalStateWithAnimated:(BOOL)animated {
    
    if (animated == YES) {
        
        [UIView animateWithDuration:0.35f animations:^{
            
            self.lineView.frame  = CGRectMake(0, 49.5, 320, 0.5f);
            self.infoLabel.frame = CGRectMake(10, 0, 100, 50);
        }];
        
    } else {
    
        self.lineView.frame  = CGRectMake(0, 49.5, 320, 0.5f);
        self.infoLabel.frame = CGRectMake(10, 0, 100, 50);
    }
}

- (void)expendStateWithAnimated:(BOOL)animated {
    
    if (animated == YES) {
        
        [UIView animateWithDuration:0.35f animations:^{
            
            self.lineView.frame  = CGRectMake(0, 99.5f, 320, 0.5f);
            self.infoLabel.frame = CGRectMake(30, 0, 100, 50);
        }];
        
    } else {
        
        self.lineView.frame  = CGRectMake(0, 99.5f, 320, 0.5f);
        self.infoLabel.frame = CGRectMake(30, 0, 100, 50);
    }
}

@end


//
//  ViewController.m
//  TableViewTapAnimation
//
//  Created by YouXianMing on 15/9/18.
//  Copyright © 2015年 YouXianMing. All rights reserved.
//

#import "ViewController.h"
#import "InfoCell.h"
#import "Model.h"

#define INFO_CELL @"INFO_CELL"

@interface ViewController () <UITableViewDelegate, UITableViewDataSource>

@property (nonatomic, strong) NSMutableArray *datasArray;
@property (nonatomic, strong) UITableView    *tableView;

@end

@implementation ViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    self.datasArray = [NSMutableArray array];
    [self.datasArray addObject:[Model ModelWithNormalHeight:50.f expendHeight:100.f expend:NO]];
    [self.datasArray addObject:[Model ModelWithNormalHeight:50.f expendHeight:100.f expend:YES]];
    [self.datasArray addObject:[Model ModelWithNormalHeight:50.f expendHeight:100.f expend:YES]];
    [self.datasArray addObject:[Model ModelWithNormalHeight:50.f expendHeight:100.f expend:YES]];
    [self.datasArray addObject:[Model ModelWithNormalHeight:50.f expendHeight:100.f expend:YES]];
    [self.datasArray addObject:[Model ModelWithNormalHeight:50.f expendHeight:100.f expend:YES]];
    
    self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
    self.tableView.delegate       = self;
    self.tableView.dataSource     = self;
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    [self.tableView registerClass:[InfoCell class] forCellReuseIdentifier:INFO_CELL];
    [self.view addSubview:self.tableView];
}

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

    return _datasArray.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    InfoCell *cell = [tableView dequeueReusableCellWithIdentifier:INFO_CELL];
    cell.indexPath = indexPath;
    cell.tableView = tableView;
    
    [cell loadData:_datasArray[indexPath.row]];
    
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {

    Model *model = _datasArray[indexPath.row];
    
    if (model.expend) {
        
        return model.expendHeight;
        
    } else {
    
        return model.normalHeight;
    }
}

@end

细节

目录
相关文章
|
iOS开发 开发者
iOS schem 和 Universal Link 在调试时的踩坑记录
iOS schem 和 Universal Link 在调试时的踩坑记录
iOS schem 和 Universal Link 在调试时的踩坑记录
|
开发者 iOS开发
iOS开发之DeviceCheck框架的应用
iOS开发之DeviceCheck框架的应用
921 0
iOS开发之DeviceCheck框架的应用
|
人工智能 算法 数据可视化
想零代码体验视觉AI技术?那就来体验中心!
近期我们上线了【体验中心】板块,在体验中心里用户可以系统的体验我们的能力并能进行可视化的在线调试,除此以外还可根据不同的工作岗位制定不同的体验路线,快来了解详细内容吧
想零代码体验视觉AI技术?那就来体验中心!
|
iOS开发
iOS开发之UICollectionViewDataSourcePrefetching
在iOS10中,苹果为UICollectionViewCell引入了Pre-Fetching预加载机制用于提升它的性能。主要引入了一个新的数据源协议UICollectionViewDataSourcePrefetching,包含两个方法: @proto...
1561 0
UITableViewCell的高亮和选中以及自绘分割线
UITableViewCell的高亮和选中以及自绘分割线   UITableView是一个比较复杂的控件,不过再负责也是由一些基础的UIView组成的,它继承自UIScrollView,并由很多重用的cell组成。
705 0
|
11天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1230 5
|
10天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1213 87