OCiOS开发：表格视图实现腾讯好友列表展开收缩效果

前言

这几天刚刚给学生讲到了表格视图的使用，有学生问我，如果要实现类似于腾讯好友列表展开收缩的效果该怎么实现呢？以前我写过有关这样效果的demo，但是一直没有发表成文，今天刚好有时间，于是写出来，分享给各位，当然要实现这种效果方法还是有很多，这里就讲解下我的实现方式，不到之处，还往各位提点建议，我会及时改进。

效果

为了简化数据，所以每个分组里面的好友数据都是一样的。

实现思路

1、用一个字典来判断，将section作为key，如果字典对应key有值，则展开组，反之则关闭组。

2、自定义头部视图，并且给头部视图添加点击事件（UITapGestureRecognizer）监测用户点击分组。

3、在主页为表视图创建头部视图的时候，为其设置tag值，其值为当前所在的组（section），并且在自定义头部视图类中，通过委托模式，将其tag值传递到主页，为其获取到对应头部视图的section，设为字典key。

4、涉及技术：委托模式、自定义单元格、自定义头部视图、plist文件读取、点击手势以及协议传值。

数据处理

好友列表展示的数据，我已预先存到plist文件中，包括图片素材，也一并导入了工程，如下所示：

素材下载地址：http://download.csdn.net/detail/hierarch_lee/9412991

代码实现

由于代码相对较简单，并且关键部分我也详细注明了代码解释，因此，就不做具体的讲解。
涉及文件

1、LHY_HomeViewController：主页，继承于UIViewController，用于展示好友列表。

2、LHY_FriendsListCell：自定义单元格，继承于UITableViewCell，用于布局好友列表信息；

3、LHY_HeaderView：自定义头部视图，继承于UITableViewHeaderFooterView，用于布局分组显示数据；

代码块1：为主页添导航栏，这里我是手动创建UIWindow，首先在Info.plist将Main字段删除，然后在AppDelegate.m文件中，导入LHY_HomeViewController，添加如下代码：

• AppDelegate.m

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    // Override point for customization after application launch.    LHY_HomeViewController *lhyVc = [[LHY_HomeViewController alloc] init];    UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:lhyVc];    _window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];    _window.backgroundColor = [UIColor blackColor];    _window.rootViewController = nav;    [_window makeKeyAndVisible];    return YES;}

代码块2：自定义单元格，LHY_FriendsListCell，主要布局好友信息包括头像、昵称以及签名，具体实现如下：

• LHY_FriendsListCell.h

#import <UIKit/UIKit.h>@interface LHY_FriendsListCell : UITableViewCell@property (strong, nonatomic) UIImageView *headPortraitImageView; /**< 头像 */@property (strong, nonatomic) UILabel     *nicknameLabel;         /**< 昵称 */@property (strong, nonatomic) UILabel     *signatureLabel;        /**< 签名 */@end

• LHY_FriendsListCell.m

#import "LHY_FriendsListCell.h"@implementation LHY_FriendsListCell- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {        // 加载视图        [self.contentView addSubview:self.headPortraitImageView];        [self.contentView addSubview:self.nicknameLabel];        [self.contentView addSubview:self.signatureLabel];    }    return self;}#pragma mark *** Getters ***- (UIImageView *)headPortraitImageView {    if (!_headPortraitImageView) {        _headPortraitImageView = [[UIImageView alloc] init];        _headPortraitImageView.bounds = CGRectMake(0, 0, 60, 60);        _headPortraitImageView.center = CGPointMake(40, 40);        // 设置文本现实模式        _headPortraitImageView.contentMode = UIViewContentModeScaleAspectFit;        // 设置圆角        _headPortraitImageView.layer.cornerRadius = 30;        // 设置图层超出父视图部分不显示        _headPortraitImageView.layer.masksToBounds = YES;    }    return _headPortraitImageView;}- (UILabel *)nicknameLabel {    if (!_nicknameLabel) {        _nicknameLabel = [[UILabel alloc] initWithFrame:CGRectMake(80, 5, 310, 30)];        _nicknameLabel.font = [UIFont boldSystemFontOfSize:18];        _nicknameLabel.textColor = [UIColor redColor];    }    return _nicknameLabel;}- (UILabel *)signatureLabel {    if (!_signatureLabel) {        _signatureLabel = [[UILabel alloc] initWithFrame:CGRectMake(80, 50, 310, 20)];        _signatureLabel.font = [UIFont systemFontOfSize:15];    }    return _signatureLabel;}@end

代码块3：自定义头部视图，LHY_HeaderView，本类主要布局组标题以及指示（展开/关闭）控件，其次，通过添加点击手势结合委托模式，传递tag值。

• LHY_HeaderView.h

