使用xib文件创建UITableViewCell

现在我们看一下最终效果：上部：

底部：

如上图中，可以使用表格UITableView，顶部的图片轮换可以采用scrollView,加上一个定时器。中间部分，因为每一个cell的中子控件位置固定，大小固定。底部有一个加载更多的按钮。所以，我们可以对顶部图片轮换，中间固定部分，底部，加载更多部分，都使用xib文件。顶部作为表格的头部，中间作为表格的每一个cell ,底部加载更多作为表格的底部部分。

一：代码结构如图：

代码部分解析：

1, 第一部分是控制器
2, 第二部分是cell的view类和xib文件，cell模型类继承自UITableViewCell .
3, 第三部分是尾部的view类和xib
4, 第四部分是头部的view类和xib
5, 第五部分是模型对象

二：代码部分：

1，ViewController.m文件：

#import "MJViewController.h"

#import "MJTg.h"

#import "MJTgCell.h"

#import "MJTgFooterView.h"

#import "MJTgHeaderView.h"



@interface MJViewController () <UITableViewDataSource,MJTgFooterViewDelegate>

@property (weak, nonatomic) IBOutlet UITableView *tableView;

@property(nonatomic,strong) NSMutableArray *tgs;

@end

@implementation MJViewController



- (void)viewDidLoad

{

    [super viewDidLoad];

    //设置每一行的高度

self.tableView.rowHeight = 80;

    

    MJTgFooterView *footerView = [MJTgFooterView tgFooterView];

    footerView.delegate =self;

    self.tableView.tableFooterView = footerView;

    

    self.tableView.tableHeaderView = [MJTgHeaderView tgHeaderView];

    

}

#pragma mark - MJTgFooterViewDelegate的代理方法

/** 加载按钮的更多数据 */

-(void)tgFooterViewDidLoadBtnClick:(MJTgFooterView *)tgfooterView{

   

    //加载更多的模型数据

    int count = self.tgs.count;

    NSArray *array = self.tgs;

    for (int i=0; i<count; i++) {

        MJTg *tg = array[i];

        MJTg *tempTg = [[MJTg alloc] init];

        tempTg.title = tg.title;

        tempTg.icon =tg.icon;

        tempTg.price = tg.price;

        tempTg.buyCount = tg.buyCount;

        

        [self.tgs addObject:tempTg];

    }    

    //2,刷新表格，高数tableView重新加载模型数据，调用tableView的reloadData方法

    [self.tableView reloadData];

}



