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.創建cell
    YYtgcell *cell=[YYtgcell tgcellWithTableView:tableView];
   
    //2.獲取當前行的模型,設置cell的數據
    YYtgModel *tg=self.tg[indexPath.row];
    cell.yytg=tg;
    
    //3.返回cell
    return 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; 14 @end

@interface YYfooterview : UIView

//聲明一個id類型屬性，遵守了協議的“人”即可成為它的代理
@property(nonatomic,strong)id<YYfooterviewDelegate> delegate; 20 //@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]; 31         // 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  24 {
    //創建模型
    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;  80 }
#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.創建cell
    YYtgcell *cell=[YYtgcell tgcellWithTableView:tableView];
   
    //2.獲取當前行的模型,設置cell的數據
    YYtgModel *tg=self.tg[indexPath.row];
    cell.yytg=tg;
    
    //3.返回cell
    return cell;
}

#pragma mark- 隱藏狀態欄
-(BOOL)prefersStatusBarHidden
{
    return YES;
}

@end