码迷,mamicode.com
首页 > 移动开发 > 详细

猫猫学IOS(十六)UI之XIB自定义Cell实现团购UI

时间:2015-04-07 23:31:49      阅读:302      评论:0      收藏:0      [点我收藏+]

标签:ui   ios   控件   cell   流体布局   

猫猫分享,必须精品

素材代码地址:http://blog.csdn.net/u013357243/article/details/44926809
原文地址:http://blog.csdn.net/u013357243?viewmode=contents

先看效果图

技术分享

技术分享

技术分享

技术分享

技术分享


自定义Cell

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

XIB的定义步骤

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


代码创建Cell的步骤

1> 创建自定义Cell,继承自UITableViewCell
2> 根据需求,确定控件,并定义属性
3> 用getter方法完成控件的实例化,只创建并添加到contentView,不处理位置
4> 定义一个模型属性,通过setter方法,设置cell的显示


代码学习

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

调整上边栏


//ps:新建iOS交流学习群:304570962 
//可以加猫猫QQ:1764541256 或则微信znycat 
//让我们一起努力学习吧。 
//原文:http://blog.csdn.net/u013357243?viewmode=contents


// 调整边距,可以让表格视图让开状态栏
    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];

技术分享


预处理指令#if 1的特殊用法

预处理指令
 #if 0
 所有代码都不会执行

 #endif

可以看做事高功能的注释,这里不会让我们看到一片绿,但是也能起到注释的作用,如果想用这代码了 把0改成1,so easy!!

代理模式的特点

代理模式的特点:是父控件(视图控制器)监听子控件的事件,当子控件发生某些事情时,通知父控件工作!

ps:新建iOS交流学习群:304570962
可以加猫猫QQ:1764541256 或则微信znycat
让我们一起努力学习吧。
原文:http://blog.csdn.net/u013357243?viewmode=contents

猫猫学IOS(十六)UI之XIB自定义Cell实现团购UI

标签:ui   ios   控件   cell   流体布局   

原文地址:http://blog.csdn.net/u013357243/article/details/44926787

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!