Mac开发基础05-NSView

NSView 概述

NSView 是 macOS 应用中所有用户界面元素的基类。它提供了一系列功能用于视图的绘制、事件处理、动画、自动布局等。

1. 基本属性

bounds 和 frame

bounds 描述了视图自身坐标系中的矩形区域，而 frame 描述了视图在其父视图坐标系中的矩形区域。

Objective-C

NSView *view = [[NSView alloc] initWithFrame:NSMakeRect(0, 0, 200, 200)];
NSLog(@"Bounds: %@", NSStringFromRect(view.bounds)); // Bounds: (0.0, 0.0, 200.0, 200.0)
NSLog(@"Frame: %@", NSStringFromRect(view.frame));   // Frame: (0.0, 0.0, 200.0, 200.0)

Swift

let view = NSView(frame: NSRect(x: 0, y: 0, width: 200, height: 200))
print("Bounds: \(view.bounds)") // Bounds: (0.0, 0.0, 200.0, 200.0)
print("Frame: \(view.frame)")   // Frame: (0.0, 0.0, 200.0, 200.0)

alphaValue

用于设置视图的透明度。

Objective-C

view.alphaValue = 0.5;  // 设置透明度为50%

Swift

view.alphaValue = 0.5  // 设置透明度为50%

hidden

用于控制视图的可见性。

Objective-C

view.hidden = YES;  // 隐藏视图

Swift

view.isHidden = true  // 隐藏视图

backgroundColor

NSView 本身没有 backgroundColor 属性，但可以通过 wantsLayer 属性和 CALayer 支持来实现背景颜色。

Objective-C

[view setWantsLayer:YES];
view.layer.backgroundColor = [[NSColor blueColor] CGColor];

Swift

view.wantsLayer = true
view.layer?.backgroundColor = NSColor.blue.cgColor

2. 图层和动画

wantsLayer

启用 Core Animation 支持，通过设置 wantsLayer 为 true 或 YES 为视图创建一个 CALayer。

Objective-C

view.wantsLayer = YES;

Swift

view.wantsLayer = true

隐式动画

可以通过 Core Animation 隐式动画来实现属性变化的平滑过渡。

Objective-C

[CATransaction begin];
[CATransaction setAnimationDuration:1.0];
view.layer.backgroundColor = [[NSColor greenColor] CGColor];
[CATransaction commit];

Swift

CATransaction.begin()
CATransaction.setAnimationDuration(1.0)
view.layer?.backgroundColor = NSColor.green.cgColor
CATransaction.commit()

3. 事件处理

鼠标事件

重写相关方法来处理鼠标交互。

Objective-C

- (void)mouseDown:(NSEvent *)event {
    NSLog(@"Mouse down at location: %@", NSStringFromPoint(event.locationInWindow));
}

- (void)mouseDragged:(NSEvent *)event {
    NSLog(@"Mouse dragged");
}

- (void)mouseUp:(NSEvent *)event {
    NSLog(@"Mouse up");
}

Swift

override func mouseDown(with event: NSEvent) {
    print("Mouse down at location: \(event.locationInWindow)")
}

override func mouseDragged(with event: NSEvent) {
    print("Mouse dragged")
}

override func mouseUp(with event: NSEvent) {
    print("Mouse up")
}

键盘事件

视图需要先成为 "First Responder"，才能处理键盘事件。

Objective-C

- (BOOL)acceptsFirstResponder {
    return YES;
}

- (void)keyDown:(NSEvent *)event {
    NSLog(@"Key down: %hu", event.keyCode);
}

- (void)keyUp:(NSEvent *)event {
    NSLog(@"Key up: %hu", event.keyCode);
}

Swift

override var acceptsFirstResponder: Bool {
    return true
}

override func keyDown(with event: NSEvent) {
    print("Key down: \(event.keyCode)")
}

override func keyUp(with event: NSEvent) {
    print("Key up: \(event.keyCode)")
}

4. 自动布局和约束

自动布局

通过 NSLayoutConstraint 来管理视图之间的布局关系。

Objective-C

NSView *subview = [[NSView alloc] init];
[subview setTranslatesAutoresizingMaskIntoConstraints:NO];
[view addSubview:subview];

[NSLayoutConstraint activateConstraints:@[
    [subview.topAnchor constraintEqualToAnchor:view.topAnchor constant:10],
    [subview.leadingAnchor constraintEqualToAnchor:view.leadingAnchor constant:10],
    [subview.widthAnchor constraintEqualToConstant:100],
    [subview.heightAnchor constraintEqualToConstant:100]
]];

Swift

let subview = NSView()
subview.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(subview)

NSLayoutConstraint.activate([
    subview.topAnchor.constraint(equalTo: view.topAnchor, constant: 10),
    subview.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10),
    subview.widthAnchor.constraint(equalToConstant: 100),
    subview.heightAnchor.constraint(equalToConstant: 100)
])

5. 绘制内容

重写 draw(_:)

通过重写 draw(_:) 来自定义视图的绘制内容。

Objective-C

- (void)drawRect:(NSRect)dirtyRect {
    [super drawRect:dirtyRect];

    // 自定义绘制代码
    CGContextRef context = [[NSGraphicsContext currentContext] CGContext];
    CGContextSetFillColorWithColor(context, [[NSColor redColor] CGColor]);
    CGContextFillRect(context, dirtyRect);
}

Swift

override func draw(_ dirtyRect: NSRect) {
    super.draw(dirtyRect)

    // 自定义绘制代码
    if let context = NSGraphicsContext.current?.cgContext {
        context.setFillColor(NSColor.red.cgColor)
        context.fill(dirtyRect)
    }
}

6. 子视图管理

添加、移除和替换子视图

Objective-C

// 添加子视图
NSView *subview = [[NSView alloc] initWithFrame:NSMakeRect(50, 50, 100, 100)];
[subview setWantsLayer:YES];
subview.layer.backgroundColor = [[NSColor greenColor] CGColor];
[view addSubview:subview positioned:NSWindowAbove relativeTo:nil];

// 移除子视图
[subview removeFromSuperview];

// 替换子视图
NSView *newSubview = [[NSView alloc] initWithFrame:NSMakeRect(50, 50, 100, 100)];
[view replaceSubview:subview with:newSubview];

Swift

// 添加子视图
let subview = NSView(frame: NSRect(x: 50, y: 50, width: 100, height: 100))
subview.wantsLayer = true
subview.layer?.backgroundColor = NSColor.green.cgColor
view.addSubview(subview, positioned: .above, relativeTo: nil)

// 移除子视图
subview.removeFromSuperview()

// 替换子视图
let newSubview = NSView(frame: NSRect(x: 50, y: 50, width: 100, height: 100))
view.replaceSubview(subview, with: newSubview)

7. 坐标转换

转换坐标系中的点

Objective-C

NSPoint pointInWindow = NSMakePoint(10, 10);
NSPoint pointInSubview = [view convertPoint:pointInWindow toView:subview];
NSLog(@"Point in subview: %@", NSStringFromPoint(pointInSubview));

Swift

let pointInWindow = NSMakePoint(10, 10)
let pointInSubview = view.convert(pointInWindow, to: subview)
print("Point in subview: \(pointInSubview)")