UI基础--UITableView实现仿QQ好友列表页面

需求:类似于QQ好友列表页面的显示,有好友分组，有好友数量，在线人数，vip会员、展开分组时显示分组好友，合并分组时不显示：具体效果图如下：

分析：

1、展开分组时显示分组好友，该功能可以使用显示UITableViewCell的数据即可；

2、分组头可以考虑使用一个headerView来实现；

示例文件结构：

具体实现步骤:

1、自定义数据模型类，由于plist文件中包含了2个字典，所以需要写2个数据模型；

2、自定义cell，属性包括数据模型以及生成可重用cell的方法，由于系统自带的子控件即可满足实际要求，所以不用写frame模型了;

4、自定义HeaderView，包括模型数据属性和快速构造HeaderView的类方法，以及代理方法;

5、在控制器中写UITableView的 数据显示的方法;

 

具体代码：

Model:

 

//
//  JWFriend.h
//  12-24-FriendGroup
//
//  Created by xiaomoge on 14/12/24.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface JWFriend : NSObject
@property (nonatomic,copy) NSString *icon;
@property (nonatomic,copy) NSString *intro;
@property (nonatomic,copy) NSString *name;
@property (nonatomic,assign,getter=isVip) BOOL vip;
- (instancetype)initWithDic:(NSDictionary *)dic;
+ (instancetype)friendWithDic:(NSDictionary *)dic;
@end

 

//
//  JWFriend.m
//  12-24-FriendGroup
//
//  Created by xiaomoge on 14/12/24.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//

#import "JWFriend.h"

@implementation JWFriend
- (instancetype)initWithDic:(NSDictionary *)dic {
    if (self = [super init]) {
        [self setValuesForKeysWithDictionary:dic];//KVC的使用
    }
    return self;
}
+ (instancetype)friendWithDic:(NSDictionary *)dic {
    return [[self alloc] initWithDic:dic];
}
@end

//
//  JWFriendGroup.h
//  12-24-FriendGroup
//
//  Created by xiaomoge on 14/12/24.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface JWFriendGroup : NSObject
@property (nonatomic,strong) NSArray *friends;
@property (nonatomic,copy) NSString *name;
@property (nonatomic,assign) int online;
/*
 组头是否展开，默认为NO
 */
@property (nonatomic,assign,getter=isExpend) BOOL expend;
- (instancetype)initWithDic:(NSDictionary *)dic;
+ (instancetype)friendGroupWithDic:(NSDictionary *)dic;
+ (NSMutableArray *)friendGroupList;
@end

//
//  JWFriendGroup.m
//  12-24-FriendGroup
//
//  Created by xiaomoge on 14/12/24.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//

#import "JWFriendGroup.h"
#import "JWFriend.h"
@implementation JWFriendGroup
- (instancetype)initWithDic:(NSDictionary *)dic {
    if (self = [super init]) {
        [self setValuesForKeysWithDictionary:dic];
    }
    return self;
}
+ (instancetype)friendGroupWithDic:(NSDictionary *)dic {
    return [[self alloc] initWithDic:dic];
}

+ (NSMutableArray *)friendGroupList {
    NSArray *array = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"friends" ofType:@"plist"]];
    
    NSMutableArray *tempArray = [NSMutableArray array];
    
    for (NSDictionary *dic in array) {//字典转模型
        JWFriendGroup *friendGroup = [JWFriendGroup friendGroupWithDic:dic];
        
        NSMutableArray *tem = [NSMutableArray array];
        for (NSDictionary *dict in friendGroup.friends) {//模型里面还带有子弹，所以继续进行字典转模型步骤
            JWFriend *friend = [JWFriend friendWithDic:dict];
            [tem addObject:friend];
        }
        friendGroup.friends = tem;//转完模型后记得重新赋值
        [tempArray addObject:friendGroup];
    }
    return tempArray;
}
@end

View:

//
//  JWFriendCell.h
//  12-24-FriendGroup
//
//  Created by xiaomoge on 14/12/24.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//

#import <UIKit/UIKit.h>
@class JWFriend;
@interface JWFriendCell : UITableViewCell
@property (nonatomic,strong) JWFriend *friendDatas;
+ (instancetype)cellWithTableView:(UITableView *)tableView;
@end

