[iOS基础控件 - 6.9.3] QQ好友列表Demo TableView

A.需求

1.使用plist数据，展示类似QQ好友列表的分组、组内成员显示缩进功能

2.组名使用Header，展示箭头图标、组名、组内人数和上线人数

3.点击组名，伸展、缩回好友组

 

code source: https://github.com/hellovoidworld/QQFriendList

 

B.实现步骤

1.编写MVC结构

 

 

（1）根据plist文件结构，编写model，使用嵌套型

 

 

 //
 //  FriendGroup.h
 //  FriendsList
 //
 //  Created by hellovoidworld on 14/12/12.
 //  Copyright (c) 2014年 hellovoidworld. All rights reserved.
 //

 #import <Foundation/Foundation.h>

 @class Friend;

 @interface FriendGroup : NSObject

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

 /** 好友组名 */
 @property(nonatomic, copy) NSString *name;

 /** 在线人数 */
 @property(nonatomic, assign) int online;

 - (instancetype) initWithDictionary:(NSDictionary *) dictionary;
 + (instancetype) friendGroupWithDictionary:(NSDictionary *) dictionary;

 @end

 

（2）自定义header，用于组名显示，包括了箭头图示、组名、在线人数/组内人数

 

a.数据来源：FriendGroup模型

 /** 加载数据  */
 - (void)setFriendGroup:(FriendGroup *)friendGroup

 

b.在init方法中header控件的位置尺寸信息并没有初始化，init方法仅仅用于分配内存，所以要使用初始化后的header位置尺寸数据，要在layoutSubviews方法中使用

 /** 子控件布局方法
     在init的时候，只分配的内存，没有初始化控件的尺寸，在此处header已经有了位置尺寸了
 */
 - (void)layoutSubviews {
     // 必须先调用父类的方法
     [super layoutSubviews];

     // 1.背景
     self.headerButtonView.frame = self.bounds;

     // 2.在线人数/组内总人数
     CGFloat countWidth = ;
     CGFloat countHeight = self.frame.size.height;
     CGFloat countX = self.frame.size.width -  - countWidth;
     CGFloat countY = ;
     self.onlineCountView.frame = CGRectMake(countX, countY, countWidth, countHeight);
 }

 

c.使用tableView的缓存池，在controller中实现相应dataSource方法

 /** 自定义每个section的头部 */
 - (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
     FriendHeader *header = [FriendHeader friendHeaderWithTableView:self.tableView];
     header.friendGroup = self.friendGroups[section];
     return header;
 }

 

（3）定义cell，用于显示每个好友信息，包括头像、昵称、介绍（签名）

 

实现方法跟header差不多

数据来源：Friend模型

在这里cell不用计算子控件的位置尺寸，直接使用 UITableViewCellStyleSubtitle类型的cell

 /** 自定义构造方法 */
 + (instancetype) cellWithTableView:(UITableView *) tableView {
     static NSString *ID = @"friendCell";
     FriendCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];

     if (nil == cell) {
         cell = [[self alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
     }

     return cell;
 }

 /** 加载数据 */
 - (void)setFriendData:(Friend *)friendData {
     _friendData = friendData;

     self.imageView.image = [UIImage imageNamed:friendData.icon];
     self.textLabel.text = friendData.name;
     self.textLabel.textColor = friendData.isVip?[UIColor redColor]:[UIColor blackColor];
     self.detailTextLabel.text = friendData.intro;
 }

 

初步可以显示整个版面:

 

2.伸缩组内好友

（1）在group模型创建一个标识，用来标识此组的好友是否显示

 /** 是否伸展显示好友 */
 @property(nonatomic, assign, getter=isOpened) BOOL opened;

 

（2）给header加上点击事件，改变伸展标识

         // 1.4点击事件
         [headerButtonView addTarget:self action:@selector(headerClicked) forControlEvents:UIControlEventTouchUpInside];

 

 /** 点击事件 */
 - (void) headerClicked {
     // 1.伸展、隐藏组内好友
     self.friendGroup.opened = !self.friendGroup.isOpened;

     // 2.刷新tableView
     if ([self.delegate respondsToSelector:@selector(friendHeaderDidClickedHeader:)]) {
         [self.delegate friendHeaderDidClickedHeader:self];
     }
 }

 

（3）给header编写代理协议

 @protocol FriendHeaderDelegate <NSObject>
 /** header被点击的代理方法 */
 @optional
 - (void) friendHeaderDidClickedHeader:(FriendHeader *) header;

 @end

 

（4）viewController根据group模型的伸展标识，判断是否返回当前组的row数

 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
     FriendGroup *group = self.friendGroups[section];
     // 先检查模型数据内的伸展标识
     return group.isOpened? group.friends.count : ;
 }

 

（5）使用viewController作为代理，监听header的点击事件，刷新tableView数据

 #pragma mark - FriendHeaderDelegate方法
 - (void)friendHeaderDidClickedHeader:(FriendHeader *)header {
     // 刷新数据
     [self.tableView reloadData];
 }

 

 

3.改变组的伸展标识—箭头朝向

（1）由于在header的代理中使用了tableView的 reloadData刷新界面和数据，tableView会从新创建所有header，所以在reloadData之前改变header的外观（比如箭头朝向）是没有意义的。

     所以需要修改新创建的header

 /**
     被加到父控件之前
     由于tableView刷新数据后，所有header会被重新创建，所以要在这里对箭头朝向做出修改
 */
 - (void)didMoveToSuperview {
     // 改变箭头朝向，顺时针旋转90度
     CGFloat rotation = self.friendGroup.isOpened? M_PI_2 : ;
     self.headerButtonView.imageView.transform = CGAffineTransformMakeRotation(rotation);
 }

 

（2）使用transform旋转箭头，因为原来的图片大小非正方形而且填充方式是拉伸，需要做一些属性修改

         // 改变箭头填充方式为居中
         [headerButtonView.imageView setContentMode:UIViewContentModeCenter];
         // 不需要裁剪箭头图片的边界
         [headerButtonView.imageView setClipsToBounds:NO];