iOS開發UI篇－在UItableview中實現加載更多功能

一、實現效果

?

點擊加載更多按鈕，出現一個加載圖示，三秒鐘后添加兩條新的數據。

?

二、實現代碼和說明

當在頁面（視圖部分）點擊加載更多按鈕的時候，主頁面（主控制器）會加載兩條數據進來。

視圖部分的按鈕被點擊的時候，要讓主控制器加載數據，刷新表格，2B青年會在視圖中增加一個主控制器的屬性，通過這個屬性去調用進行加載，但在開發中通常通過代理模式來完成這個操作。

下面分別是兩種實現的代碼。

1、項目結構和說明

說明：加載更多永遠都放在這個tableview的最下端，因此這里設置成了這個tableview的tableFooterView。

?self.tableview.tableFooterView=footerview;

在實現上通過xib來進行處理，考慮到左右的留白，以及點擊后的要切換到加載按鈕和文字，要同時控制圖標和文字，因此把加載圖標和文字提示放在了一個view中以便控制，這個xib已經和YYfooterview.xib進行了關聯，通過這個類來控制xib。

2、實現代碼

（1）.垃圾代碼

數據模型部分

YYtg.h文件

// // YYtg.h // 02-團購（使用xib和類完成數據展示） // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. All rights reserved. // #import <Foundation/Foundation.h> #import "Global.h"@interface YYtgModel : NSObject @property(nonatomic,copy)NSString *icon; @property(nonatomic,copy)NSString *buyCount; @property(nonatomic,copy)NSString *title; @property(nonatomic,copy)NSString *price;//對外接口 YYinitH(tg) @end

YYtg.m文件

// // YYtg.m // 02-團購（使用xib和類完成數據展示） // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. All rights reserved. // #import "YYtgModel.h"@implementation YYtgModel YYinitM(tg) @end

注意：對于數據轉模型部分的構造方法接口和實現代碼已經通過自定義帶參數的宏來進行了封裝。

封裝代碼如下：

#ifndef _0____________Global_h #define _0____________Global_h/*** 自定義帶參數的宏*/ #define YYinitH(name) -(instancetype)initWithDict:(NSDictionary *)dict;\ +(instancetype)name##WithDict:(NSDictionary *)dict;#define YYinitM(name) -(instancetype)initWithDict:(NSDictionary *)dict\ {\if (self=[super init]) {\[self setValuesForKeysWithDictionary:dict];\}\return self;\ }\ \ +(instancetype)name##WithDict:(NSDictionary *)dict\ {\return [[self alloc]initWithDict:dict];\ }\#endif

視圖部分

YYtgcell.h文件

// // YYtgcell.h // 02-團購（使用xib和類完成數據展示） // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. All rights reserved. // #import <UIKit/UIKit.h> #import "YYtgModel.h"@interface YYtgcell : UITableViewCell @property(nonatomic,strong)YYtgModel *yytg;//把加載數據（使用xib創建cell的內部細節進行封裝） +(instancetype)tgcellWithTableView:(UITableView *)tableView; @end

YYtgcell.m文件

// // YYtgcell.m // 02-團購（使用xib和類完成數據展示） // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. All rights reserved. // #import "YYtgcell.h" //私有擴展 @interface YYtgcell() @property (strong, nonatomic) IBOutlet UIImageView *img; @property (strong, nonatomic) IBOutlet UILabel *titlelab; @property (strong, nonatomic) IBOutlet UILabel *pricelab; @property (strong, nonatomic) IBOutlet UILabel *buycountlab; @end @implementation YYtgcell#pragma mark 重寫set方法，完成數據的賦值操作 -(void)setYytg:(YYtgModel *)yytg {_yytg=yytg;self.img.image=[UIImage imageNamed:yytg.icon];self.titlelab.text=yytg.title;self.pricelab.text=[NSString stringWithFormat:@"$%@",yytg.price];self.buycountlab.text=[NSString stringWithFormat:@"已有%@人購買",yytg.buyCount]; }+(instancetype)tgcellWithTableView:(UITableView *)tableView {static NSString *identifier= @"tg";YYtgcell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];if (cell==nil) {//如何讓創建的cell加個戳//對于加載的xib文件，可以到xib視圖的屬性選擇器中進行設置cell=[[[NSBundle mainBundle]loadNibNamed:@"tgcell" owner:nil options:nil]firstObject];NSLog(@"創建了一個cell");}return cell; }@end

YYfooterview.h文件

// // YYfooterview.h // 02-團購（使用xib和類完成數據展示） // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. All rights reserved. // #import <UIKit/UIKit.h> @class YYViewController; @interface YYfooterview : UIView @property(nonatomic,strong) YYViewController *controller; @end

YYfooterview.m文件

