iOS開發UI篇—使用UItableview完成一個簡單的QQ好友列表（一）

iOS開發UI篇—使用UItableview完成一個簡單的QQ好友列表（一）

1、項目結構和plist文件

 

2、實現代碼

1.說明：

主控制器直接繼承UITableViewController

 //  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

在storyboard中進行了關聯

2.代碼

數據模型部分：

YYQQGroupModel.h文件

 1 //
 2 //  YYQQGroupModel.h
 3 //  02-QQ好友列表（基本數據的加載）
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import <Foundation/Foundation.h>
10 
11 @interface YYQQGroupModel : NSObject
12 /**
13  *  名稱屬性
14  */
15 @property(nonatomic,copy)NSString *name;
16 /**
17  *  是否在線
18  */
19 @property(nonatomic,copy)NSString *online;
20 /**
21  *  好友列表
22  */
23 @property(nonatomic,strong)NSArray *friends;
24 
25 -(instancetype)initWithDict:(NSDictionary *)dict;
26 +(instancetype) qqGroupModelWithDict:(NSDictionary *)dict;
27 @end

YYQQGroupModel.m文件

 1 //
 2 //  YYQQGroupModel.m
 3 //  02-QQ好友列表（基本數據的加載）
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYQQGroupModel.h"
10 #import "YYFriendsModel.h"
11 
12 @implementation YYQQGroupModel
13 -(instancetype)initWithDict:(NSDictionary *)dict
14 {
15     if (self=[super init]) {
16         //將字典轉換爲模型
17         [self setValuesForKeysWithDictionary:dict];
18         
19         //定義一個數組來保存轉換後的模型
20         NSMutableArray *models=[NSMutableArray arrayWithCapacity:self.friends.count];
21         for (NSDictionary *dict in self.friends) {
22             YYFriendsModel *friends=[YYFriendsModel friendsWithDict:dict];
23             [models addObject:friends];
24         }
25         _friends=[models copy];
26     }
27     return self;
28 }
29 
30 +(instancetype)qqGroupModelWithDict:(NSDictionary *)dict
31 {
32     return  [[self alloc]initWithDict:dict];
33 }
34 @end

YYFriendsModel.h文件

 1 //
 2 //  YYFriendsModel.h
 3 //  02-QQ好友列表（基本數據的加載）
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import <Foundation/Foundation.h>
10 
11 @interface YYFriendsModel : NSObject
12 /**
13  *  每一個好友的名稱
14  */
15 @property(nonatomic,copy)NSString *name;
16 /**
17  *每一個好友的頭像
18  */
19 @property(nonatomic,copy)NSString *icon;
20 /**
21  *  每一個好友的個性簽名
22  */
23 @property(nonatomic,copy)NSString *intro;
24 /**
25  *  該好友是不是vip
26  */
27 @property(nonatomic,assign,getter = isVip)BOOL vip;
28 
29 -(instancetype)initWithDict:(NSDictionary *)dict;
30 +(instancetype)friendsWithDict:(NSDictionary *)dict;
31 @end

YYFriendsModel.m文件

 1 //
 2 //  YYFriendsModel.m
 3 //  02-QQ好友列表（基本數據的加載）
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYFriendsModel.h"
10 
11 @implementation YYFriendsModel
12 -(instancetype)initWithDict:(NSDictionary *)dict
13 {
14     if (self=[super init]) {
15         [self setValuesForKeysWithDictionary:dict];
16     }
17     return self;
18 }
19 
20 +(instancetype)friendsWithDict:(NSDictionary *)dict
21 {
22     return [[self alloc]initWithDict:dict];
23 }
24 @end

視圖部分

YYfriendCell.h文件

 1 //
 2 //  YYfriendCell.h
 3 //  02-QQ好友列表（基本數據的加載）
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import <UIKit/UIKit.h>
10 @class YYFriendsModel;
11 @interface YYfriendCell : UITableViewCell
12 
13 @property(nonatomic,strong)YYFriendsModel *friends;
14 
15 +(instancetype)cellWithTableview:(UITableView *)tableView;
16 @end

