动态展开tableView的cell[1]

源码地址:https://github.com/xerxes235/HVTableView

虽然作者写的demo很好看,可是,你很难理解他是怎么玩的-_-!!,不信,你可以去下载他的demo试一下:)

本人运行时的效果如下图:

源码:

RootViewController.m

  1 //
  2 //  RootViewController.m
  3 //  AnimationTableView
  4 //
  5 //  Copyright (c) 2014年 Y.X. All rights reserved.
  6 //
  7 
  8 #import "RootViewController.h"
  9 #import "HVTableView.h"
 10 #import "YXCell.h"
 11 
 12 @interface RootViewController ()<HVTableViewDelegate, HVTableViewDataSource>
 13 
 14 @property (nonatomic, strong) HVTableView *showTable;
 15 @property (nonatomic, strong) NSArray     *picAry;
 16 
 17 @end
 18 
 19 @implementation RootViewController
 20 
 21 
 22 - (void)viewDidLoad
 23 {
 24     [super viewDidLoad];
 25 
 26     // 图片源
 27     _picAry = @[[UIImage imageNamed:@"1.jpg"],
 28                 [UIImage imageNamed:@"2.jpg"],
 29                 [UIImage imageNamed:@"3.jpg"],
 30                 [UIImage imageNamed:@"4.jpg"],
 31                 [UIImage imageNamed:@"5.jpg"],
 32                 [UIImage imageNamed:@"6.jpg"],
 33                 [UIImage imageNamed:@"7.jpg"],
 34                 [UIImage imageNamed:@"8.jpg"],
 35                 [UIImage imageNamed:@"9.jpg"],
 36                 [UIImage imageNamed:@"10.jpg"]];
 37     
 38     // tableView
 39     _showTable = \
 40         [[HVTableView alloc] initWithFrame:self.view.bounds
 41                          expandOnlyOneCell:YES
 42                           enableAutoScroll:YES];
 43     _showTable.HVTableViewDelegate   = self;
 44     _showTable.HVTableViewDataSource = self;
 45     [_showTable reloadData];
 46     
 47     // 加载进视图
 48     [self.view addSubview:_showTable];
 49 }
 50 
 51 #pragma mark - 各个代理
 52 
 53 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
 54 {
 55     return 1;
 56 }
 57 
 58 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
 59 {
 60     return _picAry.count;
 61 }
 62 
 63 //==============================================
 64 #pragma mark 展开时的cell(可以添加动画)
 65 //==============================================
 66 -(void)tableView:(UITableView *)tableView
 67       expandCell:(UITableViewCell *)cell
 68    withIndexPath:(NSIndexPath *)indexPath
 69 {
 70     YXCell *tmpCell = (YXCell *)cell;
 71     [UIView animateWithDuration:0.3f animations:^{
 72         tmpCell.showImageView.frame = CGRectMake(120, 0, 200, 200);
 73     }];
 74     
 75     [UIView animateWithDuration:0.5f animations:^{
 76         tmpCell.name.frame = CGRectMake(10, 10, 120, 20);
 77     }];
 78 }
 79 
 80 //==============================================
 81 #pragma mark 收缩时的cell(可以添加动画)
 82 //==============================================
 83 -(void)tableView:(UITableView *)tableView
 84     collapseCell:(UITableViewCell *)cell
 85    withIndexPath:(NSIndexPath *)indexPath
 86 {
 87     YXCell *tmpCell = (YXCell *)cell;
 88     [UIView animateWithDuration:0.3f animations:^{
 89         tmpCell.showImageView.frame = CGRectMake(0, 0, 100, 100);
 90         tmpCell.name.frame = CGRectMake(10, 300, 120, 20);
 91     }];
 92 }
 93 
 94 //==============================================
 95 #pragma mark 返回高度
 96 //==============================================
 97 -(CGFloat)tableView:(UITableView *)tableView
 98 heightForRowAtIndexPath:(NSIndexPath *)indexPath
 99          isExpanded:(BOOL)isexpanded
100 {
101     if (isexpanded == YES)
102     {
103         // 展开时的高度
104         return 200;
105     }
106     else
107     {
108         // 没有展开时的高度
109         return 100;
110     }
111 }
112 
113 //==============================================
114 #pragma mark 返回高度
115 //==============================================
116 -(UITableViewCell *)tableView:(UITableView *)tableView
117         cellForRowAtIndexPath:(NSIndexPath *)indexPath
118                    isExpanded:(BOOL)isExpanded
119 {
120     static NSString *CellIdentifier = @"aCell";
121     YXCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
122     if (cell == nil)
123     {
124         cell = [[YXCell alloc] initWithStyle:UITableViewCellStyleSubtitle
125                              reuseIdentifier:CellIdentifier];
126     }
127     
128     // 选择时没有颜色
129     cell.selectionStyle = UITableViewCellSelectionStyleNone;
130     
131     // 加载图片
132     cell.showImageView.image = _picAry[indexPath.row];
133     
134     // 没有展开cell,进行一些设置(不要添加任何动画)
135     if (isExpanded == NO)
136     {
137         cell.showImageView.frame = CGRectMake(0, 0, 100, 100);
138         cell.name.frame          = CGRectMake(10, 300, 120, 20);
139     }
140     // 展开的cell,进行一些设置(不要添加任何动画)
141     else
142     {
143         cell.showImageView.frame = CGRectMake(120, 0, 200, 200);
144         cell.name.frame          = CGRectMake(10, 10, 120, 20);
145     }
146     
147     return cell;
148 }
149 
150 @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: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

以下三个地方是相互配合的,但还是难以解决重用问题-_-!!!!

posted @ 2014-07-02 12:24 YouXianMing 阅读(817) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

YouXianMing

Life is always coding & debugging.

动态展开tableView的cell[1]

公告