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

简介: 一、实现效果 点击加载更多按钮,出现一个加载图示,三秒钟后添加两条新的数据。                        二、实现代码和说明 当在页面(视图部分)点击加载更多按钮的时候,主页面(主控制器)会加载两条数据进来。

一、实现效果

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

                    

 

二、实现代码和说明

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

视图部分的按钮被点击的时候,要让主控制器加载数据,刷新表格,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的基础上对下面几个文件进行了修改:

视图部分:

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

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         //通知代理
30         [self.delegate footerviewLoadMore];
31         // 4.隐藏菊花视图
32         self.loadingview.hidden = YES;
33         // 5.显示按钮
34         self.loadbtn.hidden = NO;
35     });
36 }
37 
38 @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,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

 

目录
相关文章
|
4天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
6天前
|
安全 数据处理 Swift
深入探索iOS开发中的Swift语言特性
本文旨在为开发者提供对Swift语言在iOS平台开发的深度理解,涵盖从基础语法到高级特性的全面分析。通过具体案例和代码示例,揭示Swift如何简化编程过程、提高代码效率,并促进iOS应用的创新。文章不仅适合初学者作为入门指南,也适合有经验的开发者深化对Swift语言的认识。
24 9
|
6天前
|
Android开发 Swift iOS开发
探索安卓与iOS开发的差异和挑战
【10月更文挑战第37天】在移动应用开发的广阔舞台上,安卓和iOS这两大操作系统扮演着主角。它们各自拥有独特的特性、优势以及面临的开发挑战。本文将深入探讨这两个平台在开发过程中的主要差异,从编程语言到用户界面设计,再到市场分布的不同影响,旨在为开发者提供一个全面的视角,帮助他们更好地理解并应对在不同平台上进行应用开发时可能遇到的难题和机遇。
|
4天前
|
iOS开发 开发者
探索iOS开发中的SwiftUI框架
【10月更文挑战第39天】在苹果的生态系统中,SwiftUI框架以其声明式语法和易用性成为开发者的新宠。本文将深入SwiftUI的核心概念,通过实际案例展示如何利用这一框架快速构建用户界面,并探讨其对iOS应用开发流程的影响。
|
7天前
|
JSON 前端开发 API
探索iOS开发之旅:打造你的第一个天气应用
【10月更文挑战第36天】在这篇文章中,我们将踏上一段激动人心的旅程,一起构建属于我们自己的iOS天气应用。通过这个实战项目,你将学习到如何从零开始搭建一个iOS应用,掌握基本的用户界面设计、网络请求处理以及数据解析等核心技能。无论你是编程新手还是希望扩展你的iOS开发技能,这个项目都将为你提供宝贵的实践经验。准备好了吗?让我们开始吧!
|
11天前
|
设计模式 前端开发 Swift
探索iOS开发:从初级到高级的旅程
【10月更文挑战第31天】在这篇文章中,我们将一起踏上iOS开发的旅程。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的信息和技巧。我们将从基础开始,逐步深入到更高级的技术和概念。让我们一起探索iOS开发的世界吧!
|
14天前
|
设计模式 前端开发 Swift
探索iOS开发:从初级到高级的旅程
【10月更文挑战第28天】在这篇技术性文章中,我们将一起踏上一段探索iOS开发的旅程。无论你是刚入门的新手,还是希望提升技能的开发者,这篇文章都将为你提供宝贵的指导和灵感。我们将从基础概念开始,逐步深入到高级主题,如设计模式、性能优化等。通过阅读这篇文章,你将获得一个清晰的学习路径,帮助你在iOS开发领域不断成长。
46 2
|
21天前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
73 8
|
20天前
|
安全 API Swift
探索iOS开发中的Swift语言之美
【10月更文挑战第23天】在数字时代的浪潮中,iOS开发如同一艘航船,而Swift语言则是推动这艘船前进的风帆。本文将带你领略Swift的独特魅力,从语法到设计哲学,再到实际应用案例,我们将一步步深入这个现代编程语言的世界。你将发现,Swift不仅仅是一种编程语言,它是苹果生态系统中的一个创新工具,它让iOS开发变得更加高效、安全和有趣。让我们一起启航,探索Swift的奥秘,感受编程的乐趣。
|
22天前
|
Swift iOS开发 开发者
探索iOS开发中的SwiftUI框架
【10月更文挑战第21天】在苹果生态系统中,SwiftUI的引入无疑为iOS应用开发带来了革命性的变化。本文将通过深入浅出的方式,带领读者了解SwiftUI的基本概念、核心优势以及如何在实际项目中运用这一框架。我们将从一个简单的例子开始,逐步深入到更复杂的应用场景,让初学者能够快速上手,同时也为有经验的开发者提供一些深度使用的技巧和策略。
45 1