iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

一、项目结构和plist文件

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

二、实现代码

1.说明:

主控制器直接继承UITableViewController

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

// YYViewController.h
// 02-QQ好友列表(基本数据的加载)
//
// Created by apple on 14-5-31.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface YYViewController : UITableViewController

@end


iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

在storyboard中进行了关联

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

2.代码

数据模型部分:

YYQQGroupModel.h文件

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

//
// YYQQGroupModel.h
// 02-QQ好友列表(基本数据的加载)
//
// Created by apple on 14-5-31.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface YYQQGroupModel : NSObject
/**
* 名称属性
*/
@property(nonatomic,copy)NSString *name;
/**
* 是否在线
*/
@property(nonatomic,copy)NSString *online;
/**
* 好友列表
*/
@property(nonatomic,strong)NSArray *friends;

-(instancetype)initWithDict:(NSDictionary *)dict;
+(instancetype) qqGroupModelWithDict:(NSDictionary *)dict;
@end

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

YYQQGroupModel.m文件

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

//
// YYQQGroupModel.m
// 02-QQ好友列表(基本数据的加载)
//
// Created by apple on 14-5-31.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYQQGroupModel.h"
#import "YYFriendsModel.h"

@implementation YYQQGroupModel
-(instancetype)initWithDict:(NSDictionary *)dict
{
if (self=[super init]) {
//将字典转换为模型
[self setValuesForKeysWithDictionary:dict];

//定义一个数组来保存转换后的模型
NSMutableArray *models=[NSMutableArray arrayWithCapacity:self.friends.count];
for (NSDictionary *dict in self.friends) {
YYFriendsModel *friends=[YYFriendsModel friendsWithDict:dict];
[models addObject:friends];
}
_friends=[models copy];
}
return self;
}

+(instancetype)qqGroupModelWithDict:(NSDictionary *)dict
{
return [[self alloc]initWithDict:dict];
}
@end

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

YYFriendsModel.h文件

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

//
// YYFriendsModel.h
// 02-QQ好友列表(基本数据的加载)
//
// Created by apple on 14-5-31.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface YYFriendsModel : NSObject
/**
* 每个好友的名称
*/
@property(nonatomic,copy)NSString *name;
/**
*每个好友的头像
*/
@property(nonatomic,copy)NSString *icon;
/**
* 每个好友的个性签名
*/
@property(nonatomic,copy)NSString *intro;
/**
* 该好友是否是vip
*/
@property(nonatomic,assign,getter = isVip)BOOL vip;

-(instancetype)initWithDict:(NSDictionary *)dict;
+(instancetype)friendsWithDict:(NSDictionary *)dict;
@end


iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

YYFriendsModel.m文件

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

//
// YYFriendsModel.m
// 02-QQ好友列表(基本数据的加载)
//
// Created by apple on 14-5-31.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYFriendsModel.h"

@implementation YYFriendsModel
-(instancetype)initWithDict:(NSDictionary *)dict
{
if (self=[super init]) {
[self setValuesForKeysWithDictionary:dict];
}
return self;
}

+(instancetype)friendsWithDict:(NSDictionary *)dict
{
return [[self alloc]initWithDict:dict];
}
@end

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

视图部分

YYfriendCell.h文件

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

//
// YYfriendCell.h
// 02-QQ好友列表(基本数据的加载)
//
// Created by apple on 14-5-31.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import <UIKit/UIKit.h>
@class YYFriendsModel;
@interface YYfriendCell : UITableViewCell

@property(nonatomic,strong)YYFriendsModel *friends;

+(instancetype)cellWithTableview:(UITableView *)tableView;
@end


iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

YYfriendCell.m文件

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

//
// YYfriendCell.m
// 02-QQ好友列表(基本数据的加载)
//
// Created by apple on 14-5-31.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYfriendCell.h"
#import "YYFriendsModel.h"
//私有扩展
@interface YYfriendCell()


@end
@implementation YYfriendCell

+(YYfriendCell *)cellWithTableview:(UITableView *)tableView
{
static NSString *identifier=@"qq";
YYfriendCell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];
if (cell==nil) {
//这里使用系统自带的样式
cell=[[YYfriendCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:identifier];
NSLog(@"创建一个cell");
}
return cell;
}

-(void)setFriends:(YYFriendsModel *)friends
{
_friends=friends;
//1.设置头像
self.imageView.image=[UIImage imageNamed:_friends.icon];
//2.设置昵称
self.textLabel.text=_friends.name;
//3.设置简介
self.detailTextLabel.text=_friends.intro;
//判断是否是会员
/**
* 这里有个注意点,如果不写else设置为黑色,会怎么样?
*/
if (_friends.isVip) {
[self.textLabel setTextColor:[UIColor redColor]];
}else
{
[self.textLabel setTextColor:[UIColor blackColor]];
}
}
@end


iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

主控制器部分

YYViewController.m文件

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

