第二十七篇：QQ好友列表，UITableViewHeaderFooterView用法

1.设置tableView的headerView注要以下几个：

#pragma mark - tableView代理方法

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
// 取得一个自定义的 headerView
QJHeaderView * headerView = [QJHeaderView headerViewWithTableView:tableView];

// 设置数据
headerView.friendGroup = self.friendGroups[section];

// 设置代理对象
headerView.delegate = self;

return headerView;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
return 60;
}

UITableViewHeaderFooterView：

》/** 当初始化headerView完时，系统自动调用该方法设置子控件的frame ，这是UIView中的方法 */
 - (void)layoutSubviews；
》可重用，与UITableViewCell类似

UIView自带的方法
 1> - (void)layoutSubviews;
  * 当一个控件的frame发生改变的时候就会自动调用
  * 一般在这里布局内部的子控件(设置子控件的frame)
  * 一定要调用super的layoutSubviews方法
 2> - (void)didMoveToSuperview;
  * 当一个控件被添加到父控件中就会调用
 3> - (void)willMoveToSuperview:(UIView *)newSuperview;
  * 当一个控件即将被添加到父控件中会调用

UIButton：

》// * 下面两个设置使得图片转换角度时不变形

            // 当国图片超出bounds的边界时 是否需要剪掉 超出的部分

             headerBtn.imageView.clipsToBounds = NO;

            // 设置图片内容模式居中

           headerBtn.imageView.contentMode = UIViewContentModeCenter;

》// 添加 headerBtn 的监听点击事件

           [headerBtn addTarget:self action:@selector(headerViewDidClicked) forControlEvents:UIControlEventTouchUpInside];

         // 设置 headerBtn 内容水平对齐方式
           headerBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;

效果图：



代码MVC模式：

Model：

//
//  QJFriend.h
//  11-QQ好友列表
//
//  Created by 瞿杰 on 15/10/3.
//  Copyright © 2015年 itcast. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface QJFriend : NSObject

@property(nonatomic,copy)NSString * icon;
@property(nonatomic,copy)NSString * intro;
@property(nonatomic,copy)NSString * name;
@property(nonatomic,assign,getter=isVip)BOOL vip;

+ (instancetype)friendWithDictionary:(NSDictionary *)dic;
- (instancetype)initWithDictionary:(NSDictionary *)dic;

@end

//
//  QJFriend.m
//  11-QQ好友列表
//
//  Created by 瞿杰 on 15/10/3.
//  Copyright © 2015年 itcast. All rights reserved.
//

#import "QJFriend.h"

@implementation QJFriend

+ (instancetype)friendWithDictionary:(NSDictionary *)dic{
return [[self alloc] initWithDictionary:dic];
}
- (instancetype)initWithDictionary:(NSDictionary *)dic{

if (self = [super init]) {
self.icon = dic[@"icon"];
self.name = dic[@"name"];
self.intro = dic[@"intro"];
self.vip = [dic[@"vip"] intValue];
}
return self;
}

@end

//
//  QJFriendGroup.h
//  11-QQ好友列表
//
//  Created by 瞿杰 on 15/10/3.
//  Copyright © 2015年 itcast. All rights reserved.
//

#import <Foundation/Foundation.h>

@class QJFriend;

@interface QJFriendGroup : NSObject
/** 存放的是QJFrined模型 */
@property(nonatomic,strong)NSArray * friends;
@property(nonatomic,copy)NSString * name;
@property(nonatomic,assign)int online;
@property(nonatomic,assign,getter=isGroupOpen)BOOL groupOpened;

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

@end

//
//  QJFriendGroup.m
//  11-QQ好友列表
//
//  Created by 瞿杰 on 15/10/3.
//  Copyright © 2015年 itcast. All rights reserved.
//

#import "QJFriendGroup.h"
#import "QJFriend.h"

@implementation QJFriendGroup

+ (instancetype)friendGroupWithDictionary:(NSDictionary *)dic{
return  [[QJFriendGroup alloc]initWithDictionary:dic];
}
- (instancetype)initWithDictionary:(NSDictionary *)dic{
if (self = [super init]) {
self.name = dic[@"name"];
self.online = [dic[@"online"] intValue];
self.friends = dic[@"friends"];
self.groupOpened = NO;
NSMutableArray * friends = [NSMutableArray array];
for (NSDictionary * dict in self.friends ) {
QJFriend * friendData = [QJFriend friendWithDictionary:dict];
[friends addObject:friendData];
}
self.friends = friends ;
}

return self;
}

@end

View:

