动态展开tableView的cell[1]
源码地址:https://github.com/xerxes235/HVTableView
虽然作者写的demo很好看,可是,你很难理解他是怎么玩的-_-!!,不信,你可以去下载他的demo试一下:)
本人运行时的效果如下图:
源码:
RootViewController.m
//
// RootViewController.m
// AnimationTableView
//
// Copyright (c) 2014年 Y.X. All rights reserved.
// #import "RootViewController.h"
#import "HVTableView.h"
#import "YXCell.h" @interface RootViewController ()<HVTableViewDelegate, HVTableViewDataSource> @property (nonatomic, strong) HVTableView *showTable;
@property (nonatomic, strong) NSArray *picAry; @end @implementation RootViewController - (void)viewDidLoad
{
[super viewDidLoad]; // 图片源
_picAry = @[[UIImage imageNamed:@"1.jpg"],
[UIImage imageNamed:@"2.jpg"],
[UIImage imageNamed:@"3.jpg"],
[UIImage imageNamed:@"4.jpg"],
[UIImage imageNamed:@"5.jpg"],
[UIImage imageNamed:@"6.jpg"],
[UIImage imageNamed:@"7.jpg"],
[UIImage imageNamed:@"8.jpg"],
[UIImage imageNamed:@"9.jpg"],
[UIImage imageNamed:@"10.jpg"]]; // tableView
_showTable = \
[[HVTableView alloc] initWithFrame:self.view.bounds
expandOnlyOneCell:YES
enableAutoScroll:YES];
_showTable.HVTableViewDelegate = self;
_showTable.HVTableViewDataSource = self;
[_showTable reloadData]; // 加载进视图
[self.view addSubview:_showTable];
} #pragma mark - 各个代理 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return ;
} -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return _picAry.count;
} //==============================================
#pragma mark 展开时的cell(可以添加动画)
//==============================================
-(void)tableView:(UITableView *)tableView
expandCell:(UITableViewCell *)cell
withIndexPath:(NSIndexPath *)indexPath
{
YXCell *tmpCell = (YXCell *)cell;
[UIView animateWithDuration:0.3f animations:^{
tmpCell.showImageView.frame = CGRectMake(, , , );
}]; [UIView animateWithDuration:0.5f animations:^{
tmpCell.name.frame = CGRectMake(, , , );
}];
} //==============================================
#pragma mark 收缩时的cell(可以添加动画)
//==============================================
-(void)tableView:(UITableView *)tableView
collapseCell:(UITableViewCell *)cell
withIndexPath:(NSIndexPath *)indexPath
{
YXCell *tmpCell = (YXCell *)cell;
[UIView animateWithDuration:0.3f animations:^{
tmpCell.showImageView.frame = CGRectMake(, , , );
tmpCell.name.frame = CGRectMake(, , , );
}];
} //==============================================
#pragma mark 返回高度
//==============================================
-(CGFloat)tableView:(UITableView *)tableView
heightForRowAtIndexPath:(NSIndexPath *)indexPath
isExpanded:(BOOL)isexpanded
{
if (isexpanded == YES)
{
// 展开时的高度
return ;
}
else
{
// 没有展开时的高度
return ;
}
} //==============================================
#pragma mark 返回高度
//==============================================
-(UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
isExpanded:(BOOL)isExpanded
{
static NSString *CellIdentifier = @"aCell";
YXCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil)
{
cell = [[YXCell alloc] initWithStyle:UITableViewCellStyleSubtitle
reuseIdentifier:CellIdentifier];
} // 选择时没有颜色
cell.selectionStyle = UITableViewCellSelectionStyleNone; // 加载图片
cell.showImageView.image = _picAry[indexPath.row]; // 没有展开cell,进行一些设置(不要添加任何动画)
if (isExpanded == NO)
{
cell.showImageView.frame = CGRectMake(, , , );
cell.name.frame = CGRectMake(, , , );
}
// 展开的cell,进行一些设置(不要添加任何动画)
else
{
cell.showImageView.frame = CGRectMake(, , , );
cell.name.frame = CGRectMake(, , , );
} return cell;
} @end
YXCell.h
//
// YXCell.h
// AnimationTableView
//
// Copyright (c) 2014年 Y.X. All rights reserved.
// #import <UIKit/UIKit.h> @interface YXCell : UITableViewCell @property (nonatomic, strong) UILabel *name;
@property (nonatomic, strong) UIImageView *showImageView; @end
YXCell.m
//
// YXCell.m
// AnimationTableView
//
// Copyright (c) 2014年 Y.X. All rights reserved.
// #import "YXCell.h" @implementation YXCell - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self)
{
// 尺寸在外面的cell设定
_showImageView = [[UIImageView alloc] initWithFrame:CGRectZero];
[self addSubview:_showImageView]; _name = [[UILabel alloc] initWithFrame:CGRectZero];
_name.font = [UIFont fontWithName:@"HelveticaNeue-UltraLight" size:.f];
_name.text = @"YouXianMing";
_name.textColor = [UIColor blackColor];
[self addSubview:_name]; self.layer.masksToBounds = YES;
}
return self;
} @end
关键的几步:
怎么实现复杂逼格高的动画?这个就需要你的想象力来脑补了-_-!!,没有实现不出来的效果,只有想不出来的效果:)
附录:
其实笔者深刻理解他的原理,然后尝试着自己写了一个,不过,那恶心的重用问题,不自己亲自动手是不理解别人写代码的用心良苦的-_-!!!!!
先共享源码供君尝试:
//
// YXCell.h
// ExpendTableView
//
// Copyright (c) 2014年 Y.X. All rights reserved.
// #import <UIKit/UIKit.h> @interface YXCell : UITableViewCell @property (nonatomic, strong) UIView *showView; @end
//
// YXCell.m
// ExpendTableView
//
// Copyright (c) 2014年 Y.X. All rights reserved.
// #import "YXCell.h" @implementation YXCell - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self)
{
_showView = [[UIView alloc] initWithFrame:CGRectZero];
_showView.backgroundColor = [UIColor redColor];
[self addSubview:_showView];
}
return self;
} @end
//
// RootViewController.m
// ExpendTableView
//
// Copyright (c) 2014年 Y.X. All rights reserved.
// #import "RootViewController.h"
#import "YXCell.h" @interface RootViewController ()<UITableViewDataSource, UITableViewDelegate> { BOOL flag[]; } @property (nonatomic, strong) UITableView *tableView; @end @implementation RootViewController - (void)viewDidLoad
{
[super viewDidLoad]; _tableView = [[UITableView alloc] initWithFrame:self.view.bounds
style:UITableViewStylePlain];
_tableView.delegate = self;
_tableView.dataSource = self; [self.view addSubview:_tableView];
} -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return ;
} -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return ;
} -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
if (flag[indexPath.row] == YES)
{
return .f;
}
else
{
return .f;
}
} //==============================================
#pragma mark 根据cell状态进行相关设置
//==============================================
-(UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"aCell";
YXCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil)
{
cell = [[YXCell alloc] initWithStyle:UITableViewCellStyleSubtitle
reuseIdentifier:CellIdentifier];
} // 选择时没有颜色
cell.selectionStyle = UITableViewCellSelectionStyleNone; if (flag[indexPath.row] == YES)
{
[UIView animateWithDuration:.f animations:^{
cell.showView.frame = CGRectMake(, , , );
}];
}
else
{
cell.showView.frame = CGRectMake(-, , , );
} return cell;
} - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
if (flag[indexPath.row] == NO)
{
for (int i = ; i < ; i++)
{
flag[i] = NO;
} flag[indexPath.row] = YES; [tableView beginUpdates];
[tableView reloadRowsAtIndexPaths:[NSArray arrayWithObject:indexPath]
withRowAnimation:UITableViewRowAnimationAutomatic];
[tableView endUpdates];
}
else
{
flag[indexPath.row] = NO; [tableView beginUpdates];
[tableView reloadRowsAtIndexPaths:[NSArray arrayWithObject:indexPath]
withRowAnimation:UITableViewRowAnimationAutomatic];
[tableView endUpdates];
}
} @end
以下三个地方是相互配合的,但还是难以解决重用问题-_-!!!!