//
// YYViewController.m
// 02-QQ好友列表(基本数据的加载)
//
// Created by apple on 14-5-31.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYViewController.h"
#import "YYQQGroupModel.h"
#import "YYfriendCell.h"
#import "YYFriendsModel.h"

@interface YYViewController ()
/**
* 用来保存所有的分组数据
*/
@property(nonatomic,strong)NSArray *groupFriends;
@end

@implementation YYViewController
#pragma mark-懒加载
//1.先拿到数据,实现懒加载
-(NSArray *)groupFriends
{
if (_groupFriends==nil) {
NSString *fullpath=[[NSBundle mainBundle]pathForResource:@"friends.plist" ofType:nil];
NSArray *arrayM=[NSArray arrayWithContentsOfFile:fullpath];

NSMutableArray *models=[NSMutableArray arrayWithCapacity:arrayM.count];
for (NSDictionary *dict in arrayM) {
YYQQGroupModel *group=[YYQQGroupModel qqGroupModelWithDict:dict];
[models addObject:group];
}
_groupFriends=[models copy];
}
return _groupFriends;
}

- (void)viewDidLoad
{
[super viewDidLoad];
self.tableView.sectionHeaderHeight = 100;
}

#pragma mark- 设置数据源
//返回多少组
//为什么这里不会智能提示?因为这些方法是uitableview协议里的,默认并没有遵守协议,让主控制器类继承uitableviewcontroller后,就已经遵守了
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return self.groupFriends.count;
}
//每组返回多少行
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
//取出对应的组模型
YYQQGroupModel *group=self.groupFriends[section];
//返回对应组中的好友数
return group.friends.count;
}
//每组每行的内容
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
//1.创建cell
YYfriendCell *cell=[YYfriendCell cellWithTableview:tableView];

//2.设置cell
YYQQGroupModel *group=self.groupFriends[indexPath.section];
YYFriendsModel *friends=group.friends[indexPath.row];
cell.friends=friends;
//3.返回一个cell
return cell;
}


#pragma mark - 代理方法
// 当一个分组标题进入视野的时候就会调用该方法
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
// 1.创建头部视图
UIView *view = [[UIView alloc] init];
view.backgroundColor = [UIColor grayColor];
// 2.返回头部视图
return view;
}

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

#pragma mark 隐藏状态栏
-(BOOL)prefersStatusBarHidden
{
return YES;
}
@end

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

实现的简陋效果:

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

三、注意点

(1)设置头部视图的方法

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

(2)在重写set方法时,应该考虑到回滚。

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

 
 

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

一、项目结构和plist文件

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

二、实现代码

1.说明:

主控制器直接继承UITableViewController

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

// YYViewController.h
// 02-QQ好友列表(基本数据的加载)
//
// Created by apple on 14-5-31.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface YYViewController : UITableViewController

@end


iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

在storyboard中进行了关联

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

2.代码

数据模型部分:

YYQQGroupModel.h文件

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

//
// YYQQGroupModel.h
// 02-QQ好友列表(基本数据的加载)
//
// Created by apple on 14-5-31.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface YYQQGroupModel : NSObject
/**
* 名称属性
*/
@property(nonatomic,copy)NSString *name;
/**
* 是否在线
*/
@property(nonatomic,copy)NSString *online;
/**
* 好友列表
*/
@property(nonatomic,strong)NSArray *friends;

-(instancetype)initWithDict:(NSDictionary *)dict;
+(instancetype) qqGroupModelWithDict:(NSDictionary *)dict;
@end

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

YYQQGroupModel.m文件

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

//
// YYQQGroupModel.m
// 02-QQ好友列表(基本数据的加载)
//
// Created by apple on 14-5-31.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYQQGroupModel.h"
#import "YYFriendsModel.h"

@implementation YYQQGroupModel
-(instancetype)initWithDict:(NSDictionary *)dict
{
if (self=[super init]) {
//将字典转换为模型
[self setValuesForKeysWithDictionary:dict];

//定义一个数组来保存转换后的模型
NSMutableArray *models=[NSMutableArray arrayWithCapacity:self.friends.count];
for (NSDictionary *dict in self.friends) {
YYFriendsModel *friends=[YYFriendsModel friendsWithDict:dict];
[models addObject:friends];
}
_friends=[models copy];
}
return self;
}

+(instancetype)qqGroupModelWithDict:(NSDictionary *)dict
{
return [[self alloc]initWithDict:dict];
}
@end

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

YYFriendsModel.h文件

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

//
// YYFriendsModel.h
// 02-QQ好友列表(基本数据的加载)
//
// Created by apple on 14-5-31.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface YYFriendsModel : NSObject
/**
* 每个好友的名称
*/
@property(nonatomic,copy)NSString *name;
/**
*每个好友的头像
*/
@property(nonatomic,copy)NSString *icon;
/**
* 每个好友的个性签名
*/
@property(nonatomic,copy)NSString *intro;
/**
* 该好友是否是vip
*/
@property(nonatomic,assign,getter = isVip)BOOL vip;

