XIB和代码自定义控件的步骤

---

title : XIB和代码自定义控件的步骤
category : UI

---

代码和XIB自定义控件和封装子控件的步骤

标签（空格分隔）： UI

---

[TOC]

XIB自定义控件

加载XIB的两种方式

• 方法一

// 方法一：loadNibNamed:方法返回的是一个数组
UIView *view = [[[NSBundle mainBundle] loadNibNamed:@"JLShop" owner:nil options:nil] lastObject];

• 方式二：

// 一般情况下，bundle参数传nil，它默认就是加载mainBundle
UINib *nib = [UINib nibWithNibName:@"JLShop" bundle:nil];
UIView *view = [[nib instantiateWithOwner:nil options:nil] firstObject];

• 将XIB的加载代码放到自定义控件中的方式

+ (instancetype)shopView
{
    return [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:nil] lastObject];
}

使用XIB自定义控件的步骤

- 创建UIView和XIB
- 修改XIB中view的类名，将XIB和UIView进行关联
- 封装XIB的加载过程
- 在类扩展中给子控件连线，关联子控件
- 增加模型属性，在模型属性set方法中设置数据到子控件上

XIB和Storyboard的对比

• 共同点

  • 都用来描述软件界面
  • 都用Interface Builder工具来编辑
  • 本质都是转成代码去创建控件

• 不同点

  • XIB是轻量级的，用来描述局部的UI界面
  • Storyboard是重量级的，用来描述整个软件界面，并且能展示多个界面间的跳转关系

代码自定义控件

代码自定义控件的步骤

• 1 在initWithFrame方法中初始化并添加子控件（因为init方法内部会自动调用initWithFrame方法）
• 2 在layoutSubviews方法中布局子控件
• 3 传递模型数据给自定义控件，并重写set模型数据方法，给所有的子控制器设置数据

注最好提供便利的构造方法来供外界创建控件
eg：

// 创建控件的构造方法
+ (instancetype)shopView;

+ (instancetype)shopView
{
    return [[self alloc] init];
}

• 其他控制器调用该自定义控件的步骤

• 创建控件
• 传递模型数据
• 设置自定义控件的frame

注意点

• 一个控件有两种创建方式
  • 通过代码创建
    • 初始化时一定会调用initWithFrame:方法
  • 通过XIB\Storyboard创建
    • 初始化时不会调用initWithFrame:方法，只会调用initWithCoder:方法
    • 初始化完毕后会调用awakeFromNib方法，所以如果是通过XIB\Storyboard创建的控件，希望初始化完毕后做一些事情，建议在这个方法中执行

建议实现方法将初始化代码统一放在一个方法中，然后分别在initWithFrame和awakeFromNib中都调用一下