YYfriendCell.m文件

 1 //
 2 //  YYfriendCell.m
 3 //  02-QQ好友列表（基本數據的加載）
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYfriendCell.h"
10 #import "YYFriendsModel.h"
11 //私有擴展
12 @interface YYfriendCell()
13 
14 
15 @end
16 @implementation YYfriendCell
17 
18 +(YYfriendCell *)cellWithTableview:(UITableView *)tableView
19 {
20     static NSString *identifier=@"qq";
21     YYfriendCell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];
22     if (cell==nil) {
23         //這裏使用系統自帶的樣式
24         cell=[[YYfriendCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:identifier];
25         NSLog(@"建立一個cell");
26     }
27     return cell;
28 }
29 
30 -(void)setFriends:(YYFriendsModel *)friends
31 {
32     _friends=friends;
33     //1.設置頭像
34     self.imageView.image=[UIImage imageNamed:_friends.icon];
35        //2.設置暱稱
36     self.textLabel.text=_friends.name;
37      //3.設置簡介
38     self.detailTextLabel.text=_friends.intro;
39  //判斷是不是會員
40     /**
41      *  這裏有個注意點，若是不寫else設置爲黑色，會怎麼樣？
42      */
43     if (_friends.isVip) {
44         [self.textLabel setTextColor:[UIColor redColor]];
45     }else
46     {
47     [self.textLabel setTextColor:[UIColor blackColor]];
48     }
49 }
50 @end

主控制器部分

YYViewController.m文件

 1 //
 2 //  YYViewController.m
 3 //  02-QQ好友列表（基本數據的加載）
 4 //
 5 //  Created by apple on 14-5-31.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYViewController.h"
10 #import "YYQQGroupModel.h"
11 #import "YYfriendCell.h"
12 #import "YYFriendsModel.h"
13 
14 @interface YYViewController ()
15 /**
16  *  用來保存全部的分組數據
17  */
18 @property(nonatomic,strong)NSArray *groupFriends;
19 @end
20 
21 @implementation YYViewController
22 #pragma mark-懶加載
23 //1.先拿到數據，實現懶加載
24 -(NSArray *)groupFriends
25 {
26     if (_groupFriends==nil) {
27         NSString *fullpath=[[NSBundle mainBundle]pathForResource:@"friends.plist" ofType:nil];
28         NSArray *arrayM=[NSArray arrayWithContentsOfFile:fullpath];
29         
30         NSMutableArray *models=[NSMutableArray arrayWithCapacity:arrayM.count];
31         for (NSDictionary *dict in arrayM) {
32             YYQQGroupModel *group=[YYQQGroupModel qqGroupModelWithDict:dict];
33             [models addObject:group];
34         }
35         _groupFriends=[models copy];
36     }
37     return _groupFriends;
38 }
39 
40 - (void)viewDidLoad
41 {
42     [super viewDidLoad];
43      self.tableView.sectionHeaderHeight = 100;
44 }
45 
46 #pragma mark-  設置數據源
47 //返回多少組
48 //爲何這裏不會智能提示？由於這些方法是uitableview協議裏的，默認並無遵照協議，讓主控制器類繼承uitableviewcontroller後，就已經遵照了
49 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
50 {
51     return self.groupFriends.count;
52 }
53 //每組返回多少行
54 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
55 {
56     //取出對應的組模型
57     YYQQGroupModel *group=self.groupFriends[section];
58     //返回對應組中的好友數
59     return group.friends.count;
60 }
61 //每組每行的內容
62 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
63 {
64     //1.建立cell
65     YYfriendCell *cell=[YYfriendCell cellWithTableview:tableView];
66 
67     //2.設置cell
68     YYQQGroupModel *group=self.groupFriends[indexPath.section];
69     YYFriendsModel *friends=group.friends[indexPath.row];
70     cell.friends=friends;
71     //3.返回一個cell
72     return cell;
73 }
74 
75 
76 #pragma mark - 代理方法
77 // 當一個分組標題進入視野的時候就會調用該方法
78 - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
79 {
80     //    1.建立頭部視圖
81     UIView *view = [[UIView alloc] init];
82     view.backgroundColor = [UIColor grayColor];
83     //    2.返回頭部視圖
84     return view;
85 }
86 
87 //設置分組頭部標題的高度
88 -(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
89 {
90     return 44;
91 }
92 
93 #pragma mark  隱藏狀態欄
94 -(BOOL)prefersStatusBarHidden
95 {
96     return YES;
97 }
98 @end

實現的簡陋效果：

3、注意點

（1）設置頭部視圖的方法

（2）在重寫set方法時，應該考慮到回滾。