ios Xib的幾種用法[轉(zhuǎn)]

大多數(shù)Ios開發(fā)者都喜歡運(yùn)用xib以及約束來布局，這樣省去了大量初始化代碼，但是xib的使用也是存在不少差異的：

一.xib的幾個(gè)重要屬性

  • xib的文件名
  • File's owner
  • xib中的視圖class
  • xib文件中的視圖Outlet指向

二.Demo實(shí)現(xiàn)

1.加載xib中File's owner為nil的視圖

blueView.png

ViewController:

- (void)addBlueView {
    // BlueView.xib的File's Owner為nil
    NSArray *views = [[NSBundle mainBundle] loadNibNamed:@"BlueView" owner:nil options:nil];
    self.blueView = views[0];
    
    // 從xib加載進(jìn)來的View大小是確定的，但是該視圖在父視圖中的位置是不確定的
    // 此外，視圖中的子視圖也是原封不動(dòng)地Load進(jìn)來的
    CGRect rect = _blueView.frame;
    rect.origin.x += 37.5f;
    rect.origin.y += 80.0f;
    _blueView.frame = rect;
    [self.view addSubview:_blueView];
}

運(yùn)行結(jié)果：


blueViewResult.png

總結(jié)：

  • File’s Owner為nil的xib文件中的視圖屬于通用視圖，在工程中可以復(fù)用
  • 從xib加載進(jìn)來的View大小是確定的，但是該視圖在父視圖中的位置是不確定的，因此需要開發(fā)者自行指定
  • 視圖中的所有子視圖會(huì)被原封不動(dòng)地Load進(jìn)來

2.加載File's owner為self的視圖

greenView.png

ViewController

- (void)addGreenView {
    // GreenView.xib的File's Owner設(shè)為self，并建立了一個(gè)從該xib的View到self的IBOutlet greenView
    [[NSBundle mainBundle] loadNibNamed:@"GreenView" owner:self options:nil];
    // 只要self主動(dòng)調(diào)用Load XIB的方法，self持有的IBOutlet指向的視圖就會(huì)被初始化
    // 這里不需要通過views[0]的方式存取視圖
    CGRect rect = _greenView.frame;
    rect.origin.x = _blueView.frame.origin.x;
    rect.origin.y = _blueView.frame.origin.y + 80.0f;
    _greenView.frame = rect;
    [self.view addSubview:_greenView];
}

運(yùn)行結(jié)果：

greenViewResult.png

總結(jié)：

  • File’s Owner不為nil的xib文件中的視圖屬于專用視圖，在工程中不應(yīng)該被復(fù)用
  • 只要self主動(dòng)調(diào)用loadNibNamed:owner:options:方法，self持有的IBOutlet指向的視圖就會(huì)被初始化
  • 存取xib中的視圖不用views[0]的方式，而是通過IBOutlet類型的property進(jìn)行存取

3.加載xib中File’s Owner為特定類的視圖

redView.png

RedViewOwner:

@interface RedViewOwner : NSObject
@property (strong, nonatomic) IBOutlet UIView *redView;
@end

ViewController:
- (void)addRedView {
    self.redViewOwner = [RedViewOwner new];
    [[NSBundle mainBundle] loadNibNamed:@"RedView" owner:self.redViewOwner options:nil];
    UIView *redView = _redViewOwner.redView;
    CGRect rect = redView.frame;
    rect.origin.x = _greenView.frame.origin.x;
    rect.origin.y = CGRectGetMaxY(_greenView.frame) + 30;
    redView.frame = rect;
    [self.view addSubview:redView];
}

結(jié)果：


redresult.png

總結(jié)：

  • File’s Owner類可以封裝視圖中的各種邏輯，而不僅僅是提供視圖內(nèi)容
  • 只要通過File’s Owner類主動(dòng)調(diào)用loadNibNamed:owner:options:方法，該IBOutlet指向的視圖就會(huì)被初始化

4.加載xib中文件名和視圖類名一致的視圖（File’s Owner為nil）

yellowview.png
@implementation YellowView

