iOS开发UI篇—在UItableview中实现加载更多功能

iOS开发UI篇—在UItableview中实现加载更多功能

一、实现效果

点击加载更多按钮，出现一个加载图示，三秒钟后添加两条新的数据。

                    

二、实现代码和说明

当在页面（视图部分）点击加载更多按钮的时候，主页面（主控制器）会加载两条数据进来。

视图部分的按钮被点击的时候，要让主控制器加载数据，刷新表格，2B青年会在视图中增加一个主控制器的属性，通过这个属性去调用进行加载，但在开发中通常通过代理模式来完成这个操作。

下面分别是两种实现的代码。

1、项目结构和说明

说明：加载更多永远都放在这个tableview的最下端，因此这里设置成了这个tableview的tableFooterView。

 self.tableview.tableFooterView=footerview;

在实现上通过xib来进行处理，考虑到左右的留白，以及点击后的要切换到加载按钮和文字，要同时控制图标和文字，因此把加载图标和文字提示放在了一个view中以便控制，这个xib已经和YYfooterview.xib进行了关联，通过这个类来控制xib。

2、实现代码

（1）.垃圾代码

数据模型部分

TXtg.h文件

//  Created by 鑫 on 14-10-8.
//  Copyright (c) 2014年 梁镋鑫. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface TXTg : NSObject
/**
 *  标题
 */
@property(nonatomic,copy)NSString *title;
/**
 *  价格
 */
@property(nonatomic,copy)NSString *price;
/**
 *  图片
 */
@property(nonatomic,copy)NSString *icon;
/**
 *  购买人数
 */
@property(nonatomic,copy)NSString *buyCount;
-(instancetype)initWithDict:(NSDictionary *)dict;
+(instancetype)tgWithDict:(NSDictionary *)dict;
@end

TXtg.m文件

#import "TXTg.h"

@implementation TXTg
-(instancetype)initWithDict:(NSDictionary *)dict;
{
    if (self = [super init]) {
        [self setValuesForKeysWithDictionary:dict];
    }
    return self;
}
+(instancetype)tgWithDict:(NSDictionary *)dict
{
    return [[self alloc]initWithDict:dict];
    
}
@end

视图部分

TXtgcell.h文件

//  屌丝逆天记-团购-01
//
//  Created by 鑫 on 14-10-8.
//  Copyright (c) 2014年 梁镋鑫. All rights reserved.
//

#import <UIKit/UIKit.h>
@class TXTg;
@interface TXTgCell : UITableViewCell
/**
 *  通过一个tableview来创建一个cell
 */
+(instancetype)cellWithTableView:(UITableView *)tableView;
/**
 *  团购模型
 */
@property(nonatomic ,strong)TXTg *tg;

@end

TXtgcell.m文件

#import "TXTgCell.h"
#import "TXTg.h"
@interface TXTgCell()
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
@property (weak, nonatomic) IBOutlet UILabel *titleView;
@property (weak, nonatomic) IBOutlet UILabel *priceView;
@property (weak, nonatomic) IBOutlet UILabel *buyCountView;

@end
@implementation TXTgCell
+(instancetype)cellWithTableView:(UITableView *)tableView
{
    static NSString *ID =@"tg";
    TXTgCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    if (cell ==nil) {
        //从xib中加载cell
        cell = [[[NSBundle mainBundle] loadNibNamed:@"TXTgCell" owner:nil options:nil] lastObject];
    }
    return cell;
}
-(void)setTg:(TXTg *)tg
{
    _tg = tg;
    
    //图片
    self.iconView.image = [UIImage imageNamed:tg.icon];
    self.titleView.text = tg.title;
    self.priceView.text = [NSString stringWithFormat:@"￥%@",tg.price];
    
    self.buyCountView.text = [NSString stringWithFormat:@"%@人已购买", tg.buyCount];
}



@end

TXTgFooterView.h文件

#import <UIKit/UIKit.h>
@class TXViewController;
@interface TXTgFooterView : UIView
/**
 *  快速创建一个footerView对象
 
 */
+(instancetype )footerView;
@property(nonatomic ,strong)TXViewController *controller;

@end

TXTgFooterView.m文件

#import "TXTgFooterView.h"
#import "TXViewController.h"
@interface TXTgFooterView()
@property (weak, nonatomic) IBOutlet UIButton *loadBtn;
@property (weak, nonatomic) IBOutlet UIView *loadingView;