//
//  JWFriendCell.m
//  12-24-FriendGroup
//
//  Created by xiaomoge on 14/12/24.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//

#import "JWFriendCell.h"
#import "JWFriend.h"
@implementation JWFriendCell
//快速构造一个可重用的cee
+ (instancetype)cellWithTableView:(UITableView *)tableView {
    static NSString *resue = @"cell";
    JWFriendCell *cell = [tableView dequeueReusableCellWithIdentifier:resue];
    if (!cell) {
        cell = [[self alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:resue];
    }
    return cell;
}
//重写set方法,给各子控件赋值
- (void)setFriendDatas:(JWFriend *)friendDatas {
    _friendDatas = friendDatas;
    self.textLabel.text = friendDatas.name;
    self.detailTextLabel.text = friendDatas.intro;
    self.imageView.image = [UIImage imageNamed:friendDatas.icon];
    self.textLabel.textColor = friendDatas.isVip ? [UIColor redColor] : [UIColor blackColor];//如果是vip，那么呢称字体为红色
}
@end

//
//  JWFriendHeaderView.h
//  12-24-FriendGroup
//
//  Created by xiaomoge on 14/12/24.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//

#import <UIKit/UIKit.h>
@class JWFriendGroup,JWFriendHeaderView;
@protocol JWFriendHeaderViewDelegate <NSObject>
@optional
- (void)clickNameBtn:(JWFriendHeaderView *)headerView;

@end
@interface JWFriendHeaderView : UITableViewHeaderFooterView
@property (nonatomic,strong) JWFriendGroup *friendGroup;
@property (nonatomic,assign) id<JWFriendHeaderViewDelegate> delegate;
+ (instancetype)headerViewWithTableView:(UITableView *)tableView;
@end

//
//  JWFriendHeaderView.m
//  12-24-FriendGroup
//
//  Created by xiaomoge on 14/12/24.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//

#import "JWFriendHeaderView.h"
#import "JWFriendGroup.h"
@interface JWFriendHeaderView ()
@property (nonatomic,weak) UIButton *nameView;
@property (nonatomic,weak) UILabel *countLabel;
@end
@implementation JWFriendHeaderView
//快速构造一个可重用的组头
+ (instancetype)headerViewWithTableView:(UITableView *)tableView {
    static NSString *resue = @"head";//缓存池标识
    JWFriendHeaderView *headerView = [tableView dequeueReusableCellWithIdentifier:resue];
    if (!headerView) {
        headerView = [[self alloc] initWithReuseIdentifier:resue];
    }
    return headerView;
}
//重写方法，初始化控件
- (instancetype)initWithReuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithReuseIdentifier:reuseIdentifier]) {
        UIButton *nameBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        [self.contentView addSubview:nameBtn];
        self.nameView = nameBtn;
        //按钮的一些属性的设置
        [nameBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        [nameBtn setImage:[UIImage imageNamed:@"buddy_header_arrow"] forState:UIControlStateNormal];
        [nameBtn setBackgroundImage:[UIImage imageNamed:@"buddy_header_bg"] forState:UIControlStateNormal];
        [nameBtn setBackgroundImage:[UIImage imageNamed:@"buddy_header_bg_highlighted"] forState:UIControlStateHighlighted];
        nameBtn.contentEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);//按钮内容的间距，左间距为10
        nameBtn.titleEdgeInsets =  UIEdgeInsetsMake(0, 10, 0, 0);//文字内容的间距，左间距为10
        nameBtn.imageView.contentMode = UIViewContentModeCenter;//不缩放按钮图片
        nameBtn.imageView.clipsToBounds = NO;//图片超出部分不裁剪
        nameBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;//设置左对齐
        [nameBtn addTarget:self action:@selector(nameClick) forControlEvents:UIControlEventTouchUpInside];//注册按钮点击事件
        
        UILabel *countLabel  = [[UILabel alloc] init];
        [self.contentView addSubview:countLabel];
        self.countLabel = countLabel;
        //文本标签的一些属性的设置
        countLabel.textAlignment = NSTextAlignmentRight;
        countLabel.font = [UIFont systemFontOfSize:14];
        countLabel.textColor = [UIColor grayColor];
    }
    return self;
}
//这个方法改变了组头的frame后就会调用，那么可以在这里设置frame了
- (void)layoutSubviews {
    [super layoutSubviews];//记得必须先实现父类的该方法
    self.nameView.frame = self.bounds;
    CGFloat countX = self.bounds.size.width - 10 - 150;
    self.countLabel.frame = CGRectMake(countX, 0, 150, 44);
}
//点击组头按钮事件
- (void)nameClick {
    self.friendGroup.expend = !self.friendGroup.isExpend;//获取组头是否展开状态
    [self expend];//调用封装的一个方法，如果展开，那么图片旋转90度，否则不展开
    if ([self.delegate respondsToSelector:@selector(clickNameBtn:)]) {//通知代理，点击了组头按钮
        [self.delegate clickNameBtn:self];
    }
}
//重写set方法，给各控件赋值
- (void)setFriendGroup:(JWFriendGroup *)friendGroup {
    _friendGroup = friendGroup;//这句记得写，否则会造成没有内容显示
    [self.nameView setTitle:friendGroup.name forState:UIControlStateNormal];
    self.countLabel.text = [NSString stringWithFormat:@"%d/%lu",friendGroup.online,(unsigned long)friendGroup.friends.count];
    [self expend];//调用封装的一个方法，如果展开，那么图片旋转90度，否则不展开
}
//封装的方法,如果展开，那么图片旋转90度，否则旋转度为0
- (void)expend {
    CGFloat angle = self.friendGroup.isExpend ? M_PI_2 : 0;
    [UIView animateWithDuration:0.5 animations:^{
        self.nameView.imageView.transform = CGAffineTransformMakeRotation(angle);
    }];
}
@end