+ (instancetype)loadYellowViewFromXib {
    // 加載xib中的視圖，其中xib文件名和本類類名必須一致
    // 這個(gè)xib文件的File's Owner必須為空
    // 這個(gè)xib文件必須只擁有一個(gè)視圖，并且該視圖的class為本類
    NSArray *views = [[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self class]) owner:nil options:nil];
    return views[0];
}
@end
ViewController:
- (void)addYellowView {
    self.yellowView = [YellowView loadYellowViewFromXib];
    CGRect rect = _yellowView.frame;
    rect.origin.x = _redViewOwner.redView.frame.origin.x;
    rect.origin.y = CGRectGetMaxY(_redViewOwner.redView.frame) + 30;
    _yellowView.frame = rect;
    [self.view addSubview:self.yellowView];
}

結(jié)果：

yellowresult.png

總結(jié)：

  • 這里的viewFromNib方法只是對(duì)loadNibNamed:owner:options:方法的一個(gè)簡(jiǎn)單封裝，要求的條件包括： - xib文件名和本類類名必須一致 - 這個(gè)xib文件的File’s Owner必須為空 - 這個(gè)xib文件必須只擁有一個(gè)視圖，并且該視圖的class為本類

5. 通過UIViewController的initWithNibName:bundle:方法加載xib文件中的視圖

blackView.png

如果想要self.view是視圖中的底層view，那么要連線File's owner 和view


blackviewll.png

BlackViewController

@interface BlackViewController : UIViewController
@property (weak, nonatomic) IBOutlet UILabel *label;
+ (instancetype)viewControllerFromNIB;
@end
+ (instancetype)viewControllerFromNIB {
    return [[BlackViewController alloc] initWithNibName:NSStringFromClass([self class]) bundle:[NSBundle mainBundle]];
}

ViewController

- (void)addBlackView {
    self.blackVC = [[BlackViewController alloc] initWithNibName:@"BlackView" bundle:[NSBundle mainBundle]];
    UIView *views = self.blackVC.view;
    CGRect rect = views.frame;
    rect.origin.x = _yellowView.frame.origin.x;
    rect.origin.y = CGRectGetMaxY(_yellowView.frame) + 20;
    views.frame = rect;
    [self.view addSubview:views];
}

總結(jié)：

  • 將xib的File’s Owner設(shè)成一個(gè)UIViewController子類，可以將這個(gè)xib文件的視圖展示和外部響應(yīng)事件（例如點(diǎn)擊一個(gè)按鈕觸發(fā)的點(diǎn)擊事件，該視圖的手勢(shì)事件等）全部封裝在一個(gè)View Controller中，如果把按鈕的點(diǎn)擊事件封裝在一個(gè)UIView類中，貌似破壞了MVC模式，因此最好將xib的File’s Owner設(shè)成一個(gè)UIViewController子類，該類可以通過addChildViewController方法將其添加到現(xiàn)有的View Controller上。如果只是希望加載視圖，可以通過viewcontroller.view存取。

6. 通過UIViewController+NIB加載xib文件中的View Controller類和其視圖

GrayView.xib

grayView.png
grayviewaction.png

UIViewController+NIB.h/m

@interface UIViewController (NIB)
// 要求xib文件名和View Controller類名一致
+ (instancetype)loadFromNib;
@end
@implementation UIViewController (NIB)
+ (instancetype)loadFromNib {
    // [self class]會(huì)由調(diào)用的類決定
    Class controllerClass = [self class];
    NSLog(@"class = %@", controllerClass);
    return [[controllerClass alloc] initWithNibName:NSStringFromClass(controllerClass) bundle:[NSBundle mainBundle]];
}
@end

GrayViewController.h/m