//
//  QJFriendCell.h
//  11-QQ好友列表
//
//  Created by 瞿杰 on 15/10/3.
//  Copyright © 2015年 itcast. All rights reserved.
//

#import <UIKit/UIKit.h>

@class QJFriend;
@interface QJFriendCell : UITableViewCell

@property (nonatomic , weak)QJFriend * friendData;

+ (instancetype)friendCellWithTableView:(UITableView *)tableView;

@end

//
//  QJFriendCell.m
//  11-QQ好友列表
//
//  Created by 瞿杰 on 15/10/3.
//  Copyright © 2015年 itcast. All rights reserved.
//

#import "QJFriendCell.h"
#import "QJFriend.h"

@implementation QJFriendCell

+ (instancetype)friendCellWithTableView:(UITableView *)tableView{
static NSString * ID = @"friendCell";
QJFriendCell * cell = [tableView dequeueReusableCellWithIdentifier:ID];
if (cell == nil) {
cell = [[self alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
}
return cell;
}

- (void)setFriendData:(QJFriend *)friendData{
_friendData = friendData;

self.imageView.image = [UIImage imageNamed:friendData.icon];
self.textLabel.text = friendData.name;
self.detailTextLabel.text = friendData.intro;
}

@end

主要：

//
//  QJHeaderView.h
//  11-QQ好友列表
//
//  Created by 瞿杰 on 15/10/3.
//  Copyright © 2015年 itcast. All rights reserved.
//

#import <UIKit/UIKit.h>

@class QJFriendGroup , QJHeaderView;

@protocol QJHeaderViewDelegate <NSObject>

@optional
- (void)headerViewDidClicked:(QJHeaderView *)headerView;

@end

@interface QJHeaderView : UITableViewHeaderFooterView

@property (nonatomic , weak)QJFriendGroup * friendGroup;
@property (nonatomic , weak)id<QJHeaderViewDelegate> delegate;

+ (instancetype)headerViewWithTableView:(UITableView *)tableViw;

@end

//
//  QJHeaderView.m
//  11-QQ好友列表
//
//  Created by 瞿杰 on 15/10/3.
//  Copyright © 2015年 itcast. All rights reserved.
//

#import "QJHeaderView.h"
#import "QJFriendGroup.h"

@interface QJHeaderView ()

@property (nonatomic , weak)UIButton * headerBtn;
@property (nonatomic , weak)UILabel * headerLabel;

- (void)headerViewDidClicked;
@end

@implementation QJHeaderView

/** 创建一个headerView */
+ (instancetype)headerViewWithTableView:(UITableView *)tableViw{
static NSString * ID = @"headerView";
// 找可重用的headerView
QJHeaderView * headerView = [tableViw dequeueReusableHeaderFooterViewWithIdentifier:ID];
if (headerView == nil) {
headerView = [[QJHeaderView alloc]initWithReuseIdentifier:ID];
}
//    headerView.friendGroup.groupOpened = NO;
return headerView ;
}
/** 重写初始化方法 添加控件 */
- (instancetype)initWithReuseIdentifier:(NSString *)reuseIdentifier{

if (self = [super initWithReuseIdentifier:reuseIdentifier]) {
// 1.添加一个按妞
UIButton * headerBtn = [[UIButton alloc]init];
// 设置内边距
headerBtn.titleEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
headerBtn.contentEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
// 设置背景图片
[headerBtn setBackgroundImage:[UIImage imageNamed:@"buddy_header_bg"] forState:UIControlStateNormal];
[headerBtn setBackgroundImage:[UIImage imageNamed:@"buddy_header_bg_highlighted"] forState:UIControlStateHighlighted];
// 设置button中的Image时必须要调用方法，不能用.ImageView.image来设置
[headerBtn setImage:[UIImage imageNamed:@"buddy_header_arrow"] forState:(UIControlStateNormal)] ;

// * 下面两个设置使得图片转换角度时不变形
// 当国图片超出bounds的边界时 是否需要剪掉 超出的部分
headerBtn.imageView.clipsToBounds = NO;
// 设置图片内容模式居中
headerBtn.imageView.contentMode = UIViewContentModeCenter;

// 设置title的字体颜色
[headerBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal ];
// 添加 headerBtn 的监听点击事件
[headerBtn addTarget:self action:@selector(headerViewDidClicked) forControlEvents:UIControlEventTouchUpInside];
// 设置 headerBtn 内容水平对齐方式
headerBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
[self.contentView addSubview:headerBtn];
self.headerBtn = headerBtn ;

// 2.添加一个标签控件
UILabel * headerLabel = [[UILabel alloc]init];
headerLabel.textAlignment = NSTextAlignmentRight;
headerLabel.textColor = [UIColor grayColor];
[self.contentView addSubview:headerLabel];
self.headerLabel = headerLabel ;

}
return self ;
}

/** 当 headerBtn 按妞被点击时调用  */
- (void)headerViewDidClicked{
// 状态变换
self.friendGroup.groupOpened = !self.friendGroup.groupOpened;
// 图片转一个角度
if (self.friendGroup.isGroupOpen){
self.headerBtn.imageView.transform = CGAffineTransformMakeRotation(M_PI_2);
}
else{

self.headerBtn.imageView.transform = CGAffineTransformMakeRotation(0);
}
// 调用代理方法
if ([self.delegate respondsToSelector:@selector(headerViewDidClicked:)]) {
[self.delegate headerViewDidClicked:self];
}
}

/** 当初始化headerView完时，系统自动调用该方法设置子控件的frame */
- (void)layoutSubviews{
//    NSLog(@"%@ --- %@",NSStringFromCGRect(self.bounds),NSStringFromCGRect(self.frame));
#warning mark - 一定要调用，不然子控件有些功能用不了
// 注意：一定要初始化父对象
[super layoutSubviews];

// 设置contentView里的子控件位置
self.headerBtn.frame = self.bounds;

CGFloat W = 100;
CGFloat H = self.frame.size.height;
CGFloat Y = 0;
CGFloat X = self.frame.size.width - W - 10;
self.headerLabel.frame = CGRectMake(X, Y, W, H);
}

/** 初始化headerView中的内容 */
- (void)setFriendGroup:(QJFriendGroup *)friendGroup{

_friendGroup = friendGroup ;

// 设置headerBtn中的内容
[self.headerBtn setTitle:friendGroup.name forState:UIControlStateNormal];

// 设置headerLabel中的内容
self.headerLabel.text = [NSString stringWithFormat:@"%d/%lu",friendGroup.online,friendGroup.friends.count];
}

@end

Controller:

//
//  ViewController.h
//  11-QQ好友列表
//
//  Created by 瞿杰 on 15/10/3.
//  Copyright © 2015年 itcast. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

//
//  ViewController.m
//  11-QQ好友列表
//
//  Created by 瞿杰 on 15/10/3.
//  Copyright © 2015年 itcast. All rights reserved.
//

#import "ViewController.h"
#import "QJFriendGroup.h"
#import "QJFriendCell.h"
#import "QJHeaderView.h"

@interface ViewController ()<UITableViewDataSource,UITableViewDelegate,QJHeaderViewDelegate>

@property (weak, nonatomic) IBOutlet UITableView *tableView;

@property (strong,nonatomic)NSArray * friendGroups;

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];

self.tableView.dataSource = self ;
self.tableView.delegate = self;
// 设置每组每个cell的高度
self.tableView.rowHeight = 60;

}
- (BOOL)prefersStatusBarHidden{
return YES;
}

