ios知识点总结——UITableView的展开与收缩及横向Table

UITableVIew是iOS开发中使用最为广泛的一种控件，对于UITableView的基本用法本文不做探讨，本文主要是针对UITableView的展开与收缩进行阐述，在文章的后面也会探讨一下横向table的用法：

1. UITableView的展开与收缩

下面通过两幅图来了解UITableView的展开与收缩的效果：





这种展开与收缩的原理其实非常简单，在使用该TableVIew的时候需要准备两个自定义的Cell，一个是未展开情况下的Cell，一个是展开后的Cell，当点击某一行的展开/收缩按钮时，将该行替换为展开／收缩后的Cell，并将其他所有行全部收缩，原理很简单，下面上代码：

（1）扩展UITableView的部分方法：

创建一个UITableVIew的子类，名称为：ExtensibleTableView

.h文件中：

@protocol ExtensibleTableViewDelegate <NSObject>

@required

//返回展开之后的cell

- (UITableViewCell *)tableView:(UITableView *)tableView extendedCellForRowAtIndexPath:(NSIndexPath *)indexPath;

//返回展开之后的cell的高度

- (CGFloat)tableView:(UITableView *)tableView extendedHeightForRowAtIndexPath:(NSIndexPath *)indexPath;

@end

@interface ExtensibleTableView :
UITableView

{

//当前被展开的索引

NSIndexPath *currentIndexPath;

// id<ExtensibleTableViewDelegate> delegate_extend;

}

@property(nonatomic,retain)id delegate_extend;

@property(nonatomic,retain)NSIndexPath *currentIndexPath;

//将indexPath对应的row展开

- (void)extendCellAtIndexPath:(NSIndexPath *)indexPath animated:(BOOL)animated goToTop:(BOOL)goToTop;

//将展开的cell收起

- (void)shrinkCellWithAnimated:(BOOL)animated;

//查看传来的索引和当前被选中索引是否相同

- (BOOL)isEqualToSelectedIndexPath:(NSIndexPath *)indexPath;

@end

在.m文件中

@implementation ExtensibleTableView

@synthesize delegate_extend;

@synthesize currentIndexPath;

- (id)init

{

self.currentIndexPath =nil;

return [superinit];

}

//重写设置代理的方法，使为UITableView设置代理时，将子类的delegate_extend同样设置

- (void)setDelegate:(id<UITableViewDelegate>)delegate

{

self.delegate_extend = delegate;

[super setDelegate:delegate];

}

/*

将indexPath对应的row展开

params:

animated:是否要动画效果

goToTop:展开后是否让到被展开的cell滚动到顶部

*/

- (void)extendCellAtIndexPath:(NSIndexPath *)indexPath animated:(BOOL)animated goToTop:(BOOL)goToTop

{

//被取消选中的行的索引

NSIndexPath *unselectedIndex = [NSIndexPathindexPathForRow:[self.currentIndexPathrow]inSection:[self.currentIndexPathsection]];

//要刷新的index的集合

NSMutableArray *array1 = [[NSMutableArrayalloc]init];

//若当前index不为空

if(self.currentIndexPath)

{

//被取消选中的行的索引

[array1 addObject:unselectedIndex];

}

//若当前选中的行和入参的选中行不相同，说明用户点击的不是已经展开的cell

if(![selfisEqualToSelectedIndexPath:indexPath])

{

//被选中的行的索引

[array1 addObject:indexPath];

}

//将当前被选中的索引重新赋值

self.currentIndexPath = indexPath;

if(animated)

{

[selfreloadRowsAtIndexPaths:array1withRowAnimation:UITableViewRowAnimationFade];

}

else

{

[selfreloadRowsAtIndexPaths:array1withRowAnimation:UITableViewRowAnimationNone];

}

if(goToTop)

{

//tableview滚动到新选中的行的高度

[selfscrollToRowAtIndexPath:indexPathatScrollPosition:UITableViewScrollPositionTopanimated:YES];

}

[array1 release];

}

//将展开的cell收起

- (void)shrinkCellWithAnimated:(BOOL)animated

{

//要刷新的index的集合

NSMutableArray *array1 = [[NSMutableArrayalloc]init];

if(self.currentIndexPath)

{

//当前展开的cell的索引

[array1 addObject:self.currentIndexPath];

//将当前展开的cell的索引设为空

self.currentIndexPath =nil;

[selfreloadRowsAtIndexPaths:array1withRowAnimation:UITableViewRowAnimationFade];

}

[array1 release];

}

//查看传来的索引和当前被选中索引是否相同

- (BOOL)isEqualToSelectedIndexPath:(NSIndexPath *)indexPath

{

if(self.currentIndexPath)

{

return ([self.currentIndexPathrow] == [indexPathrow]) && ([self.currentIndexPathsection]
== [indexPathsection]);

}

return
NO;

}

