Mac開發之如何設置NSView的層次關係

我們開發很多時候都會遇到需要設置不同view的層次關係，而Mac開發和iOS開發稍微有點不同，NSView是沒有sendSubviewToback和bringSubViewToFront這兩個設置層級關係的方法的。那Mac上的NSView是如何設置層級關係的呢？下面介紹兩種方法：一是Storyboard，二是純代碼。

一、Storyboard

Storyboard加載view有個特點，是根據你添加view的先後順序來加載view的，也就是說越在後面添加的view顯示的時候越在前面，寫個例子測試一下：

新建一個工程，storyboard拖入三個Custom View，如圖所示：

可以看出viewThree是最先添加的，排在最底下，viewOne是最後添加的，排在最前面，ViewController添加如下代碼：

//
//  ViewController.m
//  NSViewHierarchicalRelationships
//
//  Created by SC Chen on 28/12/2017.
//  Copyright © 2017 sc. All rights reserved.
//

#import "ViewController.h"

@interface ViewController()

@property (strong) IBOutlet NSView *viewOne;
@property (strong) IBOutlet NSView *viewTwo;
@property (strong) IBOutlet NSView *viewThree;


@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // Do any additional setup after loading the view.
    
    [_viewThree setWantsLayer:YES];
    [_viewThree.layer setBackgroundColor:[NSColor yellowColor].CGColor];

    
    [_viewOne setWantsLayer:YES];
    [_viewOne.layer setBackgroundColor:[NSColor redColor].CGColor];
    
    [_viewTwo setWantsLayer:YES];
    [_viewTwo.layer setBackgroundColor:[NSColor blueColor].CGColor];
    
    
}


- (void)setRepresentedObject:(id)representedObject {
    [super setRepresentedObject:representedObject];

    // Update the view, if already loaded.
}


@end

運行結果如圖：

跟預先看到的結果一樣，viewThree排在最底下，viewTwo排在中間，viewOne排在最前面，這樣的話我們可以調整storyboard中三個view的位置，實現view之間的層級關係。比如我們將storyboard中三個view的順序調整爲：

viewOne在最底下，viewThree在中間，viewTwo在最前面。運行一下，結果如圖：

結論：我們可以調整storyboard中view的順序實現view層級關係顯示，越在下面的view顯示的時候越在前面。

二、純代碼

用storyboard調整view的層級關係畢竟有很多限制，通過代碼調整view的層級關係纔是最佳選擇，因爲代碼可以的動態改變view的層級關係。前面也說了，NSView沒有sendSubviewToback和bringSubViewToFront這兩個設置層級關係的方法，但是NSView有addSubview:positioned:relativeTo:這個方法，這個方法功能與sendSubviewToback和bringSubViewToFront這兩個方法類似，可以設置兩個view之間的層級關係，positioned這個參數可以設置NSWindowBelow（在下面）、NSWindowAbove（在上面）和NSWindowOut（在外面）， relativeTo這個參數可以設置與哪個view的層級關係。代碼：

//
//  ViewController.m
//  NSViewHierarchicalRelationships
//
//  Created by SC Chen on 28/12/2017.
//  Copyright © 2017 sc. All rights reserved.
//

#import "ViewController.h"

@interface ViewController()

//@property (strong) IBOutlet NSView *viewOne;
//@property (strong) IBOutlet NSView *viewTwo;
//@property (strong) IBOutlet NSView *viewThree;

@property (nonatomic, strong) NSView *viewOne;
@property (nonatomic, strong) NSView *viewTwo;
@property (nonatomic, strong) NSView *viewThree;


@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // Do any additional setup after loading the view.
    
    // storyboard設置view層級關係
//    [_viewThree setWantsLayer:YES];
//    [_viewThree.layer setBackgroundColor:[NSColor yellowColor].CGColor];
//
//    
//    [_viewOne setWantsLayer:YES];
//    [_viewOne.layer setBackgroundColor:[NSColor redColor].CGColor];
//    
//    [_viewTwo setWantsLayer:YES];
//    [_viewTwo.layer setBackgroundColor:[NSColor blueColor].CGColor];
    
    // 純代碼設置view的層級關係
    // 設置viewOne在最底下，viewThree在中間，viewTwo在最前面
    _viewOne = [[NSView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    [_viewOne setWantsLayer:YES];
    [_viewOne.layer setBackgroundColor:[[NSColor redColor] CGColor]];
    [self.view addSubview:_viewOne];
    
    _viewTwo = [[NSView alloc] initWithFrame:CGRectMake(150, 100, 100, 100)];
    [_viewTwo setWantsLayer:YES];
    [_viewTwo.layer setBackgroundColor:[[NSColor blueColor] CGColor]];
    [self.view addSubview:_viewTwo positioned:NSWindowAbove relativeTo:_viewOne];
    
    _viewThree = [[NSView alloc] initWithFrame:CGRectMake(125, 60, 100, 100)];
    [_viewThree setWantsLayer:YES];
    [_viewThree.layer setBackgroundColor:[[NSColor yellowColor] CGColor]];
    [self.view addSubview:_viewThree positioned:NSWindowBelow relativeTo:_viewTwo];
    
}


- (void)setRepresentedObject:(id)representedObject {
    [super setRepresentedObject:representedObject];

    // Update the view, if already loaded.
}


@end

運行結果：

viewOne在最底下，viewThree在中間，viewTwo在最前面。