动态展开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 1;
}
-(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(120, 0, 200, 200);
}];
[UIView animateWithDuration:0.5f animations:^{
tmpCell.name.frame = CGRectMake(10, 10, 120, 20);
}];
}
//==============================================
#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(0, 0, 100, 100);
tmpCell.name.frame = CGRectMake(10, 300, 120, 20);
}];
}
//==============================================
#pragma mark 返回高度
//==============================================
-(CGFloat)tableView:(UITableView *)tableView
heightForRowAtIndexPath:(NSIndexPath *)indexPath
isExpanded:(BOOL)isexpanded
{
if (isexpanded == YES)
{
// 展开时的高度
return 200;
}
else
{
// 没有展开时的高度
return 100;
}
}
//==============================================
#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(0, 0, 100, 100);
cell.name.frame = CGRectMake(10, 300, 120, 20);
}
// 展开的cell,进行一些设置(不要添加任何动画)
else
{
cell.showImageView.frame = CGRectMake(120, 0, 200, 200);
cell.name.frame = CGRectMake(10, 10, 120, 20);
}
return cell;
}
@endYXCell.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;
@endYXCell.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:17.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[10];
}
@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 1;
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 10;
}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
if (flag[indexPath.row] == YES)
{
return 200.f;
}
else
{
return 70.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:1.f animations:^{
cell.showView.frame = CGRectMake(0, 0, 200, 50);
}];
}
else
{
cell.showView.frame = CGRectMake(-200, 0, 200, 50);
}
return cell;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
if (flag[indexPath.row] == NO)
{
for (int i = 0; i < 10; 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以下三个地方是相互配合的,但还是难以解决重用问题-_-!!!!
