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的創建

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文件名和要描述的文件同名，易於辨認和管理

Xib的使用細節完善

• Xib用來描述控件，是把原來代碼創建的內容直接用圖形化來展示了
• Xib里面的子控件需要拖線到對應文件中，以便文件內賦值和其他使用

封裝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三個方法中的哪個方法進行初始化。