@interface GrayViewController : UIViewController
@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
@property (weak, nonatomic) IBOutlet UIButton *actionButton;
@end
@implementation GrayViewController
- (void)viewDidLoad {
    [super viewDidLoad];
     
    self.view.backgroundColor = [UIColor grayColor];
     
    self.titleLabel.text = @"Gray View";
    self.titleLabel.textColor = [UIColor whiteColor];
    self.titleLabel.textAlignment = NSTextAlignmentCenter;
    self.titleLabel.font = [UIFont systemFontOfSize:8.5f];
     
    [self.actionButton setTitle:@"action" forState:UIControlStateNormal];
    [self.actionButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
// 推薦從XIB文件中加載View Controller的方法，這種方法可以將XIB文件中的視圖和其按鈕響應(yīng)事件全部封裝在GrayViewController
// 如果GrayViewController的按鈕響應(yīng)事件由MainViewController作出響應(yīng)，那么二者的耦合度就過高
// 建議:
// 單純的通用View展示，使用從xib文件加載視圖的方法，F(xiàn)ile's Owner設(shè)為nil
// 特定擁有者的View展示，從xib文件加載視圖時(shí)，F(xiàn)ile's Owner設(shè)為擁有者
// 如果視圖中有按鈕響應(yīng)事件，或其它可以和用戶交互的事件，建議采用從XIB文件中加載View Controller的方法，這樣可以封裝UI展示和交互事件
- (IBAction)action:(id)sender {
    NSLog(@"action");
}
@end

ViewController

...
@property (strong, nonatomic) GrayViewController *grayViewController;
...
- (void)loadGrayViewFromXIB {
    self.grayViewController = [GrayViewController loadFromNib];
     
    UIView *grayView = _grayViewController.view;
    UIView *blackView = _blackViewController.view;
    CGRect rect = grayView.frame;
    rect.origin.x = blackView.frame.origin.x;
    rect.origin.y = blackView.frame.origin.y + 80.0f;
    grayView.frame = rect;
    [self.view addSubview:grayView];
}

結(jié)果:


grayViewResult.png

總結(jié):

  • 這里我專門寫了一個(gè)UIViewController+NIB的category，只需要調(diào)用loadFromNib類方法就可以加載xib中的視圖。要求: - xib文件的File’s Owner必須設(shè)置為對(duì)應(yīng)的View Controller類

三.總結(jié)

在寫界面時(shí)同時(shí)混用xib和代碼可以提高效率，而對(duì)xib的使用主要體現(xiàn)在其專用性和通用性上。

  • 對(duì)于一些專門的界面，例如App中的設(shè)置界面，純代碼寫難免會(huì)浪費(fèi)時(shí)間，此時(shí)可以通過xib文件的拖控件方法來定制。這個(gè)xib是專用于某一個(gè)界面的，目的是提高效率
  • 對(duì)于一些通用的控件甚至界面，例如一個(gè)很漂亮但實(shí)現(xiàn)起來非常復(fù)雜的按鈕，此時(shí)可以通過load xib文件中的視圖來快速添加。這個(gè)xib對(duì)于所有視圖是共用的，目的是提高可復(fù)用性。

對(duì)于通用的xib:

  • 如果xib只是單純的界面展示，那么File’s Owner可以隨意。
  • 如果xib中包含了按鈕、手勢(shì)等用戶輸入事件，那么File’s Owner最好設(shè)置為UIViewController類的子類。

四.發(fā)現(xiàn)的問題

以前使用xib時(shí)一直都有點(diǎn)疑問，xib中可以有多個(gè)視圖控件，但是從xib中l(wèi)oad出來的是一個(gè)數(shù)組，那么怎么確定哪個(gè)對(duì)象對(duì)應(yīng)的是哪個(gè)控件呢？

TestView.xib

testView.png

ViewController：

- (void)loadFromNib {
    NSArray *array = [[NSBundle mainBundle] loadNibNamed:@"TestView" owner:nil options:nil];
    [array enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        NSLog(@"%ld----%@",idx,NSStringFromClass([obj class]));
    }];
}

控制臺(tái)輸出如下：

2017-03-30 17:53:21.128 啟動(dòng)頁[7655:288700] 0----UIView
2017-03-30 17:53:21.128 啟動(dòng)頁[7655:288700] 1----UIButton
2017-03-30 17:53:21.128 啟動(dòng)頁[7655:288700] 2----UITableView
2017-03-30 17:53:21.128 啟動(dòng)頁[7655:288700] 3----UIImageView

結(jié)論：
從xib中l(wèi)oad出來的views數(shù)組中視圖對(duì)象的排列順序和xib scene中的對(duì)象排列順序一致（其實(shí)就是xml文件中元素的排序而已）。

result.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容