// // YYfooterview.m // 02-團購（使用xib和類完成數據展示） // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. All rights reserved. // #import "YYfooterview.h" #import "YYViewController.h"@interface YYfooterview () @property (strong, nonatomic) IBOutlet UIActivityIndicatorView *loadingview; @property (strong, nonatomic) IBOutlet UIButton *loadbtn;@end @implementation YYfooterview - (IBAction)loadbtclick {NSLog(@"按鈕被點擊了");//隱藏按鈕self.loadbtn.hidden=YES;//顯示菊花self.loadingview.hidden=NO;#warning 模擬發送網絡請求, 3秒之后隱藏菊花dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{// 3.調用控制的加載數據方法 [self.controller LoadMore];// 4.隱藏菊花視圖self.loadingview.hidden = YES;// 5.顯示按鈕self.loadbtn.hidden = NO;}); }@end

主控制器

YYViewController.h文件

// // YYViewController.h // 02-團購（使用xib和類完成數據展示） // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. All rights reserved. // #import <UIKit/UIKit.h>@interface YYViewController : UIViewController //公開接口 //- (void)LoadMore; @end

YYViewController.m文件

// // YYViewController.m // 02-團購（使用xib和類完成數據展示） // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. All rights reserved. // #import "YYViewController.h" #import "YYtgModel.h" #import "YYtgcell.h" #import "YYfooterview.h"@interface YYViewController ()<UITableViewDataSource,UITableViewDelegate> @property (strong, nonatomic) IBOutlet UITableView *tableview;@property(strong,nonatomic)NSMutableArray *tg; @end@implementation YYViewController#pragma mark-加載數據方法 -(void)LoadMore {//創建模型YYtgModel *tgmodel=[[YYtgModel alloc]init];tgmodel.title=@"菜好上桌";tgmodel.icon=@"5ee372ff039073317a49af5442748071";tgmodel.buyCount=@"20";tgmodel.price=@"10000";//將模型添加到數組中 [self.tg addObject:tgmodel];YYtgModel *tgmodelq=[[YYtgModel alloc]init];tgmodelq.title=@"菜好上桌1";tgmodelq.icon=@"5ee372ff039073317a49af5442748071";tgmodelq.buyCount=@"20";tgmodelq.price=@"10000";[self.tg addObject:tgmodelq];//刷新表格 [self.tableview reloadData]; }- (void)viewDidLoad {[super viewDidLoad];self.tableview.rowHeight=80.f;//加載底部視圖//從xib中獲取數據UINib *nib=[UINib nibWithNibName:@"YYfooterview" bundle:nil];YYfooterview *footerview=[[nib instantiateWithOwner:nil options:nil] firstObject];self.tableview.tableFooterView=footerview;//設置控制footerview.controller=self; } #pragma mark- 懶加載 -(NSArray *)tg {if (_tg==nil) {NSString *fullpath=[[NSBundle mainBundle]pathForResource:@"tgs.plist" ofType:nil];NSArray *temparray=[NSArray arrayWithContentsOfFile:fullpath];NSMutableArray *arrayM=[NSMutableArray arrayWithCapacity:temparray.count];for (NSDictionary *dict in temparray) {YYtgModel *tg=[YYtgModel tgWithDict:dict];[arrayM addObject:tg];}_tg=arrayM;}return _tg; }#pragma mark- xib創建cell數據處理#pragma mark 多少組 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {return 1; }#pragma mark多少行 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {return self.tg.count; }#pragma mark設置每組每行 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {//1.創建cellYYtgcell *cell=[YYtgcell tgcellWithTableView:tableView];//2.獲取當前行的模型,設置cell的數據YYtgModel *tg=self.tg[indexPath.row];cell.yytg=tg;//3.返回cellreturn cell; }#pragma mark- 隱藏狀態欄 -(BOOL)prefersStatusBarHidden {return YES; }@end

2.通過代理完成

當按鈕被點擊的時候，視圖部分本身不干活，而是通知它的代理（控制器）完成接下來的操作。

該部分代碼在1的基礎上對下面幾個文件進行了修改：

視圖部分：

YYfooterview.h文件

// // YYfooterview.h // 02-團購（使用xib和類完成數據展示） // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. All rights reserved. // #import <UIKit/UIKit.h> @class YYViewController ,YYfooterview; //約定協議 @protocol YYfooterviewDelegate <NSObject> -(void)footerviewLoadMore; @end@interface YYfooterview : UIView//聲明一個id類型屬性，遵守了協議的“人”即可成為它的代理 @property(nonatomic,strong)id<YYfooterviewDelegate> delegate; //@property(nonatomic,strong) YYViewController *controller; @end

YYfooterview.m文件

