NSTableCellView的使用

NSTableView中的NSTableCellView最添加控件

從庫中拖各種view控件到NSTableCellView中，如image view，如check button，如round rect button分別拖入到NSTableCellView中

從Connections inspector中可以看到，在NSTableCellView中可以看到有幾個本身存在Outlets，包括一個imageView，一個textFiled和menu等，我們在storyboard NSTableCellView中拖入其它的view控件以後，可以通過Connections inspector給創建connect。

在connection inspector中，通過 Referencing Outlets上，拖拽connection線到Table Cell View上，

連線後，彈出可選擇的Outlets選項，可見這裏邊的textField已經被下邊的label view給連接，所以只顯示了一個image view的選項

點擊imageView，建立connect

NSTableCellView中爲何會有這兩個Outlets呢，如果我們想要定義自己的Outlets如何做呢？

通過檢查NSTableCellView中可以知道，這個NSTableCellView中確實定義了兩個Outlets，就是imageView和textField

所以如果想要添加其它類型的view空間，並想拖過cell view的方式存取操作，可自定義一個繼承自NSTableCellView的class，在其中添加我們自己的IBOutlet定義，之後就可以用上邊的方法，將我們自定義的view建立connect了

比如創建MyTableCellView.h

// MyTableCellView.h定義
// 繼承自NSTableCellView
#import <Cocoa/Cocoa.h>
@interface MyTableCellView : NSTableCellView
//新增加一個IBOutlet
@property (nullable, assign) IBOutlet NSButton *button;
@end

在這個例子僅僅是達到能夠通過cell view存取其中的控件的目的，所以MyTableCellView.m文件不用動，使用自動生成的即可

// MyTableCellView.m文件，使用Xcode自動生成的內容
#import "MyTableCellView.h"

@implementation MyTableCellView

- (void)drawRect:(NSRect)dirtyRect {
    [super drawRect:dirtyRect];
    
    // Drawing code here.
}

@end

 

將自定義的Table Cell View設置給Table View的Cell View

此時點開connection inspector，可以看到已經有了我們自定義的button的outlets

建立connect

1、拖線

2、點擊button，建立connect

3、建立connect後的顯示

之後，在ViewController中實現NSTableViewDataSource和NSTableViewDelegate中必須實現的方法

1、將Table View在ViewController.h中建立connect

1.1）開啓兩個tab，顯示storyboard和ViewController.h文件，ctrl+鼠標左鍵，拖拽連接

1.2）在彈出的對話框中，輸入變量名稱tableView

1.3）點擊1.2中的connect按鈕，建立connect，在ViewController.h中顯示了關聯的變量tableView

2、爲每個TableCellView設置identity屬性，第一個設置爲NameCell，其它兩個分別設置爲CameraCell、MicrophoneCell

3、實現data source方法和delegate方法

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.tableView.delegate = self;
    self.tableView.dataSource = self;

    // Do any additional setup after loading the view.
}

// ViewController.m中實現DataSource方法
- (NSInteger)numberOfRowsInTableView:(NSTableView *)tableView {
    return 3;
}

- (NSView* )tableView:(NSTableView *)tableView viewForTableColumn:(nullable NSTableColumn *)tableColumn row:(NSInteger)row {
    NSTableCellView *cell = nil;
    if (tableColumn == tableView.tableColumns[0]) { 
    //通過tableView.tableColumns來判斷當前操作的是哪一列
        cell = [tableView makeViewWithIdentifier:@"NameCell" owner:nil];
        // 通過cell的identity來取得所設計的cell view，這一identifier是在identity inspector中的identity中設置
        // 如上一步驟所展示的設置方法
        cell.textField.stringValue = @"name";
        // 通過cell的方法可直接存取在storyboard中添加的label控件，獲取其中的textField並賦值
        cell.imageView.image = [NSImage imageNamed:@"red.png"];
        // 通過cell的方法可直接存取在storyboard中添加的image控件，獲取其中的imageView並賦值
    }else if (tableColumn == tableView.tableColumns[1]) {
        cell = [tableView makeViewWithIdentifier:@"CameraCell" owner:nil];
    }else if(tableColumn == tableView.tableColumns[2]) {
        cell = [tableView makeViewWithIdentifier:@"MicrophoneCell" owner:nil];
    }
    return cell;
}
// ViewController.m中實現delegate方法
-(CGFloat)tableView:(NSTableView *)tableView heightOfRow:(NSInteger)row{
    return 30;
}

@end

3、對不同button實現的action，同樣按照上邊的方法建立connect後，通過button來獲取其動作

// button 關聯的action和方法
- (IBAction)onCellClick:(id)sender {
    NSButton *btn = (NSButton*)sender;
    if ( [btn image] == [NSImage imageNamed:@"green.png"] )
        [btn setImage:[NSImage imageNamed:@"red.png"]]; // 改變button的背景圖
    else
        [btn setImage:[NSImage imageNamed:@"green.png"]];
    
    NSTableRowView *rowView = ( NSTableRowView *)btn.superview;
    //通過button的superview來獲取其NSTableRowView，從而進行操作
    NSInteger clickIndex = [tableView  rowForView:rowView];
    //通過rowView獲取其在tableView中的index，今兒進行下一步操作
    
    // NSAlert彈窗
    NSAlert *alert = [[NSAlert alloc] init];
    alert.messageText = @"Hello";
    [alert setShowsHelp:NO];
    NSString* name = @"AlertName";
    alert.informativeText = name;
    alert.alertStyle = NSAlertStyleWarning;
    [alert addButtonWithTitle:@"Ok"];
    
    [alert runModal];
}

 

---

Demo Code