@end
@implementation TXTgFooterView
+(instancetype)footerView
{
     return [[[NSBundle mainBundle] loadNibNamed:@"TXTgFooterView" owner:nil options:nil] lastObject];
}
- (IBAction)loadBtnClick {
    //隐藏加载按钮
    self.loadBtn.hidden = YES;
    //显示正在加载
    self.loadingView.hidden = NO;
    
    //显示更多按钮
    //GCD延迟加载
    
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{// 3.0s后执行block里面的代码
        
        [self.controller loadingMoreData];
        
        // 4.显示加载按钮
        self.loadBtn.hidden = NO;
        
        // 5.隐藏"正在加载"
        self.loadingView.hidden = YES;
        
    });
    
    
    
}


@end

主控制器

TXViewController.h文件

#import <UIKit/UIKit.h>

@interface TXViewController : UIViewController
- (void)loadingMoreData;
@end

TXViewController.m文件

#import "TXViewController.h"
#import "TXTg.h"
#import "TXTgCell.h"
#import "TXTgFooterView.h"
@interface TXViewController ()<UITableViewDataSource>
@property (weak, nonatomic) IBOutlet UITableView *tableview;

@property(nonatomic ,strong)NSMutableArray *tgs;

@end

@implementation TXViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //设置每一行cell的高度
    self.tableview.rowHeight =80;
    
    //设置footerView
    TXTgFooterView * footer = [TXTgFooterView footerView];
    footer.controller = self;
    self.tableview.tableFooterView = footer;
  
}
/**
 *  隐藏状态栏
 */
- (BOOL)prefersStatusBarHidden
{
    return YES;
}
/**
 *  数据的懒加载
 */
-(NSMutableArray *)tgs
{
    if (_tgs ==nil) {
        //初始化
        NSString *path = [[NSBundle mainBundle]pathForResource:@"tgs.plist" ofType:nil];
        //加载数组
        
        NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];
        
        //3.将dictArray里面的所有字典转成模型对象，放到新的数组中
        NSMutableArray *tgArray = [NSMutableArray array];
        
        for (NSDictionary *dict in dictArray) {
            //创建模型对象
            TXTg *tg = [TXTg tgWithDict:dict];
            
            // 加载模型对象倒数组中
            [tgArray addObject:tg];
            
        }
        _tgs = tgArray;
        
    }
    return _tgs;
}
/**
 *  加载更多的数据
 */
-(void)loadingMoreData
{
    //添加更多模型数据
    TXTg *tg = [[TXTg alloc]init];
    tg.icon =@"ad_01";
    tg.title = @"jsfsdfjjsd";
    tg.price = @"100";
    tg.buyCount = @"0";
    [self.tgs addObject:tg];
    // 2.刷新表格(告诉tableView重新加载模型数据, 调用tableView的reloadData)
    [self.tableview reloadData];
    
}

#pragma mark --数据源方法
/**
 *  一共多少行
 */
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.tgs.count;
}
/**
 *  每一行显示怎样的cell
 */
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //创建cell
    TXTgCell *cell = [TXTgCell cellWithTableView:tableView];
    
    //给cell传递模型数据
    cell.tg  = self.tgs[indexPath.row];
    return cell;
}
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

2.通过代理完成

当按钮被点击的时候，视图部分本身不干活，而是通知它的代理（控制器）完成接下来的操作。

该部分代码在1的基础上对下面几个文件进行了修改：

视图部分：

TXTgFooterView.h文件

#import <UIKit/UIKit.h>
@class TXTgFooterView;
/**
 1.协议名称:  控件类名 + Delegate
 2.代理方法普遍都是@optional
 3.
 */
@protocol TXTfFooterViewDelegate <NSObject>

@optional
-(void)tgFooterViewDidClickedLoadBtn:(TXTgFooterView *)tgFooterView;

@end


@interface TXTgFooterView : UIView

/**
 *  快速创建一个footerView对象
 */
+ (instancetype)footerView;

//定义一个代理，这个代理必须实现<TXTgFooterViewDelegate>这个协议
@property(nonatomic,weak) id <TXTfFooterViewDelegate> delegate;


@end

TXTgFooterView.m文件

#import "TXTgFooterView.h"
#import "TXViewController.h"

@interface TXTgFooterView()
- (IBAction)loadBtnClick;
@property (weak, nonatomic) IBOutlet UIButton *loadBtn;
@property (weak, nonatomic) IBOutlet UIView *loadingView;
@end

@implementation TXTgFooterView

+ (instancetype)footerView
{
    return [[[NSBundle mainBundle] loadNibNamed:@"TXTgFooterView" owner:nil options:nil] lastObject];
}

/**
 *  点击"加载"按钮
 */