/** 初始化数据内容 */
- (NSArray *)friendGroups{
if (_friendGroups == nil) {
NSArray * groups = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle]pathForResource:@"friends.plist" ofType:nil] ];
NSMutableArray * friendGroups = [NSMutableArray array];
for (NSDictionary * dic in groups){
QJFriendGroup * friendGroup = [QJFriendGroup friendGroupWithDictionary:dic];
[friendGroups addObject:friendGroup];
}
_friendGroups = friendGroups ;
}
return _friendGroups ;
}

#pragma mark - tableView数据源方法

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return self.friendGroups.count;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
QJFriendGroup * group = self.friendGroups[section];
return (group.isGroupOpen ? group.friends.count : 0 );
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

// 创建一个Cell
QJFriendCell * cell = [QJFriendCell friendCellWithTableView:tableView];

// 设置数据
QJFriendGroup * group = self.friendGroups[indexPath.section];
QJFriend * friendData = group.friends[indexPath.row];
cell.friendData = friendData ;

return cell;
}
//- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
//    QJFriendGroup * group = self.friendGroups[section];
//    return group.name;
//}

#pragma mark - tableView代理方法

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
// 取得一个自定义的 headerView
QJHeaderView * headerView = [QJHeaderView headerViewWithTableView:tableView];

// 设置数据
headerView.friendGroup = self.friendGroups[section];

// 设置代理对象
headerView.delegate = self;

return headerView;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
return 60;
}

#pragma mark - QJHeaderView代理方法

- (void)headerViewDidClicked:(QJHeaderView *)headerView{
[self.tableView reloadData];
}

@end