#import <UIKit/UIKit.h>@class LHY_HeaderView;// 协议声明@protocol LHY_HeaderViewDelegate <NSObject>- (void)lhyHeaderView:(LHY_HeaderView *)lhyHeaderView didSelectedWithTag:(NSInteger)tag;@end@interface LHY_HeaderView : UITableViewHeaderFooterView@property (nonatomic, strong) UILabel                *sectionTitleLabel; /**< 组标题 */@property (nonatomic, strong) UIImageView            *indictorImageView; /**< 指示图片 */@property (nonatomic, weak) id <LHY_HeaderViewDelegate> delegate;        /**< 代理 */@end

• LHY_HeaderView.m

#import "LHY_HeaderView.h"@implementation LHY_HeaderView- (instancetype)initWithReuseIdentifier:(nullable NSString *)reuseIdentifier {    if (self = [super initWithReuseIdentifier:reuseIdentifier]) {        self.contentView.backgroundColor = [UIColor clearColor];        self.layer.borderWidth = 0.34;        self.layer.borderColor = [UIColor lightGrayColor].CGColor;        // 加载控件        [self.contentView addSubview:self.indictorImageView];        [self.contentView addSubview:self.sectionTitleLabel];        // 添加点击手势        UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(respondsToTapGesture:)];        [self addGestureRecognizer:tapGesture];    }    return self;}#pragma mark *** Gestures ***- (void)respondsToTapGesture:(UITapGestureRecognizer *)gesture {    // 判断代理是否存并且遵守协议，如果满足条件，则让代理执行协议方法，并且将对应组以及tag值传递给代理；    if (_delegate && [_delegate conformsToProtocol:@protocol(LHY_HeaderViewDelegate)]) {        [_delegate lhyHeaderView:self didSelectedWithTag:self.tag];    }}#pragma mark *** Getters ***- (UIImageView *)indictorImageView {    if (!_indictorImageView) {        _indictorImageView = [[UIImageView alloc] init];        _indictorImageView.bounds = CGRectMake(0, 0, 20, 20);        _indictorImageView.center = CGPointMake(15, 22);    }    return _indictorImageView;}- (UILabel *)sectionTitleLabel {    if (!_sectionTitleLabel) {        _sectionTitleLabel = [[UILabel alloc] init];        _sectionTitleLabel.bounds = CGRectMake(0, 0, 200, 30);        _sectionTitleLabel.center = CGPointMake(CGRectGetMaxX(self.indictorImageView.frame) + CGRectGetMidX(_sectionTitleLabel.bounds) + 10, 22);        _sectionTitleLabel.font = [UIFont boldSystemFontOfSize:18];    }    return _sectionTitleLabel;}@end

代码块4：加载主页，LHY_HomeViewController，本类主要配置表格视图显示，以及处理组展开/关闭状态。

• LHY_HomeViewController.h

#import <UIKit/UIKit.h>@interface LHY_HomeViewController : UIViewController@end

• LHY_HomeViewController.m

