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