tableview实现qq好友列表点击拉伸的效果

uitableview大概是objective-c开发中最重要的控件了，几乎市面上能够下载的应用中都有使用到它。qq的好友列表也是通过tableview实现的，具体实现大概是在将每一个sectionHeaderView设置为列表名称，然后点击之后加载数据源拉伸，今天就仿照qq的好友列表做一个出来，效果图如下



上面的效果是怎么实现的呢？每一行列表是一个section，我们用tableview的数据源方法返回button作为每一个section的headerView视图，然后在button上面增加列表名字的控件，点击button时就刷新tableview对应的section数据，创建button的代码：

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{

//组的信息
Group *group = groups[section];

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(0, 0, self.view.frame.size.width, 40);
button.backgroundColor = [UIColor colorWithRed:235.0/255.0 green:235.0/255.0 blue:235.0/255.0 alpha:1.0];
[button addTarget:self action:@selector(tapHeadView:) forControlEvents:UIControlEventTouchUpInside];
button.tag = section + 1;

//箭头
UIImageView *arrowImageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, button.frame.size.height/2 - 10, 20, 20)];
[button addSubview:arrowImageView];

if (group.isOpen)
{
arrowImageView.image = [UIImage imageNamed:@"buddy_header_arrow_down"];
}
else
{
arrowImageView.image = [UIImage imageNamed:@"buddy_header_arrow_right"];
}

//组的名字
UILabel *groupNameLabel = [[UILabel alloc] initWithFrame:CGRectMake(CGRectGetMaxX(arrowImageView.frame), 0, 200, button.frame.size.height)];
groupNameLabel.text = group.groupName;
[button addSubview:groupNameLabel];

//在线人数
UILabel *onlineLabel = [[UILabel alloc] initWithFrame:CGRectMake(self.view.frame.size.width - 70, 0, 60, button.frame.size.height)];
onlineLabel.text = [NSString stringWithFormat:@"%d/%d",group.onlineNumber,group.friends.count];
onlineLabel.textAlignment = NSTextAlignmentRight;
[button addSubview:onlineLabel];

//线
UIImageView *lineImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, button.frame.size.height - 2, button.frame.size.width, 2)];
lineImage.image = [UIImage imageNamed:@"line"];
[button addSubview:lineImage];

return button;
}

Group.h

@interface Group : NSObject

/**
组的名字
*/
@property (nonatomic,copy) NSString *groupName;

/**
在线人数
*/
@property (nonatomic,assign) NSInteger onlineNumber;

/**
好友
*/
@property (nonatomic,strong) NSMutableArray *friends;

/**
打开或者闭合状态
*/
@property (nonatomic,assign) BOOL isOpen;

@end

点击section后触发事件

- (void)tapHeadView:(UIButton *)button
{
//取组的信息
Group *group = groups[button.tag - 1];

//打开
if (group.isOpen)
{
group.isOpen = NO;
}
else //闭合
{
group.isOpen = YES;
}

//刷新当前分区
[friendTableView reloadSections:[NSIndexSet indexSetWithIndex:button.tag - 1] withRowAnimation:UITableViewRowAnimationFade];

}

上面这几步核心步骤完成了，其余的步骤按照常规的tableview数据源方法实现就完成了