#import "LHY_HomeViewController.h"#import "LHY_HeaderView.h"#import "LHY_FriendsListCell.h"static NSString *const kLHY_ViewControllerTitle         = @"好友列表";static NSString *const kReusableCellIdentifier          = @"a1b1c1";static NSString *const kHeaderFooterViewReuseIdentifier = @"a2b2c2";@interface LHY_HomeViewController () <UITableViewDataSource, UITableViewDelegate, LHY_HeaderViewDelegate>{    NSArray *_sectionTitles;   /**< 分组标题集合 */    NSArray *_friendsListInfo; /**< 好友信息集合 */    NSMutableDictionary *_openDict; /**< 用于设置当前分组展开或关闭 */}@property (nonatomic, strong) UITableView *tableView; /**< 表格视图 */- (void)initializeDataSource;    /**< 初始化数据源 */- (void)initializeUserInterface; /**< 初始化用户界面 */@end@implementation LHY_HomeViewController- (void)viewDidLoad {    [super viewDidLoad];    [self initializeDataSource];    [self initializeUserInterface];}#pragma mark *** Initialize methods ***- (void)initializeDataSource {    // 初始化分组数据    _sectionTitles = @[@"同事", @"家人", @"朋友", @"同学", @"陌生人", @"黑名单"];    // 根据plist文件获取好友列表数据    NSString *plistPath = [[NSBundle mainBundle] pathForResource:@"FriendsList" ofType:@"plist"];    _friendsListInfo = [NSArray arrayWithContentsOfFile:plistPath];}- (void)initializeUserInterface {    self.title = kLHY_ViewControllerTitle;    // 关闭系统自动偏移    self.automaticallyAdjustsScrollViewInsets = NO;    self.view.backgroundColor = [UIColor whiteColor];    // 加载表格视图    [self.view addSubview:self.tableView];}#pragma mark *** <UITableViewDataSource, UITableViewDelegate> ***// 设置组数- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {    // 返回分组数据集合的个数    return _sectionTitles.count;}// 设置行数- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {    // 返回好友列表信息集合的个数    return _friendsListInfo.count;}// 设置单元格- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {    LHY_FriendsListCell *cell = [tableView dequeueReusableCellWithIdentifier:kReusableCellIdentifier forIndexPath:indexPath];    // 超出父视图不显示，如果不将其值设为YES（默认为NO），那么现实在表格视图上的数据会出现重叠的bug。    cell.layer.masksToBounds = YES;    // 获取值    NSString *nickName = _friendsListInfo[indexPath.row][@"nickName"];    NSString *headPortrait = _friendsListInfo[indexPath.row][@"headPortrait"];    NSString *signature = _friendsListInfo[indexPath.row][@"context"];    // 赋值控件    cell.nicknameLabel.text = nickName;    cell.signatureLabel.text = signature;    cell.headPortraitImageView.image = [UIImage imageNamed:headPortrait];    return cell;}// 设置行高- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {    // 根据当前组获取字典key    NSString *key = [NSString stringWithFormat:@"%ld", indexPath.section];    // 判断如果字典对应key是否有值，如果有值，说明当前组展开，返回 80 高度；否则为关闭，返回 0 高度；    if ([_openDict objectForKey:key]) {        return 80;    }else {        return 0;    }}// 设置组高- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {    return 44;}// 自定义头部视图- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {    // 创建头部视图    // 头部视图重用    LHY_HeaderView *lhyHeaderView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:kHeaderFooterViewReuseIdentifier];    // 设置代理    lhyHeaderView.delegate = self;    // 配置视图显示    lhyHeaderView.sectionTitleLabel.text = _sectionTitles[section];    lhyHeaderView.indictorImageView.image = [UIImage imageNamed:@"flag.png"];    // 设置tag值    lhyHeaderView.tag = section;    // 根据字典对应key（section）是否有值来判断当前组应该展开还是收缩    // 如果有值，则说明应该展开组，无值则应该关闭组    NSString *key = [NSString stringWithFormat:@"%ld", section];    // 通过动画效果实现展开与关闭指示状态的显示    [UIView animateWithDuration:0.4 animations:^{        // 如果展开，则将指示图片旋转45°，箭头向下，意为展开；        // 如果关闭，则移除transform属性，回复原样，箭头向右，意为关闭；        lhyHeaderView.indictorImageView.transform = [_openDict objectForKey:key] ? CGAffineTransformMakeRotation(M_PI_2) : CGAffineTransformIdentity;    }];    return lhyHeaderView;}#pragma mark *** LHY_HeaderViewDelegate ***- (void)lhyHeaderView:(LHY_HeaderView *)lhyHeaderView didSelectedWithTag:(NSInteger)tag {    // 判断字典是否存在，如果不存在，则新建；    // 如果对一个未初始化的可变字典作数据操作，将会导致奔溃；    if (!_openDict) {        _openDict = [NSMutableDictionary dictionary];    }    // 获取tag值，并将其作为字典key    NSString *key = [NSString stringWithFormat:@"%ld", tag];    // 模拟展开与关闭    // 判断当前组是否有值，有值则移除对应key-value对，无值则设置key-value对。    if (![_openDict objectForKey:key]) {        [_openDict setObject:key forKey:key];    }else{        [_openDict removeObjectForKey:key];    }    // 刷新表格视图指定组    [self.tableView reloadSections:[NSIndexSet indexSetWithIndex:tag] withRowAnimation:UITableViewRowAnimationFade];}#pragma mark *** Getters ***- (UITableView *)tableView {    if (!_tableView) {        _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 64, CGRectGetWidth(self.view.bounds), CGRectGetHeight(self.view.bounds) - 64) style:UITableViewStylePlain];        // 设置代理        _tableView.delegate = self;        // 设置数据源        _tableView.dataSource = self;        // 设置尾部视图（此设置可解决当表格视图在屏幕能完全展示数据，并且有多余空间情况下出现分割线的问题）        _tableView.tableFooterView = [[UIView alloc] init];        // 注册单元格        [_tableView registerClass:[LHY_FriendsListCell class] forCellReuseIdentifier:kReusableCellIdentifier];        // 注册头部视图        [_tableView registerClass:[LHY_HeaderView class] forHeaderFooterViewReuseIdentifier:kHeaderFooterViewReuseIdentifier];    }    return _tableView;}@end

到了这一步，运行工程，你将会看到上述展示的效果。如果还有朋友不太熟悉思路，欢迎加Q：894416347，填好备注信息，或留言，一起探讨。