-(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 创建模型对象

            MJTg *tg=[MJTg 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{ 

    MJTgCell *cell =[MJTgCell cellWithTableView:tableView];

    MJTg *tg = self.tgs[indexPath.row];

    cell.tg =tg;

    return cell;

}

@end

2，TgCell的xib文件和TgCell.h对应的部分，如图：

TgCell.h代码如下：

#import <Foundation/Foundation.h>

@class MJTg;

@interface MJTgCell : UITableViewCell



@property (weak, nonatomic) IBOutlet UIImageView *iconView;



@property (weak, nonatomic) IBOutlet UILabel *titleLbl;

@property (weak, nonatomic) IBOutlet UILabel *priceLbl;

@property (weak, nonatomic) IBOutlet UILabel *buyCountLbl;



/** 团购模型 */

@property(nonatomic,strong) MJTg *tg;



/**

 通过一个tableView来创建一个cell

 */



+(id)cellWithTableView:(UITableView *)tableView;



@end



TgCell.m文件如下：



#import "MJTgCell.h"

#import "MJTg.h"

@implementation MJTgCell



+(id)cellWithTableView:(UITableView *)tableView{

    static NSString *flag= @"tgs";

    

    MJTgCell *cell = [tableView dequeueReusableCellWithIdentifier:flag];

    if(cell ==nil){

        cell = [[NSBundle mainBundle] loadNibNamed:@"MJTgCell" owner:nil options:nil][0];

        

    }

    return cell;

}



-(void)setTg:(MJTg *)tg{

    self.iconView.image = [UIImage imageNamed:tg.icon];

    self.titleLbl.text = tg.title;

    self.priceLbl.text = [NSString stringWithFormat:@"￥%@",tg.price];

    self.buyCountLbl.text = [NSString stringWithFormat:@"%@人已购买",tg.buyCount];

}



@end

3，TgFooterView的xib文件和TgFooterView.h对象如下：

这儿需要注意一点：当点击加载更多按钮之后，将刷新按钮和正在拼命加载显示出来。所以，一开始的时候，将view隐藏，当点击按钮之后，再将按钮隐藏，view显示出来。

TgFooterView.h代码如下：

#import <UIKit/UIKit.h>

@class MJTgFooterView;

@protocol MJTgFooterViewDelegate <NSObject>



@optional

-(void)tgFooterViewDidLoadBtnClick:(MJTgFooterView *)tgfooterView;



@end



@interface MJTgFooterView : UIView



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



+(id)tgFooterView;



@end



TgFooterView.m文件代码：



#import "MJTgFooterView.h"



@interface MJTgFooterView ()

@property (weak, nonatomic) IBOutlet UIButton *loadBtn;

@property (weak, nonatomic) IBOutlet UIView *loadingView;

- (IBAction)loadBtnClick;



@end

@implementation MJTgFooterView



+(id)tgFooterView{

    //创建Nib对象

//    UINib *nib = [UINib nibWithNibName:@"MJTgFooterView" bundle:[NSBundle mainBundle]];

//    return [[nib instantiateWithOwner:nil options:nil] lastObject];

    

    return [[NSBundle mainBundle] loadNibNamed:@"MJTgFooterView" owner:nil options:nil][0];

}



- (IBAction)loadBtnClick {

    

    //1,将加载按钮隐藏

    self.loadBtn.hidden = YES;

    

    //2,刷新按钮显示出来

    self.loadingView.hidden = NO;

    

    //3.0秒之后执行block中

    dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC));

    dispatch_after(popTime, dispatch_get_main_queue(), ^(void){

        //3,通知代理，按钮被人点击了

        if([self.delegate respondsToSelector:@selector(tgFooterViewDidLoadBtnClick:)]){

            [self.delegate tgFooterViewDidLoadBtnClick:self];

        }

        

        //4,加载按钮显示，刷新按钮隐藏

        self.loadBtn.hidden = NO;

        self.loadingView.hidden = YES;

        

    });

}

@end

3，TgHeaderView的xib和TgHeaderView属性对应部分：

TgHeaderView.h文件的代码：

#import <UIKit/UIKit.h>



@interface MJTgHeaderView : UIView



+(id)tgHeaderView;



@end



TgHeaderView.m文件代码：



#import "MJTgHeaderView.h"



#define MJImgCount 5



@interface MJTgHeaderView () <UIScrollViewDelegate>

@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;

@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;



@property(nonatomic,strong) NSTimer *timer;

@end



@implementation MJTgHeaderView 





+(id)tgHeaderView{

    

    return [[[NSBundle mainBundle] loadNibNamed:@"MJTgHeaderView" owner:nil options:nil] lastObject];

}



/** 当xib文件唤醒之后调用（就是xib文件上的空间加载完之后就会调用这个方法） */

-(void)awakeFromNib{

   

    //1,设置scrollView的代理

    self.scrollView.delegate = self;

    //2,设置scrollView中的image中的参数

    CGFloat imgViewY = 0;

    CGFloat imgViewW = self.scrollView.frame.size.width;

    CGFloat imgViewH = self.scrollView.frame.size.height;

    

    for (int i=0; i<MJImgCount; i++) {

        UIImageView *imgView = [[UIImageView alloc] init];

        UIImage *img = [UIImage imageNamed:[NSString stringWithFormat:@"ad_0%i",i]];

        imgView.image = img;

        CGFloat imgViewX = i*imgViewW;

        imgView.frame = CGRectMake(imgViewX, imgViewY, imgViewW, imgViewH);

        //3,将image添加到scrollView中

        [self.scrollView addSubview:imgView];

    }

    

    //4,设置scrollView的各项参数

    //4.1,设置scrollView的滚动区域

    self.scrollView.contentSize = CGSizeMake(imgViewW * MJImgCount, 0);

    

    //4.2, 不显示横向滚动条

    self.scrollView.showsHorizontalScrollIndicator = NO;

    //4.3  分页

    self.scrollView.pagingEnabled = YES;



    //5,设置pageControl的总共页数

    self.pageControl.numberOfPages = MJImgCount;

    

    //6,添加定时器

    [self addTimer];

}