- (IBAction)loadBtnClick {
    // 1.隐藏加载按钮
    self.loadBtn.hidden = YES;
    
    // 2.显示"正在加载"
    self.loadingView.hidden = NO;
    
    // 3.显示更多的数据
    // GCD
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ // 3.0s后执行block里面的代码
        if ([self.delegate respondsToSelector:@selector(tgFooterViewDidClickedLoadBtn:)]) {
            [self.delegate tgFooterViewDidClickedLoadBtn:self];
        }
        // 4.显示加载按钮
        self.loadBtn.hidden = NO;
        
        // 5.隐藏"正在加载"
        self.loadingView.hidden = YES;
    });
}
@end

主控制器部分

TXViewController.h文件

1 #import <UIKit/UIKit.h>
2 
3 @interface TXViewController : UIViewController
4 - (void)loadingMoreData;
5 @end

TXViewController.m文件

#import "TXViewController.h"
#import "TXTg.h"
#import "TXTgCell.h"
#import "TXTgFooterView.h"
#import "TXTXTgHeaderView.h"
@interface TXViewController () <UITableViewDataSource,TXTfFooterViewDelegate>
@property (weak, nonatomic) IBOutlet UITableView *tableView;
@property (nonatomic, strong) NSMutableArray *tgs;
@end

@implementation TXViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 设置每一行cell的高度
    self.tableView.rowHeight = 80;
  
    // 设置footerView
    TXTgFooterView *footer = [TXTgFooterView footerView];
    footer.delegate =self;
    self.tableView.tableFooterView = footer;
    
    
    //设置headerView
    self.tableView.tableHeaderView = [TXTXTgHeaderView headerView];
    
    // 设置tableView尾部显示的控件(tableFooterView的宽度永远是tableView的宽度)
    // tableFooterView只需要设置高度
//    UIButton *footerBtn = [UIButton buttonWithType:UIButtonTypeSystem];
//    footerBtn.frame = CGRectMake(0, 0, 0, 35);
//    footerBtn.backgroundColor = [UIColor orangeColor];
//    [footerBtn setTitle:@"加载更多团购" forState:UIControlStateNormal];
    
//    UINib *nib = [UINib nibWithNibName:@"TXTgFooterView" bundle:[NSBundle mainBundle]];
    
    // 创建nib对象
//    UINib *nib = [UINib nibWithNibName:@"TXTgFooterView" bundle:nil];
//    
//    // 加载xib
ib
//    UIView *footerView = [[nib instantiateWithOwner:nil options:nil] lastObject];
//    self.tableView.tableFooterView = footerView;
}

/**
 *  加载更多的数据
 */
- (void)tgFooterViewDidClickedLoadBtn:(TXTgFooterView *)tgFooterView
{
     #warning 正常开发:发送网络请求给远程的服务器
    // 1.添加更多的模型数据
    TXTg *tg = [[TXTg alloc] init];
    tg.icon = @"ad_01";
    tg.title = @"新增加的团购数据..";
    tg.price = @"100";
    tg.buyCount = @"0";
    [self.tgs addObject:tg];
    
    // 2.刷新表格(告诉tableView重新加载模型数据, 调用tableView的reloadData)
    [self.tableView reloadData];
}

/**
 *  隐藏状态栏
 */
- (BOOL)prefersStatusBarHidden
{
    return YES;
}

/**
 *  数据的懒加载
 */
- (NSMutableArray *)tgs
{
    if (_tgs == nil) {
        // 初始化
        // 1.获得plist的全路径
        NSString *path = [[NSBundle mainBundle] pathForResource:@"tgs.plist" ofType:nil];
        
        // 2.加载数组
        NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];
        
        // 3.将dictArray里面的所有字典转成模型对象,放到新的数组中
        NSMutableArray *tgArray = [NSMutableArray array];
        for (NSDictionary *dict in dictArray) {
            // 3.1.创建模型对象
            TXTg *tg = [TXTg tgWithDict:dict];
            
            // 3.2.添加模型对象到数组中
            [tgArray addObject:tg];
        }
        
        // 4.赋值
        _tgs = tgArray;
    }
    return _tgs;
}

#pragma mark - 数据源方法
/**
 *  一共有多少行数据
 */
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.tgs.count;
}

/**
 *  每一行显示怎样的cell
 */
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 1.创建cell
    TXTgCell *cell = [TXTgCell cellWithTableView:tableView];
    
    // 2.给cell传递模型数据
    cell.tg = self.tgs[indexPath.row];
    return cell;
}
@end