猫猫学IOS（十九）UI之QQ好友列表

猫猫分享，必须精品

素材代码地址：http://blog.csdn.net/u013357243/article/details/45042217
原文地址：http://blog.csdn.net/u013357243?viewmode=contents

先看效果图

哈哈，这次猫猫给来个动态的图片，这个看起来带劲

实现思路

首先建立模型

这里用到的是一个双层的模型。

cell的实现

这里一看其实就知道是一个tableView，我们自定义cell实现细节

headerView的实现

每一组的标题头其实都是headerVIew这里都是按钮需要我们自己设计。

代码实现

双层模型的代码

FriendCell:

#import <Foundation/Foundation.h>
#import "NJGlobal.h"

@interface NJFriendModel : NSObject
// 头像
@property (nonatomic, copy) NSString *icon;
// 简介
@property (nonatomic, copy) NSString *intro;
// 昵称
@property (nonatomic, copy) NSString *name;
// 是否是vip
@property (nonatomic, assign, getter = isVip) BOOL vip;


NJInitH(friend)
@end

QQGroupModel:

#import <Foundation/Foundation.h>
#import "NJGlobal.h"

@interface NJQQGroupModel : NSObject
/// 存放当前组所有的好友信息(好友模型)
@property (nonatomic, strong) NSArray *friends;

// 分组名称
@property (nonatomic, copy) NSString *name;

// 在线人数
@property (nonatomic, copy) NSString *online;

// 记录当前组是否需要打开
@property (nonatomic, assign, getter = isOpen) BOOL open;

NJInitH(qqGroup)
@end

@implementation NJQQGroupModel

- (instancetype)initWithDict:(NSDictionary *)dict
{
    if (self = [super init]) {
        // 1.将字典转换成模型
        [self setValuesForKeysWithDictionary:dict];
        // 定义数组保存转换后的模型
        NSMutableArray *models = [NSMutableArray arrayWithCapacity:self.friends.count];
        // 2.特殊处理friends中的数据
        for (NSDictionary *dict in self.friends) {
            // 2.1转换为模型
            NJFriendModel *friend = [NJFriendModel friendWithDict:dict];
            [models addObject:friend];

        }
        self.friends = models;
    }
    return self;
}

+ (instancetype)qqGroupWithDict:(NSDictionary *)dict
{
    return [[self alloc] initWithDict:dict];

}
@end

cell 的自定义

#import <UIKit/UIKit.h>
@class NJFriendModel;

@interface NJFriendCell : UITableViewCell

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

@property (nonatomic, strong) NJFriendModel *friendData;

@end

@implementation NJFriendCell
+ (instancetype)cellWithTableView:(UITableView *)tableView
{
    static NSString *identifier = @"friend";
    NJFriendCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    if (cell == nil) {
        cell = [[NJFriendCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:identifier];
    }
    return cell;
}

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

//    1.设置头像
    self.imageView.image = [UIImage imageNamed:_friendData.icon];
//    2.设置昵称
    self.textLabel.text = _friendData.name;
//    3.设置简介
    self.detailTextLabel.text = _friendData.intro;

//    4.判断是否是会员
    if (_friendData.isVip) {
        [self.textLabel setTextColor:[UIColor redColor]];
    }else
    {
        [self.textLabel setTextColor:[UIColor blackColor]];
    }
}
@end

header的自定义

#import "NJHeaderView.h"
#import "NJQQGroupModel.h"

#import <UIKit/UIKit.h>
@class NJFriendModel;

@interface NJFriendCell : UITableViewCell

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

@property (nonatomic, strong) NJFriendModel *friendData;

@end

@implementation NJFriendCell
+ (instancetype)cellWithTableView:(UITableView *)tableView
{
    static NSString *identifier = @"friend";
    NJFriendCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    if (cell == nil) {
        cell = [[NJFriendCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:identifier];
    }
    return cell;
}

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

    //    1.设置头像
    self.imageView.image = [UIImage imageNamed:_friendData.icon];
    //    2.设置昵称
    self.textLabel.text = _friendData.name;
    //    3.设置简介
    self.detailTextLabel.text = _friendData.intro;

    //    4.判断是否是会员
    if (_friendData.isVip) {
        [self.textLabel setTextColor:[UIColor redColor]];
    }else
    {
        [self.textLabel setTextColor:[UIColor blackColor]];
    }
}
@end



