一、實作效果
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5GcuYGN2EjZ1cjY1UWNzETM0MGOhlTO1cjY0kDZhFmZjFDZfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.png)
二、實作代碼和說明
當在頁面(視圖部分)點選加載更多按鈕的時候,首頁面(主要制器)會加載兩條資料進來。
視圖部分的按鈕被點選的時候,要讓主要制器加載資料,重新整理表格,2B青年會在視圖中增加一個主要制器的屬性,通過這個屬性去調用進行加載,但在開發中通常通過代理模式來完成這個操作。
下面分别是兩種實作的代碼。
1、項目結構和說明
說明:加載更多永遠都放在這個tableview的最下端,是以這裡設定成了這個tableview的tableFooterView。
self.tableview.tableFooterView=footerview;
在實作上通過xib來進行處理,考慮到左右的留白,以及點選後的要切換到加載按鈕和文字,要同時控制圖示和文字,是以把加載圖示和文字提示放在了一個view中以便控制,這個xib已經和YYfooterview.xib進行了關聯,通過這個類來控制xib。
2、實作代碼
(1).垃圾代碼
資料模型部分
YYtg.h檔案
1 //
2 // YYtg.h
3 // 02-團購(使用xib和類完成資料展示)
4 //
5 // Created by apple on 14-5-29.
6 // Copyright (c) 2014年 itcase. All rights reserved.
7 //
8
9 #import <Foundation/Foundation.h>
10 #import "Global.h"
11
12 @interface YYtgModel : NSObject
13 @property(nonatomic,copy)NSString *icon;
14 @property(nonatomic,copy)NSString *buyCount;
15 @property(nonatomic,copy)NSString *title;
16 @property(nonatomic,copy)NSString *price;
17
18 //對外接口
19 YYinitH(tg)
20 @end
YYtg.m檔案
1 //
2 // YYtg.m
3 // 02-團購(使用xib和類完成資料展示)
4 //
5 // Created by apple on 14-5-29.
6 // Copyright (c) 2014年 itcase. All rights reserved.
7 //
8
9 #import "YYtgModel.h"
10
11 @implementation YYtgModel
12 YYinitM(tg)
13 @end
注意:對于資料轉模型部分的構造方法接口和實作代碼已經通過自定義帶參數的宏來進行了封裝。
封裝代碼如下:
1 #ifndef _0____________Global_h
2 #define _0____________Global_h
3
4 /**
5 * 自定義帶參數的宏
6 */
7 #define YYinitH(name) -(instancetype)initWithDict:(NSDictionary *)dict;\
8 +(instancetype)name##WithDict:(NSDictionary *)dict;
9
10
11 #define YYinitM(name) -(instancetype)initWithDict:(NSDictionary *)dict\
12 {\
13 if (self=[super init]) {\
14 [self setValuesForKeysWithDictionary:dict];\
15 }\
16 return self;\
17 }\
18 \
19 +(instancetype)name##WithDict:(NSDictionary *)dict\
20 {\
21 return [[self alloc]initWithDict:dict];\
22 }\
23
24 #endif
視圖部分
YYtgcell.h檔案
1 //
2 // YYtgcell.h
3 // 02-團購(使用xib和類完成資料展示)
4 //
5 // Created by apple on 14-5-29.
6 // Copyright (c) 2014年 itcase. All rights reserved.
7 //
8
9 #import <UIKit/UIKit.h>
10 #import "YYtgModel.h"
11
12 @interface YYtgcell : UITableViewCell
13 @property(nonatomic,strong)YYtgModel *yytg;
14
15 //把加載資料(使用xib建立cell的内部細節進行封裝)
16 +(instancetype)tgcellWithTableView:(UITableView *)tableView;
17 @end
YYtgcell.m檔案
1 //
2 // YYtgcell.m
3 // 02-團購(使用xib和類完成資料展示)
4 //
5 // Created by apple on 14-5-29.
6 // Copyright (c) 2014年 itcase. All rights reserved.
7 //
8
9 #import "YYtgcell.h"
10 //私有擴充
11 @interface YYtgcell()
12 @property (strong, nonatomic) IBOutlet UIImageView *img;
13 @property (strong, nonatomic) IBOutlet UILabel *titlelab;
14 @property (strong, nonatomic) IBOutlet UILabel *pricelab;
15 @property (strong, nonatomic) IBOutlet UILabel *buycountlab;
16 @end
17 @implementation YYtgcell
18
19 #pragma mark 重寫set方法,完成資料的指派操作
20 -(void)setYytg:(YYtgModel *)yytg
21 {
22 _yytg=yytg;
23 self.img.image=[UIImage imageNamed:yytg.icon];
24 self.titlelab.text=yytg.title;
25 self.pricelab.text=[NSString stringWithFormat:@"$%@",yytg.price];
26 self.buycountlab.text=[NSString stringWithFormat:@"已有%@人購買",yytg.buyCount];
27 }
28
29 +(instancetype)tgcellWithTableView:(UITableView *)tableView
30 {
31 static NSString *identifier= @"tg";
32 YYtgcell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];
33 if (cell==nil) {
34 //如何讓建立的cell加個戳
35 //對于加載的xib檔案,可以到xib視圖的屬性選擇器中進行設定
36 cell=[[[NSBundle mainBundle]loadNibNamed:@"tgcell" owner:nil options:nil]firstObject];
37 NSLog(@"建立了一個cell");
38 }
39 return cell;
40 }
41
42 @end
YYfooterview.h檔案
1 //
2 // YYfooterview.h
3 // 02-團購(使用xib和類完成資料展示)
4 //
5 // Created by apple on 14-5-29.
6 // Copyright (c) 2014年 itcase. All rights reserved.
7 //
8
9 #import <UIKit/UIKit.h>
10 @class YYViewController;
11 @interface YYfooterview : UIView
12 @property(nonatomic,strong) YYViewController *controller;
13 @end
YYfooterview.m檔案
1 //
2 // YYfooterview.m
3 // 02-團購(使用xib和類完成資料展示)
4 //
5 // Created by apple on 14-5-29.
6 // Copyright (c) 2014年 itcase. All rights reserved.
7 //
8
9 #import "YYfooterview.h"
10 #import "YYViewController.h"
11
12 @interface YYfooterview ()
13 @property (strong, nonatomic) IBOutlet UIActivityIndicatorView *loadingview;
14 @property (strong, nonatomic) IBOutlet UIButton *loadbtn;
15
16 @end
17 @implementation YYfooterview
18 - (IBAction)loadbtclick {
19 NSLog(@"按鈕被點選了");
20 //隐藏按鈕
21 self.loadbtn.hidden=YES;
22 //顯示菊花
23 self.loadingview.hidden=NO;
24
25 #warning 模拟發送網絡請求, 3秒之後隐藏菊花
26 dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
27 // 3.調用控制的加載資料方法
28 [self.controller LoadMore];
29 // 4.隐藏菊花視圖
30 self.loadingview.hidden = YES;
31 // 5.顯示按鈕
32 self.loadbtn.hidden = NO;
33 });
34 }
35
36 @end
主要制器
YYViewController.h檔案
1 //
2 // YYViewController.h
3 // 02-團購(使用xib和類完成資料展示)
4 //
5 // Created by apple on 14-5-29.
6 // Copyright (c) 2014年 itcase. All rights reserved.
7 //
8
9 #import <UIKit/UIKit.h>
10
11 @interface YYViewController : UIViewController
12 //公開接口
13 //- (void)LoadMore;
14 @end
YYViewController.m檔案
1 //
2 // YYViewController.m
3 // 02-團購(使用xib和類完成資料展示)
4 //
5 // Created by apple on 14-5-29.
6 // Copyright (c) 2014年 itcase. All rights reserved.
7 //
8
9 #import "YYViewController.h"
10 #import "YYtgModel.h"
11 #import "YYtgcell.h"
12 #import "YYfooterview.h"
13
14 @interface YYViewController ()<UITableViewDataSource,UITableViewDelegate>
15 @property (strong, nonatomic) IBOutlet UITableView *tableview;
16
17 @property(strong,nonatomic)NSMutableArray *tg;
18 @end
19
20 @implementation YYViewController
21
22 #pragma mark-加載資料方法
23 -(void)LoadMore
24 {
25 //建立模型
26 YYtgModel *tgmodel=[[YYtgModel alloc]init];
27 tgmodel.title=@"菜好上桌";
28 tgmodel.icon=@"5ee372ff039073317a49af5442748071";
29 tgmodel.buyCount=@"20";
30 tgmodel.price=@"10000";
31 //将模型添加到數組中
32 [self.tg addObject:tgmodel];
33
34 YYtgModel *tgmodelq=[[YYtgModel alloc]init];
35 tgmodelq.title=@"菜好上桌1";
36 tgmodelq.icon=@"5ee372ff039073317a49af5442748071";
37 tgmodelq.buyCount=@"20";
38 tgmodelq.price=@"10000";
39
40 [self.tg addObject:tgmodelq];
41 //重新整理表格
42 [self.tableview reloadData];
43 }
44
45 - (void)viewDidLoad
46 {
47 [super viewDidLoad];
48 self.tableview.rowHeight=80.f;
49
50 //加載底部視圖
51 //從xib中擷取資料
52 UINib *nib=[UINib nibWithNibName:@"YYfooterview" bundle:nil];
53 YYfooterview *footerview=[[nib instantiateWithOwner:nil options:nil] firstObject];
54 self.tableview.tableFooterView=footerview;
55 //設定控制
56 footerview.controller=self;
57 }
58 #pragma mark- 懶加載
59 -(NSArray *)tg
60 {
61 if (_tg==nil) {
62 NSString *fullpath=[[NSBundle mainBundle]pathForResource:@"tgs.plist" ofType:nil];
63 NSArray *temparray=[NSArray arrayWithContentsOfFile:fullpath];
64
65 NSMutableArray *arrayM=[NSMutableArray arrayWithCapacity:temparray.count];
66 for (NSDictionary *dict in temparray) {
67 YYtgModel *tg=[YYtgModel tgWithDict:dict];
68 [arrayM addObject:tg];
69 }
70 _tg=arrayM;
71 }
72 return _tg;
73 }
74
75 #pragma mark- xib建立cell資料處理
76
77 #pragma mark 多少組
78 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
79 {
80 return 1;
81 }
82
83 #pragma mark多少行
84 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
85 {
86 return self.tg.count;
87 }
88
89 #pragma mark設定每組每行
90 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
91 {
92 //1.建立cell
93 YYtgcell *cell=[YYtgcell tgcellWithTableView:tableView];
94
95 //2.擷取目前行的模型,設定cell的資料
96 YYtgModel *tg=self.tg[indexPath.row];
97 cell.yytg=tg;
98
99 //3.傳回cell
100 return cell;
101 }
102
103 #pragma mark- 隐藏狀态欄
104 -(BOOL)prefersStatusBarHidden
105 {
106 return YES;
107 }
108
109 @end
2.通過代理完成
當按鈕被點選的時候,視圖部分本身不幹活,而是通知它的代理(控制器)完成接下來的操作。
該部分代碼在1的基礎上對下面幾個檔案進行了修改:
視圖部分:
1 //
2 // YYfooterview.h
3 // 02-團購(使用xib和類完成資料展示)
4 //
5 // Created by apple on 14-5-29.
6 // Copyright (c) 2014年 itcase. All rights reserved.
7 //
8
9 #import <UIKit/UIKit.h>
10 @class YYViewController ,YYfooterview;
11 //約定協定
12 @protocol YYfooterviewDelegate <NSObject>
13 -(void)footerviewLoadMore;
14 @end
15
16 @interface YYfooterview : UIView
17
18 //聲明一個id類型屬性,遵守了協定的“人”即可成為它的代理
19 @property(nonatomic,strong)id<YYfooterviewDelegate> delegate;
20 //@property(nonatomic,strong) YYViewController *controller;
21 @end
1 //
2 // YYfooterview.m
3 // 02-團購(使用xib和類完成資料展示)
4 //
5 // Created by apple on 14-5-29.
6 // Copyright (c) 2014年 itcase. All rights reserved.
7 //
8
9 #import "YYfooterview.h"
10 #import "YYViewController.h"
11
12 @interface YYfooterview ()
13 @property (strong, nonatomic) IBOutlet UIActivityIndicatorView *loadingview;
14 @property (strong, nonatomic) IBOutlet UIButton *loadbtn;
15
16 @end
17 @implementation YYfooterview
18 - (IBAction)loadbtclick {
19 NSLog(@"按鈕被點選了");
20 //隐藏按鈕
21 self.loadbtn.hidden=YES;
22 //顯示菊花
23 self.loadingview.hidden=NO;
24
25 #warning 模拟發送網絡請求, 3秒之後隐藏菊花
26 dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
27 // 3.調用控制的加載資料方法
28 // [self.controller LoadMore];
29 //通知代理
30 [self.delegate footerviewLoadMore];
31 // 4.隐藏菊花視圖
32 self.loadingview.hidden = YES;
33 // 5.顯示按鈕
34 self.loadbtn.hidden = NO;
35 });
36 }
37
38 @end
主要制器部分
1 //
2 // YYViewController.h
3 // 02-團購(使用xib和類完成資料展示)
4 //
5 // Created by apple on 14-5-29.
6 // Copyright (c) 2014年 itcase. All rights reserved.
7 //
8
9 #import <UIKit/UIKit.h>
10
11 @interface YYViewController : UIViewController
12 //公開接口
13 //- (void)LoadMore;
14 @end
1 //
2 // YYViewController.m
3 // 02-團購(使用xib和類完成資料展示)
4 //
5 // Created by apple on 14-5-29.
6 // Copyright (c) 2014年 itcase. All rights reserved.
7 //
8
9 #import "YYViewController.h"
10 #import "YYtgModel.h"
11 #import "YYtgcell.h"
12 #import "YYfooterview.h"
13
14 @interface YYViewController ()<UITableViewDataSource,UITableViewDelegate,YYfooterviewDelegate>
15 @property (strong, nonatomic) IBOutlet UITableView *tableview;
16
17 @property(strong,nonatomic)NSMutableArray *tg;
18 @end
19
20 @implementation YYViewController
21
22 #pragma mark-加載資料方法
23 -(void)footerviewLoadMore
24 {
25 //建立模型
26 YYtgModel *tgmodel=[[YYtgModel alloc]init];
27 tgmodel.title=@"菜好上桌";
28 tgmodel.icon=@"5ee372ff039073317a49af5442748071";
29 tgmodel.buyCount=@"20";
30 tgmodel.price=@"10000";
31 //将模型添加到數組中
32 [self.tg addObject:tgmodel];
33
34 YYtgModel *tgmodelq=[[YYtgModel alloc]init];
35 tgmodelq.title=@"菜好上桌1";
36 tgmodelq.icon=@"5ee372ff039073317a49af5442748071";
37 tgmodelq.buyCount=@"20";
38 tgmodelq.price=@"10000";
39
40 [self.tg addObject:tgmodelq];
41 //重新整理表格
42 [self.tableview reloadData];
43 }
44 //-(void)LoadMore
45 //{
46 // //建立模型
47 // YYtgModel *tgmodel=[[YYtgModel alloc]init];
48 // tgmodel.title=@"菜好上桌";
49 // tgmodel.icon=@"5ee372ff039073317a49af5442748071";
50 // tgmodel.buyCount=@"20";
51 // tgmodel.price=@"10000";
52 // //将模型添加到數組中
53 // [self.tg addObject:tgmodel];
54 //
55 // YYtgModel *tgmodelq=[[YYtgModel alloc]init];
56 // tgmodelq.title=@"菜好上桌1";
57 // tgmodelq.icon=@"5ee372ff039073317a49af5442748071";
58 // tgmodelq.buyCount=@"20";
59 // tgmodelq.price=@"10000";
60 //
61 // [self.tg addObject:tgmodelq];
62 // //重新整理表格
63 // [self.tableview reloadData];
64 //}
65
66 - (void)viewDidLoad
67 {
68 [super viewDidLoad];
69 self.tableview.rowHeight=80.f;
70
71 //加載底部視圖
72 //從xib中擷取資料
73 UINib *nib=[UINib nibWithNibName:@"YYfooterview" bundle:nil];
74 YYfooterview *footerview=[[nib instantiateWithOwner:nil options:nil] firstObject];
75 self.tableview.tableFooterView=footerview;
76 //設定控制
77 // footerview.controller=self;
78 //設定代理
79 footerview.delegate=self;
80 }
81 #pragma mark- 懶加載
82 -(NSArray *)tg
83 {
84 if (_tg==nil) {
85 NSString *fullpath=[[NSBundle mainBundle]pathForResource:@"tgs.plist" ofType:nil];
86 NSArray *temparray=[NSArray arrayWithContentsOfFile:fullpath];
87
88 NSMutableArray *arrayM=[NSMutableArray arrayWithCapacity:temparray.count];
89 for (NSDictionary *dict in temparray) {
90 YYtgModel *tg=[YYtgModel tgWithDict:dict];
91 [arrayM addObject:tg];
92 }
93 _tg=arrayM;
94 }
95 return _tg;
96 }
97
98 #pragma mark- xib建立cell資料處理
99
100 #pragma mark 多少組
101 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
102 {
103 return 1;
104 }
105
106 #pragma mark多少行
107 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
108 {
109 return self.tg.count;
110 }
111
112 #pragma mark設定每組每行
113 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
114 {
115 //1.建立cell
116 YYtgcell *cell=[YYtgcell tgcellWithTableView:tableView];
117
118 //2.擷取目前行的模型,設定cell的資料
119 YYtgModel *tg=self.tg[indexPath.row];
120 cell.yytg=tg;
121
122 //3.傳回cell
123 return cell;
124 }
125
126 #pragma mark- 隐藏狀态欄
127 -(BOOL)prefersStatusBarHidden
128 {
129 return YES;
130 }
131
132 @end