第二十七篇：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