@interface NJHeaderView ()
@property (nonatomic, weak) UIButton *btn;
@property (nonatomic, weak) UILabel *label;
@end

@implementation NJHeaderView

// 创建头部视图
+ (instancetype)headerViewWithTableView:(UITableView *)tableView
{
//    1.创建头部视图
    static NSString *identifier = @"header";
    NJHeaderView *headderView =  [tableView dequeueReusableHeaderFooterViewWithIdentifier:identifier];
    if (headderView == nil) {
        headderView = [[NJHeaderView alloc] initWithReuseIdentifier:identifier];
    }
    return headderView;
}

// 但凡在init方法中获取到的frame都是0
- (id)initWithReuseIdentifier:(NSString *)reuseIdentifier
{
    if (self = [super initWithReuseIdentifier:reuseIdentifier]) {
//        1.添加子控件
        // 1.1添加按钮
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        // 监听按钮的点击事件
        [btn addTarget:self action:@selector(btnOnClick:) forControlEvents:UIControlEventTouchUpInside];
        // 设置按钮的背景图片
        [btn setBackgroundImage:[UIImage imageNamed:@"buddy_header_bg"] forState:UIControlStateNormal];
        [btn setBackgroundImage:[UIImage imageNamed:@"buddy_header_bg_highlighted"] forState:UIControlStateHighlighted];

        // 设置按钮上的尖尖图片
        [btn setImage:[UIImage imageNamed:@"buddy_header_arrow"] forState:UIControlStateNormal];
        // 1.设置按钮的内容左对齐
        btn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
        // 2.设置按钮的内边距,然按钮的内容距离左边有一定的距离
        btn.contentEdgeInsets = UIEdgeInsetsMake(0, 20, 0, 0);
        // 3.设置按钮的标题和图片之间的距离
        btn.titleEdgeInsets = UIEdgeInsetsMake(0, 20, 0, 0);
//        btn.imageEdgeInsets
        // 设置按钮标题颜色
        [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

        // 设置btn中的图片不填充整个imageview
        btn.imageView.contentMode = UIViewContentModeCenter;
        // 超出范围的图片不要剪切
//        btn.imageView.clipsToBounds = NO;
        btn.imageView.layer.masksToBounds = NO;

        [self addSubview:btn];
        self.btn = btn;

        // 1.2添加label
        UILabel *label = [[UILabel alloc] init];
        // label.backgroundColor = [UIColor greenColor];
        // 设置文本右对齐
        label.textAlignment = NSTextAlignmentRight;
        label.textColor = [UIColor grayColor];

        [self addSubview:label];
        self.label = label;
    }

    //  NSLog(@"initWithReuseIdentifier = %@", NSStringFromCGRect(self.frame));
    return  self;
}
// 该方法在控件的frame被改变的时候就会调用
// 该方法一般用于调整子控件的位置
- (void)layoutSubviews
{
#warning 切记重写layoutSubviews方法一定要调用父类的layoutSubviews
    [super layoutSubviews];
//    1.设置按钮的frame
    self.btn.frame = self.bounds;
//    2.设置label的frame
    CGFloat padding = 20;// 间隙
    CGFloat labelY = 0;
    CGFloat labelH = self.bounds.size.height;
    CGFloat labelW = 150;
    CGFloat labelX = self.bounds.size.width - padding - labelW;
    self.label.frame = CGRectMake(labelX, labelY, labelW, labelH);
}

- (void)btnOnClick:(UIButton *)btn
{
    NSLog(@"按钮被点击了");
//     1.修改组模型的isOpen属性
//    修改模型数据数据
    self.qqGroup.open = !self.qqGroup.isOpen;
//    2. 刷新表格(通知代理)
    if ([self.delegate respondsToSelector:@selector(headerViewDidClickHeaderView:)]) {
        [self.delegate headerViewDidClickHeaderView:self];
    }

//    3.修改btn上图片,让图片旋转
    // self.btn.imageView.transform = CGAffineTransformMakeRotation(M_PI_2);

//    NSLog(@"%p %@", self, self.qqGroup.name);
}

#pragma mark - 当一个控件被添加到其它视图上的时候会调用以下方法
// 已经被添加到父视图上的时候会调用
- (void)didMoveToSuperview
{
    // 在这个方法中就快要拿到最新的被添加到tableview上的头部视图修改它的图片
    if (self.qqGroup.isOpen) {
        self.btn.imageView.transform = CGAffineTransformMakeRotation(M_PI_2);
    }
}
// 即将被添加到父视图上的时候会调用
- (void)willMoveToSuperview:(UIView *)newSuperview
{
    // NSLog(@"willMoveToSuperview");
}

- (void)setQqGroup:(NJQQGroupModel *)qqGroup
{
    _qqGroup = qqGroup;

//    1.设置按钮上的文字
    [self.btn setTitle:_qqGroup.name forState:UIControlStateNormal];
//    2.设置在线人数
    self.label.text = [NSString stringWithFormat:@"%@/%d",  _qqGroup.online, _qqGroup.friends.count];
}
@end

控制器代码

#import "NJViewController.h"
#import "NJQQGroupModel.h"
#import "NJFriendModel.h"
#import "NJFriendCell.h"
#import "NJHeaderView.h"

@interface NJViewController ()<NJHeaderViewDelegate>
// 保存所有的分组数据
@property (nonatomic, strong) NSArray *qqGroups;

@end

@implementation NJViewController



#pragma mark - 懒加载
- (NSArray *)qqGroups
{
    if (_qqGroups == nil) {
        NSString *fullPath = [[NSBundle mainBundle] pathForResource:@"friends.plist" ofType:nil];
        NSArray *dictArray = [NSArray arrayWithContentsOfFile:fullPath];
        NSMutableArray *models = [NSMutableArray arrayWithCapacity:dictArray.count];
        for (NSDictionary *dict in dictArray) {
            NJQQGroupModel *qqGroip = [NJQQGroupModel qqGroupWithDict:dict];
            [models addObject:qqGroip];
        }
        self.qqGroups = [models copy];
    }
    return _qqGroups;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
}

#pragma mark - 数据源方法
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return self.qqGroups.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // 1.取出对应的组模型
    NJQQGroupModel *qqGroup = self.qqGroups[section];
    // 2.返回对应组中的好友数
//    return qqGroup.friends.count;
//    return 0;
    if (qqGroup.isOpen) {
        // 代表要展开
        return qqGroup.friends.count;
    }else
    {
        // 代表要合拢
        return 0;
    }
}

