iOS开发-------模拟团购网站(UITableView 表格视图)以及自定义cell

上一篇博客说了UIScrollView(滚动视图)，以及如何实现无限滚动的原理，那么这一次结合UIScrollView,以及UITableView(表格视图)做一个模拟团购的小Demon,并使用了xib以及加载pilsit文件，因为这个demon楼主做了比较久了，属于学iOS的初级demon,所以没有使用任何的约束，也没有任何的MVC思想，因为要想达到比较好的效果，用iPhone4或者IPhone4s的3.5英寸的屏幕观看，效果如下

Model类

为何会出现model类，那么请看一下plist文件

总体是一个数组，每一个数组元素是一个字典，那么字典其实就可以看做一个model,so,model类就非常简单了，Food类如下

#import <UIKit/UIKit.h>@interface Food : NSObject@property(nonatomic,strong) NSString * icon;//图片路径
@property(nonatomic,strong) NSString * name;//图片名
@property(nonatomic,strong) NSString * price;//价格
@property(nonatomic,strong) NSString * buyCount;//购买人数-(instancetype)initWithDict:(NSDictionary *)dic;//便利构造器
+(instancetype)foodWithDict:(NSDictionary *)dic;@end

实现文件也就这两个方法

- (instancetype)initWithDict:(NSDictionary *)dic
{self = [super init];if (self){//通过KVC简易赋值[self setValuesForKeysWithDictionary:dic];}return self;
}+ (instancetype)foodWithDict:(NSDictionary *)dic
{__autoreleasing Food * food = [[Food alloc]initWithDict:dic];return food;
}

HeadView（表格视图的表头视图，即滚动视图）

因为用的xib,那么什么是xib呢，在storyboard出现之前，与storyboard的作用类似，为了方便做视图上的布局，当然现在有了storyboard，功能会比xib强得多，但xib也要会，就当做练习一下。

介绍一下xib如何创建，NewFile - > User Interface - > Empty即可,一般情况下，与绑定的类命名是相同的，为了方便看

首先看一下表头的xib文件，上面是一个UIScrollView(滚动视图)，中间是一个view,只不过宽度是1，所以看起来像一条线，最下面是一个label,用来显示文字“猜您喜欢”的。绑定类的位置也已经做了标注，不要绑定错了。

在声明文件中.h需要声明一个属性以及一个方法，如下

//
//  HeadLoad.h
//  团购网站
//
//  Created by YueWen on 15/9/1.
//  Copyright (c) 2015年 YueWen. All rights reserved.
//#import <UIKit/UIKit.h>@interface HeadLoad : UIView@property(nonatomic,assign,readonly) NSInteger numberOfImage;//scrollView中图片的数量-(instancetype)loadHeadView:(NSArray *)arrayImage;//加载ScrollView的图片@end

在实现文件中拖入输出口，并且加入一个计时器(NSTimer)的属性，如下

@interface HeadLoad ()<UIScrollViewDelegate>@property (strong, nonatomic) IBOutlet UIScrollView *scrollView;@property (strong, nonatomic) IBOutlet UIPageControl *pageControl;@property (strong,nonatomic) NSTimer * timer;@end

因为这一部分与上一篇中的描述是一样的，所以不再做过多的解释，如想了解一下UIScrollView以及无限循环请去前一篇博客瞅瞅，3Q iOS学习-------滚动视图(UIScrollView)并实现循环滚动

这一部分有一个特别需要提及的，就是当滑动数值的tableView的时候，tableView的优先级很高，计时器由于优先级不够，所以会被抛弃，也就是不会执行timer,这里就需要几句话，提高一下timer的优先级

//提高timer的优先级
NSRunLoop * runLoop = [NSRunLoop currentRunLoop];//获得当前的运行池,现在看来和用子线程是一样的，只不过这个是将timer添加到了主线程中
[runLoop addTimer:self.timer forMode:NSRunLoopCommonModes];

其他的就不多说了。

FootView （加载更多）

依旧是xib构造，思路是在最下层有一个风火轮(Action Indicator),也就是那么转的东西，还有一个label上显示着努力加载中，最上面是一层view,覆盖住下面的风火轮以及label,只有当点击的时候，最上面的按钮隐藏，所以会出现转的风火轮以及正在努力加载的label,依旧不要忘记绑定类,

但是他麻烦就麻烦在，点击加载更多的时候，需要tableView来刷新列表，那么这个footView中没有tableView,用到其他view的组件,所以就用到了回调，楼主用的是委托回调

所以在声明文件中声明一个协议

@protocol FootLoadDelegate <NSObject>@required//必须有-(void)loadData:(FootLoad *)foodLoad;//加载数据@end

如果有协议，那么必然会存在一个协议属性delegate，可以是任何类型，唯一的条件就是必须履行协议，代理属性如下

@property(nonatomic,weak)id<FootLoadDelegate> delegate;

稍微麻烦点的东西就在实现文件中，其实也不难，首先将button组件拖入FootView,形成输出口

@interface FootLoad ()@property (strong, nonatomic) IBOutlet UIButton *footLoadLoadMore;//加载更多的按钮
@property (strong, nonatomic) IBOutlet UIView *footLoadLabelView;//最下层贴着label以及烽火轮的view@end

实现方法中只需要两个方法即可，一个是button的点击事件，一个是协议的方法

button的回调事件如下

//为按钮点击进行监听
- (IBAction)clickLoadMoreButton
{self.footLoadLabelView.hidden = NO;//努力加载以及风火轮出现self.footLoadLoadMore.hidden = YES;//加载更多的按钮隐藏//通过GCD延迟1.5秒后运行dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{//执行代理的loadData方法[self.delegate loadData:self];//时间到self.footLoadLoadMore.hidden = NO;//加载更多的按钮出现self.footLoadLabelView.hidden = YES;//努力加载以及风火轮被覆盖});}

协议方法如下

-(void)loadData:(FootLoad *)foodLoad
{//如果代理遵守了协议，即重写了loadData方法if (![self.delegate respondsToSelector:@selector(loadData:)]){//执行代理的方法[self.delegate loadData:self];}}

自定义cell

自定义的cell也是用xib做的，和storyboard一样用，拖入一个UITableViewCell,在上面布局即可

首先声明文件中声明外界调用的方法，用于设置cell的各个属性

-(void)setFood:(Food *)food;

输出口不在声明文件中，所以必然会在实现文件中的延展中，如下

@interface MyCell ()
@property (strong, nonatomic) IBOutlet UIImageView *myCellImageView;//显示图片的imageView
@property (strong, nonatomic) IBOutlet UILabel *myCellFoodName;//显示食物的名字
@property (strong, nonatomic) IBOutlet UILabel *myCellFoodPrice;//显示食物的价格
@property (strong, nonatomic) IBOutlet UILabel *myCellFoodBuyCount;//显示食物的购买人数
@end

接着实现setFood:方法即可

-(void)setFood:(Food *)food
{
self.myCellImageView.image = [UIImage imageNamed:[food icon]];
self.myCellFoodName.text = [food name];
self.myCellFoodPrice.text = [NSString stringWithFormat:@"￥ %@",[food price]];
self.myCellFoodBuyCount.text = [NSString stringWithFormat:@"%@ 人已经购买",[food buyCount]];
}

接着就是在自定义的类MyCell中拖入输出口，但是不希望外界修改，那么只给外界提供一个方法接口，传入一个Food类，直接打包好一个cell即可

ViewController(控制器)

首先延展中定义两个属性，一个是显示各个食物的tableView,一个是存储plist文件中的Food对象，如下

#import "ViewController.h"
#import "Food.h"
#import "MyCell.h"
#import "FootLoad.h"
#import "HeadLoad.h"@interface ViewController ()<UITableViewDataSource,UITableViewDelegate,FootLoadDelegate>@property(nonatomic,strong)UITableView * tableView;//显示食物的表格视图
@property(nonatomic,strong)NSMutableArray * foods;//存储所有的食物对象，因为可以添加，所以是可变数组
@end

履行UITableViewDelegate协议以及UITableViewDataSource协议，是因为需要通过协议的方法设置tableView的显示属性，比较详细的tableView介绍可以去 iOS学习-------简单通讯录(UITableView和CoreData的应用)瞧一瞧

接着重写foods的getter方法，有的地方也喜欢叫做懒加载，就是说，只执行一次，如果foods没有值的时候，才会给它赋值，一旦有值了，也就是不为nil了，那么就直接返回，懒加载如下

#pragma mark - 懒加载
-(NSMutableArray *)foods
{NSMutableArray * array = [NSMutableArray array];//如果数据数组为nil的时候if (!_foods){//获得plist的文件路径NSString * path = [[NSBundle mainBundle] pathForResource:@"foods" ofType:@"plist"];//创建储存所有plist数据的数组NSArray * allData = [NSArray arrayWithContentsOfFile:path];//开始遍历数组，并添加数据for (NSDictionary * dic in allData){//创建模型Food * food = [Food foodWithDict:dic];[array addObject:food];}//为数据赋值_foods = array;}return _foods;
}

viewDidLoad如下，用来设置tableView的相关属性，以及设置表示图的表头视图和表尾视图

- (void)viewDidLoad {[super viewDidLoad];self.tableView = [[UITableView alloc] initWithFrame:self.view.frame style:UITableViewStylePlain];//设置tableView的格式为不分组self.tableView.rowHeight = 90;//每个cell的高度为90self.tableView.showsVerticalScrollIndicator = NO;//设置垂直指示器不显示[self.view addSubview:self.tableView];//设置数据源和代理对象self.tableView.delegate = self;self.tableView.dataSource = self;//加载最下侧的 加载更多 viewFootLoad * footView = [[[NSBundle mainBundle] loadNibNamed:@"FootLoad" owner:nil options:nil] firstObject];//加载xib中的组件用该方法，xib中可能右多个组件，所以会返回一个数组，自己做的xib里面只有一个组件，所以取第一个对象或者最后一个都可以//设置代理footView.delegate = self;self.tableView.tableFooterView = footView;//将tableView的footView设置成//加载最上侧的 scrollViewHeadLoad * headView = [[[NSBundle mainBundle] loadNibNamed:@"HeadLoad" owner:nil options:nil] firstObject];[headView loadHeadView:self.foods];self.tableView.tableHeaderView = headView;}

接着实现UItableViewDataSource的两个方法

#pragma mark - 实现UITableViewDataSource 方法
//返回一共多少行
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{//foods有多少个food对象既为多少行return self.foods.count;
}//返回cell
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{//创建 cell 的idstatic NSString * cellId = @"cellId";//根据id从缓冲池中查找CellMyCell * cell = [tableView dequeueReusableCellWithIdentifier:cellId];//如果没有查找到if (!cell){//从xib中加载cellcell = [[[NSBundle mainBundle] loadNibNamed:@"MyCell" owner:nil options:nil] firstObject];}//赋值[cell setFood:self.foods[indexPath.row]];return cell;}

履行footViewDelegate的方法，用于刷新当前的tableView

#pragma mark - 履行 FootLoadDelegate 的协议方法
-(void)loadData:(FootLoad *)foodLoad
{//随机的一个数字int random = arc4random()%(self.foods.count);//根据随机数字 取出模型foodFood * food = self.foods[random];//将 模型对象 添加到控制器的foods[self.foods addObject:food];//刷新tableView[self.tableView reloadData];//滚动数据NSIndexPath * indexPath = [NSIndexPath indexPathForRow:self.foods.count - 1 inSection:0];[self.tableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionTop animated:YES];//最下边的滚到最上面}

如果不想要上面那个显示电池的框，用下方法不显示

#pragma mark - 隐藏信息栏
-(BOOL)prefersStatusBarHidden
{return YES;
}