/*

重写了这个方法，却无效，因为这个方法总在didSelect之前调用，很奇怪。因为无法重写该方法，所以ExtensibleTableView不算完善，因为还有额外的代码需要在heightForRowAtIndexPath和cellForRowAtIndexPath中。哪个找到完善的方法后希望可以与qq82934162联系或者在http://borissun.iteye.com来留言

*/

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

{

if([self.currentIndexPathrow] == [indexPathrow])

{

return [self.delegate_extendtableView:selfextendedHeightForRowAtIndexPath:indexPath];

}

return [superrowHeight];

}

@end

这个类时在UITableView的基础上扩展了两个方法，一个是展开情况下的CellForRow方法，一个是在展开情况下的返回heightForRow方法

（2） 准备两个自定义的Cell

如下图：





可以看出这两个Cell上半部分完全一样，主要差别是展开后的Cell多了下面的一部分

（3） 在ViewController中实现该TableVIew的部分方法：

在ViewController文件中：

ExtensibleTableView ＊ccTableView=[[ExtensibleTableViewalloc]initWithFrame:CGRectMake(0,163,ModelSize.width,ModelSize.height-20-44-49-163-40)];

ccTableView.delegate=self;

ccTableView.dataSource=self;

ccTableView.delegate_extend=self; ／／这个代理就是展开行的代理

下面实现UITableVIew的方法：

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

{

return
[dataArr count];

}

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

{

CGFloat hei=0.0f;

if([ccTableViewisEqualToSelectedIndexPath:indexPath])

{

return [selftableView:ccTableViewextendedHeightForRowAtIndexPath:indexPath];//展开后的行高

}else

{

hei= 50; ／／ 未展开下的行高

}

return hei;

}

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

{

//若当前行被选中，则返回展开的cell

if([ccTableViewisEqualToSelectedIndexPath:indexPath])

{

return [selftableView:ccTableViewextendedCellForRowAtIndexPath:indexPath];

}

static NSString *CellIdentifier =@"CCCell";

UINib *nib = [UINibnibWithNibName:@"CCCell"bundle:nil];

[tableView registerNib:nib
forCellReuseIdentifier:CellIdentifier];

CCCell *cell = [tableView
dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell ==
nil)

{

cell = [[[CCCell
alloc]

initWithStyle:UITableViewCellStyleDefault

reuseIdentifier:CellIdentifier]autorelease];

}

cell.selectionStyle=UITableViewCellSelectionStyleNone;

／／在此设置Cell的相关数据

UIButton *btn=[[UIButtonalloc]initWithFrame:CGRectMake(ModelSize.width-45,3,45,
45)];

[btn setImage:[UIImageselfimageNamed:@"tragile_down@2x.png"]forState:UIControlStateNormal];

btn.tag=indexPath.row;

[btn addTarget:selfaction:@selector(operateCell:)forControlEvents:UIControlEventTouchUpInside];

[cell addSubview:btn];

[btn release];

return cell;

}

//返回展开之后的cell

- (UITableViewCell *)tableView:(UITableView *)tableView extendedCellForRowAtIndexPath:(NSIndexPath *)indexPath

{

//每个cell的标识

NSString *CellTableIdentifier=@"CCopenCell";

//获得cell

UINib *nib = [UINibnibWithNibName:@"CCopenCell"bundle:nil];

[tableView registerNib:nib
forCellReuseIdentifier:CellTableIdentifier];

CCopenCell *cell = [tableView
dequeueReusableCellWithIdentifier:CellTableIdentifier];

if (cell == nil)

{

cell = [[[CCopenCell
alloc]

initWithStyle:UITableViewCellStyleDefault

reuseIdentifier:CellTableIdentifier]autorelease];

cell.frame=CGRectMake(0,0,ModelSize.width
,0);

}

cell.selectionStyle=UITableViewCellSelectionStyleNone;

／／ 在此设置cell的相关数据

UIButton *btn=[[UIButtonalloc]initWithFrame:CGRectMake(ModelSize.width-45,3,45,45)];

[btn setImage:[UIImageselfimageNamed:@"tragile_down@2x.png"]forState:UIControlStateNormal];

btn.tag=indexPath.row;

[btn addTarget:selfaction:@selector(operateCell:)forControlEvents:UIControlEventTouchUpInside];

[cell addSubview:btn];

[btn release];

return cell;

}

//返回展开之后的cell的高度

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

return 95;

}

OK，以上就是展开与收缩TableVIew的代码，本人已经多次使用，确认无误，如果疑问请联系

最后我们看看横向TableVIew的实现方法：

方法一：设置tableview属性：

_tableView.transform
= CGAffineTransformMakeRotation(-M_PI / 2);

设置cell属性

cell.contentView.transform
= CGAffineTransformMakeRotation(M_PI / 2);

方法二：横向UITableView已经有开源实现了 ，EasyTableView,https://github.com/alekseyn/EasyTableView