Controller:

//
//  ViewController.m
//  12-24-FriendGroup
//
//  Created by xiaomoge on 14/12/24.
//  Copyright (c) 2014年 xiaomoge. All rights reserved.
//

#import "ViewController.h"
#import "JWFriend.h"
#import "JWFriendGroup.h"
#import "JWFriendHeaderView.h"
#import "JWFriendCell.h"
@interface ViewController () <JWFriendHeaderViewDelegate>
@property (nonatomic,strong) NSArray *friendGroup;
@end

@implementation ViewController
#pragma mark - 隐藏状态栏
- (BOOL)prefersStatusBarHidden {
    return YES;
}
#pragma mark - 懒加载
- (NSArray *)friendGroup {
    if (!_friendGroup) {
        _friendGroup = [JWFriendGroup friendGroupList];
    }
    return _friendGroup;
}
- (void)viewDidLoad {
    [super viewDidLoad];
    //设置组头的高度
    self.tableView.sectionHeaderHeight = 44;
}
#pragma mark - tableViewDatasouce的方法
//显示多少组数据
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return self.friendGroup.count;
}
//每组数据显示多少行数据
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [self.friendGroup[section] isExpend ]?[self.friendGroup[section] friends].count : 0;//这里使用了三目运算符，主要是判断如果组头是展开的，那么显示行数据，否则显示为0
}
//显示每个cell的内容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    JWFriendCell *cell = [JWFriendCell cellWithTableView:tableView];
    cell.friendDatas = [self.friendGroup[indexPath.section] friends][indexPath.row];
    return cell;
}
#pragma mark - JWFriendHeaderView的方法
//显示组头view的内容
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    JWFriendHeaderView *headerView = [JWFriendHeaderView headerViewWithTableView:tableView];
    headerView.friendGroup = self.friendGroup[section];
    headerView.delegate = self;
    headerView.tag = section;//把section赋值给组头的tag
    return headerView;
}
#pragma mark - JWFriendHeaderViewDelegate的方法
- (void)clickNameBtn:(JWFriendHeaderView *)headerView {
    NSIndexSet *indexSet = [NSIndexSet indexSetWithIndex:headerView.tag];
    [self.tableView reloadSections:indexSet withRowAnimation:UITableViewRowAnimationNone];//判断点击的是哪个组头，然后加载对应的数据
}
@end