// // YYfooterview.m // 02-團購（使用xib和類完成數據展示） // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. All rights reserved. // #import "YYfooterview.h" #import "YYViewController.h"@interface YYfooterview () @property (strong, nonatomic) IBOutlet UIActivityIndicatorView *loadingview; @property (strong, nonatomic) IBOutlet UIButton *loadbtn;@end @implementation YYfooterview - (IBAction)loadbtclick {NSLog(@"按鈕被點擊了");//隱藏按鈕self.loadbtn.hidden=YES;//顯示菊花self.loadingview.hidden=NO;#warning 模擬發送網絡請求, 3秒之后隱藏菊花dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{// 3.調用控制的加載數據方法 // [self.controller LoadMore];//通知代理（需要進行判斷，代理有沒有實現相應的方法）[self.delegate footerviewLoadMore];// 4.隱藏菊花視圖self.loadingview.hidden = YES;// 5.顯示按鈕self.loadbtn.hidden = NO;}); }@end

主控制器部分

YYViewController.h文件

// // YYViewController.h // 02-團購（使用xib和類完成數據展示） // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. All rights reserved. // #import <UIKit/UIKit.h>@interface YYViewController : UIViewController //公開接口 //- (void)LoadMore; @end

YYViewController.m文件

// // YYViewController.m // 02-團購（使用xib和類完成數據展示） // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. All rights reserved. // #import "YYViewController.h" #import "YYtgModel.h" #import "YYtgcell.h" #import "YYfooterview.h"@interface YYViewController ()<UITableViewDataSource,UITableViewDelegate,YYfooterviewDelegate> @property (strong, nonatomic) IBOutlet UITableView *tableview;@property(strong,nonatomic)NSMutableArray *tg; @end@implementation YYViewController#pragma mark-加載數據方法 -(void)footerviewLoadMore {//創建模型YYtgModel *tgmodel=[[YYtgModel alloc]init];tgmodel.title=@"菜好上桌";tgmodel.icon=@"5ee372ff039073317a49af5442748071";tgmodel.buyCount=@"20";tgmodel.price=@"10000";//將模型添加到數組中 [self.tg addObject:tgmodel];YYtgModel *tgmodelq=[[YYtgModel alloc]init];tgmodelq.title=@"菜好上桌1";tgmodelq.icon=@"5ee372ff039073317a49af5442748071";tgmodelq.buyCount=@"20";tgmodelq.price=@"10000";[self.tg addObject:tgmodelq];//刷新表格 [self.tableview reloadData]; } //-(void)LoadMore //{ // //創建模型 // YYtgModel *tgmodel=[[YYtgModel alloc]init]; // tgmodel.title=@"菜好上桌"; // tgmodel.icon=@"5ee372ff039073317a49af5442748071"; // tgmodel.buyCount=@"20"; // tgmodel.price=@"10000"; // //將模型添加到數組中 // [self.tg addObject:tgmodel]; // // YYtgModel *tgmodelq=[[YYtgModel alloc]init]; // tgmodelq.title=@"菜好上桌1"; // tgmodelq.icon=@"5ee372ff039073317a49af5442748071"; // tgmodelq.buyCount=@"20"; // tgmodelq.price=@"10000"; // // [self.tg addObject:tgmodelq]; // //刷新表格 // [self.tableview reloadData]; //}- (void)viewDidLoad {[super viewDidLoad];self.tableview.rowHeight=80.f;//加載底部視圖//從xib中獲取數據UINib *nib=[UINib nibWithNibName:@"YYfooterview" bundle:nil];YYfooterview *footerview=[[nib instantiateWithOwner:nil options:nil] firstObject];self.tableview.tableFooterView=footerview;//設置控制 // footerview.controller=self;//設置代理footerview.delegate=self; } #pragma mark- 懶加載 -(NSArray *)tg {if (_tg==nil) {NSString *fullpath=[[NSBundle mainBundle]pathForResource:@"tgs.plist" ofType:nil];NSArray *temparray=[NSArray arrayWithContentsOfFile:fullpath];NSMutableArray *arrayM=[NSMutableArray arrayWithCapacity:temparray.count];for (NSDictionary *dict in temparray) {YYtgModel *tg=[YYtgModel tgWithDict:dict];[arrayM addObject:tg];}_tg=arrayM;}return _tg; }#pragma mark- xib創建cell數據處理#pragma mark 多少組 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {return 1; }#pragma mark多少行 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {return self.tg.count; }#pragma mark設置每組每行 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {//1.創建cellYYtgcell *cell=[YYtgcell tgcellWithTableView:tableView];//2.獲取當前行的模型,設置cell的數據YYtgModel *tg=self.tg[indexPath.row];cell.yytg=tg;//3.返回cellreturn cell; }#pragma mark- 隱藏狀態欄 -(BOOL)prefersStatusBarHidden {return YES; }@end

?

轉載于:https://www.cnblogs.com/yipingios/p/5549874.html

總結

以上是生活随笔為你收集整理的iOS开发UI篇－在UItableview中实现加载更多功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。