-(instancetype)initWithDict:(NSDictionary *)dict;
+(instancetype)friendsWithDict:(NSDictionary *)dict;
@end


iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

YYFriendsModel.m文件

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

//
// YYFriendsModel.m
// 02-QQ好友列表(基本数据的加载)
//
// Created by apple on 14-5-31.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYFriendsModel.h"

@implementation YYFriendsModel
-(instancetype)initWithDict:(NSDictionary *)dict
{
if (self=[super init]) {
[self setValuesForKeysWithDictionary:dict];
}
return self;
}

+(instancetype)friendsWithDict:(NSDictionary *)dict
{
return [[self alloc]initWithDict:dict];
}
@end

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

视图部分

YYfriendCell.h文件

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

//
// YYfriendCell.h
// 02-QQ好友列表(基本数据的加载)
//
// Created by apple on 14-5-31.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import <UIKit/UIKit.h>
@class YYFriendsModel;
@interface YYfriendCell : UITableViewCell

@property(nonatomic,strong)YYFriendsModel *friends;

+(instancetype)cellWithTableview:(UITableView *)tableView;
@end


iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

YYfriendCell.m文件

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

//
// YYfriendCell.m
// 02-QQ好友列表(基本数据的加载)
//
// Created by apple on 14-5-31.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYfriendCell.h"
#import "YYFriendsModel.h"
//私有扩展
@interface YYfriendCell()


@end
@implementation YYfriendCell

+(YYfriendCell *)cellWithTableview:(UITableView *)tableView
{
static NSString *identifier=@"qq";
YYfriendCell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];
if (cell==nil) {
//这里使用系统自带的样式
cell=[[YYfriendCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:identifier];
NSLog(@"创建一个cell");
}
return cell;
}

-(void)setFriends:(YYFriendsModel *)friends
{
_friends=friends;
//1.设置头像
self.imageView.image=[UIImage imageNamed:_friends.icon];
//2.设置昵称
self.textLabel.text=_friends.name;
//3.设置简介
self.detailTextLabel.text=_friends.intro;
//判断是否是会员
/**
* 这里有个注意点,如果不写else设置为黑色,会怎么样?
*/
if (_friends.isVip) {
[self.textLabel setTextColor:[UIColor redColor]];
}else
{
[self.textLabel setTextColor:[UIColor blackColor]];
}
}
@end


iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

主控制器部分

YYViewController.m文件

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

//
// YYViewController.m
// 02-QQ好友列表(基本数据的加载)
//
// Created by apple on 14-5-31.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYViewController.h"
#import "YYQQGroupModel.h"
#import "YYfriendCell.h"
#import "YYFriendsModel.h"

@interface YYViewController ()
/**
* 用来保存所有的分组数据
*/
@property(nonatomic,strong)NSArray *groupFriends;
@end

@implementation YYViewController
#pragma mark-懒加载
//1.先拿到数据,实现懒加载
-(NSArray *)groupFriends
{
if (_groupFriends==nil) {
NSString *fullpath=[[NSBundle mainBundle]pathForResource:@"friends.plist" ofType:nil];
NSArray *arrayM=[NSArray arrayWithContentsOfFile:fullpath];

NSMutableArray *models=[NSMutableArray arrayWithCapacity:arrayM.count];
for (NSDictionary *dict in arrayM) {
YYQQGroupModel *group=[YYQQGroupModel qqGroupModelWithDict:dict];
[models addObject:group];
}
_groupFriends=[models copy];
}
return _groupFriends;
}

- (void)viewDidLoad
{
[super viewDidLoad];
self.tableView.sectionHeaderHeight = 100;
}

#pragma mark- 设置数据源
//返回多少组
//为什么这里不会智能提示?因为这些方法是uitableview协议里的,默认并没有遵守协议,让主控制器类继承uitableviewcontroller后,就已经遵守了
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return self.groupFriends.count;
}
//每组返回多少行
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
//取出对应的组模型
YYQQGroupModel *group=self.groupFriends[section];
//返回对应组中的好友数
return group.friends.count;
}
//每组每行的内容
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
//1.创建cell
YYfriendCell *cell=[YYfriendCell cellWithTableview:tableView];

//2.设置cell
YYQQGroupModel *group=self.groupFriends[indexPath.section];
YYFriendsModel *friends=group.friends[indexPath.row];
cell.friends=friends;
//3.返回一个cell
return cell;
}


#pragma mark - 代理方法
// 当一个分组标题进入视野的时候就会调用该方法
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
// 1.创建头部视图
UIView *view = [[UIView alloc] init];
view.backgroundColor = [UIColor grayColor];
// 2.返回头部视图
return view;
}

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

#pragma mark 隐藏状态栏
-(BOOL)prefersStatusBarHidden
{
return YES;
}
@end

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

实现的简陋效果:

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

三、注意点

(1)设置头部视图的方法

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

(2)在重写set方法时,应该考虑到回滚。

iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)