/** 添加定时器 */

-(void)addTimer{

    self.timer = [NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(nextImg) userInfo:nil repeats:YES];

    //消息循环（设置当前定时器的优先级比较）

    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];

}



-(void)nextImg{

    //1,增加pageControl的页码

    int currentIndex = self.pageControl.currentPage;

    if(currentIndex == MJImgCount-1){

        currentIndex = 0;

    }else{

        currentIndex += 1;

    }

    self.pageControl.currentPage = currentIndex;

    

    //2,计算scrollView的滚动位置

    CGPoint offset = CGPointMake(currentIndex * self.scrollView.frame.size.width, 0);

    

    //3,有滚动效果

    [self.scrollView setContentOffset:offset animated:YES];



}







#pragma mark - scrollView的代理方法

/** scrollView正在滚动 */

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{

    CGFloat offsetX = scrollView.contentOffset.x;

    

   

    int index = (offsetX + scrollView.frame.size.width*0.5)/scrollView.frame.size.width;

    

    self.pageControl.currentPage = index;

    

}

4，Tg模型部分：
Tg.h文件：

#import <Foundation/Foundation.h>



@interface MJTg : NSObject

/** 标题 */

@property(nonatomic,copy) NSString *title;

/** 图标 */

@property(nonatomic,copy) NSString *icon;

/** 价格 */

@property(nonatomic,copy) NSString *price;

/** 购买人数 */

@property(nonatomic,copy) NSString *buyCount;



+(id)tgWithDict:(NSDictionary *)dict;

-(id)initWithDict:(NSDictionary *)dict;



@end



Tg.m文件代码如下：



#import "MJTg.h"



@implementation MJTg



+(id)tgWithDict:(NSDictionary *)dict{

    return [[self alloc] initWithDict:dict];

}

-(id)initWithDict:(NSDictionary *)dict{

    if(self==[super init]){

        [self setValuesForKeysWithDictionary:dict];

    }

    return self;

}



@end

注意部分：

1，在TgCell.xib文件中，指定类为TgCell。

2,在创建TgCell对象时，要采用Cell的重用。

重用原理：在tableView滚动时，部分UITableViewCell会移出窗口，UITableView会将窗口外的UITableViewCell放入到一个对象池中，等待着重用，当UITableView要求datasource返回UITableViewCell时，datasource会先查看这个对象池，如果池中有未使用的UITableViewCell,datasource会使用新的数据配置这个UITableViewCell,然后返回给UITableView,重新显示到窗口中，从而避免创建新对象。

代码如下：

+(id)cellWithTableView:(UITableView *)tableView{

    static NSString *flag= @"tgs";

    

    MJTgCell *cell = [tableView dequeueReusableCellWithIdentifier:flag];

    if(cell ==nil){

        cell = [[NSBundle mainBundle] loadNibNamed:@"MJTgCell" owner:nil options:nil][0];

        

    }

    return cell;

}

3,使用xib封装一个view的步骤：

1，新建一个xib文件描述一个view的内部结构（假设叫做TgCell.xib）

2, 新建一个自定义类（自定义类需要继承自系统自带的view,继承自哪个类，取决于xib根对象的class）

3, 新建的雷鸣最好跟xib文件名保持一致（比如类名就叫做TgCell）

4, 将xib中的空间和自定义类的.m文件进行连线

5, 提供一个类方法返回一个创建好的自定义view(屏蔽从xib加载的过程)

6, 提供一个模型属性让外界传递模型数据

7, 重写模型属性的setter方法，在这里将模型数据展示到对应的子控件上面