iOS回顾笔记（03） -- 自定义View的封装和xib文件

iOS开发中，我们常常将一块View封装起来，以便于统一管理内部的子控件。如iOS回顾笔记（02）中的"书"这一自定义View。

下面就来说说自定义View的封装以及它的多种实现方式

自定义UIView（控件）的封装

什么是View的封装

• 如果一个View的内部子控件比较多，一般会考虑自定义一个View，把它内部子控件的创建屏蔽起来，不让外部关心。
• 外界传入对应的数据模型给view。view拿到数据模型之后给内部的子控件设置对应的数据。

封装自定义控件的基本步骤

• 重写 - (instancetype)initWithFrame方法，在此方法中创建并添加子控件。
• 提供一个便利的构造方法，通常为 类方法，快速创建一个实例对象
• 重写 - (void)layoutSubviews方法，在此方法中设置子控件的frame，一定要调用[super layoutSubviews]
• 设置模型属性，在set方法中，给对应的子控件赋值。

看代码

XYBookView.h 头文件

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

@interface XYBookView : UIView

// 只放一个数据属性用来赋值，内部布局，放到.m 中自己管，不暴露给外界
@property (nonatomic, strong) XYBook *book;

@end


实现文件 .m文件
#import "XYBookView.h"
#include "XYBook.h"

@interface XYBookView ()

// 两个内部子控件在内部包装起来，不给外界看到
@property (nonatomic, weak) UIImageView *icon;

@property (nonatomic, weak) UILabel *label;

@end

@implementation XYBookView

// 1.重写initWithFrame:方法，创建子控件并添加到自己上面
- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {

        // 1. 创建书图标
        UIImageView *icon = [UIImageView new];
        self.icon = icon;
        [self addSubview:self.icon];

        // 2.书名
        UILabel *bookName = [UILabel new];
        bookName.textAlignment = NSTextAlignmentCenter;
        self.label = bookName;
        [self addSubview:self.label];

    }
    return self;
}

// 2.重写layoutSubviews，给自己内部子控件设置frame
- (void)layoutSubviews
{
    [super layoutSubviews];
    CGSize size = self.frame.size;
    self.icon.frame = CGRectMake(0, 0, size.width , size.height * 0.7);
    self.label.frame = CGRectMake(0, size.height * 0.7, size.width, size.height *(1 - 0.7));

}

// 3.调用模型的set方法，给书的子控件赋值，
- (void)setBook:(XYBook *)book
{
    _book = book;
    self.icon.image = [UIImage imageNamed:book.icon];
    self.label.text = book.name;
}
@end

以上是纯代码实现的View的封装，写起来有些麻烦。

开发中另一种常用的封装方式是Xib，下面介绍Xib的相关知识。

XIB和Storyboard的比较

共同点

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

不同点

• Xib是轻量级的，用来描述局部的UI界面
• Storyboard是重量级的，不仅可以用来描述整个应用的多个页面，而且可以展示页面间的跳转关系。

Xib的创建

2017-03-03 23.43.06.gif

Xib的使用

Xib的加载方式

Xib作为局部UI的描述文件，它也是一种项目内的资源文件，在项目中查找路劲也是在[UIBundle mainBundle]中，它的加载方式有两种

方式1

在对应的mainBundle中加载XYBookView类型的nib文件，返回是数组，取数组中对应的view即可

NSArray *views = [[NSBundle mainBundle] loadNibNamed:@"XYBookView" owner:nil options:nil];
XYBookView *bookView = views.firstObject;

方式2

Xib/Storyboard文件编译之后生成的都是 Nib文件，加载XYBookView.xib对应的.nib文件，通过.nib文件实例化的数组中取到对应的XYBookView实例对象。

UINib *nib = [UINib nibWithNibName:@"XYBookView" bundle:nil];
XYBookView *bookView = [[nib instantiateWithOwner:nil options:nil] firstObject];

使用注意

• 进行类绑定，告诉Xib它是什么类型，用来描述那个文件
• 通常Xib文件名和要描述的文件同名，易于辨认和管理

Snip20170304_1.png

Xib的使用细节完善

• Xib用来描述控件，是把原来代码创建的内容直接用图形化来展示了
• Xib里面的子控件需要拖线到对应文件中，以便文件内赋值和其他使用

Snip20170304_2.png

封装Xib的加载过程

#import "XYBookView.h"
@interface XYBookView ()
// 封装一个快速返回实例对象的类方法
+ (instancetype)bookView;

@end

@implementation XYBookView

+ (instancetype)bookView
{
    // 封装Xib的加载过程
    return [[NSBundle mainBundle] loadNibNamed:@"XYBookView" owner:nil options:nil].firstObject;
    
}

小结

一个控件有两种创建方式

• 通过代码创建
  • 初始化一定会调用 -(instancetype)initWithFrame:方法
• 通过Xib\StoryBoard创建
  • 初始化不会调用 -(instancetype)initWithFrame:方法，只会调用-(instancetype)initWithCoder:方法
  • 初始化完成之后，回调用awakeFromNib方法

通过两种加载方式，可以发现：有时候我们希望在控件初始化时做一些初始化的操作，如添加子控件，设置属性等，这时候需要根据控件的加载方式来选择-(instancetype)initWithFrame:，-(instancetype)initWithCoder:，awakeFromNib三个方法中的哪个方法进行初始化。