- (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 1.创建cell
    NJFriendCell *cell = [NJFriendCell cellWithTableView:tableView];
    // 2.传递模型
    // 2.1.取出对应的组模型
    NJQQGroupModel *qqGroup = self.qqGroups[indexPath.section];
    NJFriendModel *friend = qqGroup.friends[indexPath.row];
    cell.friendData = friend;

    // 3.返回cell
    return cell;
}

#pragma mark - NJHeaderViewDelegate
- (void)headerViewDidClickHeaderView:(NJHeaderView *)headerView
{
    // 重新调用数据源的方法加载数据
    [self.tableView reloadData];
}

#pragma mark - 代理方法
// 当一个分组标题进入视野的时候就会调用该方法
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
//    1.创建头部视图, 头部视图有默认的宽高,是系统自动设置
    NJHeaderView *headerView = [NJHeaderView headerViewWithTableView:tableView];
    // 设置当前控制器为代理
    headerView.delegate = self;

//    2.传递模型
    NJQQGroupModel *qqGroup =  self.qqGroups[section];
//    0 - 0x8fa7ef0
    headerView.qqGroup = qqGroup;
    NSLog(@"%d - %p", section, headerView);
//    3.返回头部视图
    return headerView;

}
// 设置分组头部标题的高度
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 44;
}

- (BOOL)prefersStatusBarHidden
{
    return YES;
}
@end

ps：新建iOS交流学习群：304570962
可以加猫猫QQ：1764541256 或则微信znycat
让我们一起努力学习吧。
原文：http://blog.csdn.net/u013357243?viewmode=contents