AJ学IOS（16）UI之XIB自定义Cell实现团购UI

AJ分享，必须精品

先看效果图

这里写图片描述

自定义Cell

 本次主要是自定义Cell的学习
 实现自定义Cell主要有三种方法：按照使用的频繁度排序：
   XIB > 纯代码 > StoryBoard

XIB的定义步骤

1> 新建HMTgCell.xib
2> 拽一个需要自定义的控件，摆放其他子控件
3> 新建一个类
* 类名要与XIB的名字保持一致
* 继承自的子类要与XIB中的根节点的类型一致
4> 要连线之前，需要将XIB的根节点类名修改为刚刚新建的类名
5> 连线
6> 在XIB的属性面板，指定可重用标示符

代码学习

首先加载字典神马的这些大家自己去代码里看吧，前面写了太多了。

调整上边栏


// 调整边距，可以让表格视图让开状态栏
    self.tableView.contentInset = UIEdgeInsetsMake(20, 0, 0, 0);

同等效果的：

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

数据源方法把Cell放进去

#pragma mark - 数据源方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.tgs.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 1. 创建cell
    HMTgCell *cell = [HMTgCell cellWithTableView:tableView];

    // 2. 通过数据模型，设置Cell内容，可以让视图控制器不需要了解cell内部的实现细节
    cell.tg = self.tgs[indexPath.row];

    return cell;
}

+ (instancetype)cellWithTableView:(UITableView *)tableView
{
    // 1. 可重用标示符
    static NSString *ID = @"Cell";
    // 2. tableView查询可重用Cell
    HMTgCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];

    // 3. 如果没有可重用cell
    if (cell == nil) {
        NSLog(@"加载XIB");
        // 从XIB加载自定义视图
        cell = [[[NSBundle mainBundle] loadNibNamed:@"HMTgCell" owner:nil options:nil] lastObject];
    }

    return cell;
}

- (void)setTg:(HMTg *)tg
{
    // setter方法中，第一句要赋值，否则要在其他方法中使用模型，将无法访问到
    _tg = tg;

    self.titleLabel.text = tg.title;
    self.iconView.image = [UIImage imageNamed:tg.icon];
    self.priceLabel.text = tg.price;
    self.buyCountLabel.text = tg.buyCount;
}

注意在自己的xib中class要选好了，然后连线才能给力
这里写图片描述

模板提供的方法

#pragma mark - 模板提供的方法
/** 
 初始化方法

 使用代码创建Cell的时候会被调用，如果使用XIB或者Storyboard，此方法不会被调用
 */
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        NSLog(@"%s", __func__);
    }
    return self;
}

/**
 从XIB被加载之后，会自动被调用，如果使用纯代码，不会被执行
 */
- (void)awakeFromNib
{
    NSLog(@"%s", __func__);
    self.contentView.backgroundColor = [UIColor clearColor];
}

/**
 Cell 被选中或者取消选中是都会被调用

 如果是自定义Cell控件，所有的子控件都应该添加到contentView中
 */
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
    [super setSelected:selected animated:animated];

    if (selected) {
        self.contentView.backgroundColor = [UIColor redColor];
    } else {
        self.contentView.backgroundColor = [UIColor greenColor];
    }
}

定义代理给页脚按钮实现功能（模拟网络下载）

首先在点h里面写入协议

#import <UIKit/UIKit.h>
@class HMTgFooterView;

@protocol HMTgFooterViewDelegate <NSObject>

@optional
/** 视图的下载按钮被点击 */
- (void)tgFooterViewDidDownloadButtonClick:(HMTgFooterView *)footerView;

@end

@interface HMTgFooterView : UIView

// 代理如果使用强引用，就会产生循环引用，造成控制器和子视图都无法被释放，造成内存泄露
@property (nonatomic, weak) id <HMTgFooterViewDelegate> delegate;

+ (instancetype)footerView;

/** 刷新数据结束后，更新页脚的视图显示 */
- (void)endRefresh;

@end

点m文件的代码

//
//  HMTgFooterView.m
//  02-团购
//
//  Created by apple on 14-8-21.
//  Copyright (c) 2014年 itcast. All rights reserved.
//

#import "HMTgFooterView.h"

@interface HMTgFooterView()
@property (weak, nonatomic) IBOutlet UIButton *loadMoreButton;
@property (weak, nonatomic) IBOutlet UIView *tipsView;
@end

@implementation HMTgFooterView

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

- (IBAction)loadMore
{
    NSLog(@"加载更多");
    // 1. 隐藏按钮
    self.loadMoreButton.hidden = YES;
    // 2. 显示提示视图
    self.tipsView.hidden = NO;

    // 3.1 判断代理是否实现了协议方法
    if ([self.delegate respondsToSelector:@selector(tgFooterViewDidDownloadButtonClick:)]) {
        [self.delegate tgFooterViewDidDownloadButtonClick:self];
    }
}

/** 视图控制器刷新完成调用方法 */
- (void)endRefresh
{
    // 4. 加载完成数据
    self.loadMoreButton.hidden = NO;
    self.tipsView.hidden = YES;
}

@end

代理的具体实现由control来实现，然后通知他

- (void)tgFooterViewDidDownloadButtonClick:(HMTgFooterView *)footerView
{
    // 模拟取网络上获取数据加载数据
    NSLog(@"努力加载数据中....");

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        // 获得网络数据之后执行的操作

        // 向数组中添加数据，模拟网络加载完成之后的效果
        NSDictionary *dict = @{@"title": @"哈哈", @"icon": @"ad_00", @"price": @"100.2", @"buyCount": @"250"};
        HMTg *tg = [HMTg tgWithDict:dict];

        NSLog(@"加数据前 %d", self.tgs.count);

        [self.tgs addObject:tg];

        NSLog(@"加数据后 %d", self.tgs.count);
        // 刷新数据
        //    [self.tableView reloadData];
        // 新建一个indexPath
        NSIndexPath *path = [NSIndexPath indexPathForRow:(self.tgs.count - 1) inSection:0];
        [self.tableView insertRowsAtIndexPaths:@[path] withRowAnimation:UITableViewRowAnimationMiddle];

        // 通知页脚视图调整视图显示状态
        [footerView endRefresh];
    });

}

footView => controller 去工作，使用代理
controller => footView 去工作，直接调用footView的方法即可

设置头部猜你喜欢上下的两道线

这东西很简单，就是一个自定义的xib 那两道线就是两个高1个像素点得View，————苹果官方也是这么搞得，所以就不要质疑啦。

    self.tableView.tableHeaderView = [[[NSBundle mainBundle] loadNibNamed:@"HMTgHeadView" owner:nil options:nil] lastObject];