iOS开发UI篇 -- 0401团购案例-使用xib自定义控件

1、换项目的资源：比如换掉plist文件

第一步：删除沙盒中内容，卸载软件

第二步：xcode - project - clean

2、自定义cell两种方法

使用xib：当每个cell中控件尺寸固定的时候（比如团购）

使用代码：当每个cell中控件尺寸固定的时候（比如微博）

3、使用xib自定义cell步骤

a、new - User Interface - Empty

b、拖控件

c、修改继承的类（自定义的）和ID

4、iOS的封装有三个角色

C:

M：存放数据（.h中）

V：拿到模型数据给View中的子控件设置数据

View中有一个model，在外界view.model = 外界的模型。

模型在.h中，子控件在.m中

5、常用的延时方法

第一种：GCD：

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

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

[self.delegate tgFootViewDidCliclLoadBtn:self];

}

第二种：

[self performSelector:@selector(selfMethod) withObject:nil afterDelay:1.0];

6、使用xib自定义View步骤

新建一个xib文件描述一个view的内部结构。

新建一个类（继承自某个系统自带的View。继承自哪个View，取决于xib的根对象）

新建的类名最好跟xib得文件名保持一致（对外提供一个model，对内封装所有UI子控件）

将xib的控件和自定义的类进行连线

提供一个类方法快速返回一个创建好的自定义view（屏蔽从xib加载这个过程）

7、团购UI设计（重要）

上面是广告图片轮播器，中间事UITableView，下面是加载更多View。

中间使用UITableView，但是需要使用xib自定义cell；

上面根对象是UIView，加上一个UIScrollView，UIPageControl，细线使用height=1的UIView做的（设置透明度），设置NSTimer；

下面根对象也是UIView，一个“加载更多”的Btn，一个提示Lable；按钮点击加载数据，数据加载最好在VC中完成，所以使用代理完成

这三个都使用了xib来自定义控件，因为其中的子控件每一个都相对固定，所以使用xib。

例如图片轮播器，我们需要在UIScrollView中添加UIImageView，控件的添加是在- (void)awakeFromNib{}方法中完成的，也就是说轮播器的实现是在这个方法中完成的

类似[BJTgHeaderView alloc] awakeFromNib];

8、通过代码自定义cell步骤

9、xcode中创建快捷键

鼠标长按选中代码拖动到指定位置，然后进行编辑<#type#> <#name#>

10.使用xib如何初始化界面

/**
*  通过代码创建初始化一个对象的时候,才会调用这个方法
*/
//- init
//{
//
//}

/**
*  当一个对象从xib中创建初始化完毕的时候就会调用一次
*/
- (void)awakeFromNib
{
// 在这里面添加图片轮播器

}

11、奉上demo

新建一个xib文件描述一个view的内部结构。

新建一个类（继承自某个系统自带的View。继承自哪个View，取决于xib的根对象）

新建的类名最好跟xib得文件名保持一致（对外提供一个model，对内封装所有UI子控件）

将xib的控件和自定义的类进行连线

提供一个类方法快速返回一个创建好的自定义view（屏蔽从xib加载这个过程）

第一步 新建一个xib文件描述一个view的内部结构。



第二步 自定义一个同名的cell，提供一个Model来封装数据

//
//  MJTgCell.h
//  01-团购
//
//  Created by apple on 14-4-1.
//  Copyright (c) 2014年 itcast. All rights reserved.
//

#import <UIKit/UIKit.h>

@class MJTg;

@interface MJTgCell : UITableViewCell

/**
*  通过一个tableView来创建一个cell
*/
+ (instancetype)cellWithTableView:(UITableView *)tableView;

/**
*  团购模型
*/
@property (nonatomic, strong) MJTg *tg;
@end

第三步 进行view连线，并在setModel中设置数据

//
//  MJTgCell.m
//  01-团购
//
//  Created by apple on 14-4-1.
//  Copyright (c) 2014年 itcast. All rights reserved.
//

#import "MJTgCell.h"
#import "MJTg.h"

@interface MJTgCell()
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
@property (weak, nonatomic) IBOutlet UILabel *titleView;
@property (weak, nonatomic) IBOutlet UILabel *priceView;
@property (weak, nonatomic) IBOutlet UILabel *buyCountView;

@end

@implementation MJTgCell

+ (instancetype)cellWithTableView:(UITableView *)tableView
{
static NSString *ID = @"tg";
MJTgCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
if (cell == nil) {
// 从xib中加载cell
cell = [[[NSBundle mainBundle] loadNibNamed:@"MJTgCell" owner:nil options:nil] lastObject];
}
return cell;
}

- (void)setTg:(MJTg *)tg
{
_tg = tg;

// 1.图片
self.iconView.image = [UIImage imageNamed:tg.icon];

// 2.标题
self.titleView.text = tg.title;

// 3.价格
self.priceView.text = [NSString stringWithFormat:@"￥%@", tg.price];

// 4.购买数
self.buyCountView.text = [NSString stringWithFormat:@"%@人已购买", tg.buyCount];
}

@end

第四步 设计Vc代码

#pragma mark - 数据源方法
/**
*  一共有多少行数据
*/
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.tgs.count;
}

/**
*  每一行显示怎样的cell
*/
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
// 1.创建cell
MJTgCell *cell = [MJTgCell cellWithTableView:tableView];

// 2.给cell传递模型数据
cell.tg = self.tgs[indexPath.row];
return cell;
}