Mac开发基础16-NSButton（一）

NSButton 是 macOS 应用中常用的控件之一，用于处理各种按钮操作。它不仅提供了丰富的 API 来定制按钮的外观和行为，还可以通过不同的配置实现多种类型的按钮，如 push 按钮、toggle 按钮、radio 按钮等。

1. 基本用法

创建和初始化

Objective-C

// 创建和初始化一个 NSButton 实例
NSButton *button = [[NSButton alloc] initWithFrame:NSMakeRect(50, 50, 100, 30)];

// 设置按钮标题
[button setTitle:@"Click Me"];

// 设置按钮类型（NSButtonTypeMomentaryPushIn 是默认类型）
[button setButtonType:NSButtonTypeMomentaryPushIn];

// 设置按钮目标和动作方法
[button setTarget:self];
[button setAction:@selector(buttonClicked:)];

Swift

// 创建和初始化一个 NSButton 实例
let button = NSButton(frame: NSRect(x: 50, y: 50, width: 100, height: 30))

// 设置按钮标题
button.title = "Click Me"

// 设置按钮类型（NSButton.ButtonType.momentaryPushIn 是默认类型）
button.setButtonType(.momentaryPushIn)

// 设置按钮目标和动作方法
button.target = self
button.action = #selector(buttonClicked(_:))

按钮类型

NSButton 提供了几种不同的按钮类型，来支持不同的用户交互需求。

  • Momentary Push Button (临时按钮)

    • 被按下时触发动作，松开后不保持任何状态。

  • Toggle Button (切换按钮)

    • 可以在按下和未按下之间切换状态。

  • Radio Button (单选按钮)

    • 通常一组按钮中只有一个按钮可以被选中。

  • Switch Button (开关按钮)

    • 与 Toggle Button 类似，但外观像开关。

Objective-C

// 设置为切换按钮
[button setButtonType:NSButtonTypeToggle];

// 设置为单选按钮
[button setButtonType:NSButtonTypeRadio];

// 设置为开关按钮
[button setButtonType:NSButtonTypeSwitch];

Swift

// 设置为切换按钮
button.setButtonType(.toggle)

// 设置为单选按钮
button.setButtonType(.radio)

// 设置为开关按钮
button.setButtonType(.switch)

2. 外观定制

设置标题

NSButton 允许设置不同状态下的标题，可以用来实现丰富的用户体验。

Objective-C

// 设置普通状态下的标题
[button setTitle:@"Click Me"];

// 设置按下状态下的标题
[button setAlternateTitle:@"Clicked"];

Swift

// 设置普通状态下的标题
button.title = "Click Me"

// 设置按下状态下的标题
button.alternateTitle = "Clicked"

设置图片

可以通过设置图片来定制按钮的外观，支持普通状态和按下状态。

Objective-C

// 设置普通状态下的图片
[button setImage:[NSImage imageNamed:@"normalImage"]];

// 设置按下状态下的图片
[button setAlternateImage:[NSImage imageNamed:@"alternateImage"]];

Swift

// 设置普通状态下的图片
button.image = NSImage(named: "normalImage")

// 设置按下状态下的图片
button.alternateImage = NSImage(named: "alternateImage")

设置图片和文字的混合

可以同时设置按钮的标题和图片，并配置其布局。

Objective-C

// 设置按钮标题
[button setTitle:@"Click Me"];

// 设置按钮图片
[button setImage:[NSImage imageNamed:@"buttonImage"]];

// 设置图片和标题的布局
[button setImagePosition:NSImageLeft];

Swift

// 设置按钮标题
button.title = "Click Me"

// 设置按钮图片
button.image = NSImage(named: "buttonImage")

// 设置图片和标题的布局
button.imagePosition = .imageLeft

3. 事件处理

目标-动作模式

按钮的主要事件处理采用目标-动作模式，当按钮被点击时，会触发已关联的目标对象上的动作方法。

Objective-C

// 设置目标和动作方法
[button setTarget:self];
[button setAction:@selector(buttonClicked:)];

// 实现动作方法
- (void)buttonClicked:(id)sender {
    NSButton *clickedButton = (NSButton *)sender;
    NSLog(@"Button clicked: %@", clickedButton.title);
}

Swift

// 设置目标和动作方法
button.target = self
button.action = #selector(buttonClicked(_:))

// 实现动作方法
@objc func buttonClicked(_ sender: NSButton) {
    print("Button clicked: \(sender.title)")
}

使用闭包处理事件（Swift）

在 Swift 中，可以使用闭包来处理按钮的点击事件，这样可以减少样板代码，使代码更简洁。

Swift

// 扩展 NSButton 以支持闭包事件处理
extension NSButton {
    private struct AssociatedKeys {
        static var ActionKey = "actionKey"
    }
    
    private class ActionClosureWrapper: NSObject {
        var closure: (NSButton) -> Void
        
        init(_ closure: @escaping (NSButton) -> Void) {
            self.closure = closure
        }
        
        @objc func invoke(_ sender: NSButton) {
            closure(sender)
        }
    }
    
    var actionClosure: ((NSButton) -> Void)? {
        get {
            if let wrapper = objc_getAssociatedObject(self, &AssociatedKeys.ActionKey) as? ActionClosureWrapper {
                return wrapper.closure
            }
            return nil
        }
        set {
            if let newValue = newValue {
                let wrapper = ActionClosureWrapper(newValue)
                target = wrapper
                action = #selector(wrapper.invoke(_:))
                objc_setAssociatedObject(self, &AssociatedKeys.ActionKey, wrapper, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
            } else {
                target = nil
                action = nil
                objc_setAssociatedObject(self, &AssociatedKeys.ActionKey, nil, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
            }
        }
    }
}

// 使用闭包处理按钮的点击事件
button.actionClosure = { sender in
    print("Button clicked: \(sender.title)")
}

深入探讨 NSButton

按钮状态

NSButton 提供了多个状态属性，来获取和设置按钮的当前状态。

  • state
    • 表示按钮的当前状态，可以是 NSControl.StateValue.on, NSControl.StateValue.off, NSControl.StateValue.mixed。
    • mixed 状态通常用于三态按钮，如复选框中的不确定状态。

Objective-C

// 获取按钮当前状态
NSControlStateValue state = button.state;

// 设置按钮状态为选中
[button setState:NSControlStateValueOn];

Swift

// 获取按钮当前状态
let state = button.state

// 设置按钮状态为选中
button.state = .on

按钮样式和行为

NSButton 包含多个属性来控制按钮的样式和行为。

  • bezelStyle
    • 控制按钮的边框样式。
    • 常见样式有 Default, Rounded, ShadowlessSquare, Circular 等。

Objective-C

// 设置按钮的边框样式
[button setBezelStyle:NSBezelStyleRounded];

Swift

// 设置按钮的边框样式
button.bezelStyle = .rounded
  • allowsMixedState
    • 指定按钮是否允许进入 mixed 状态。

Objective-C

// 允许按钮进入 mixed 状态
[button setAllowsMixedState:YES];

Swift

// 允许按钮进入 mixed 状态
button.allowsMixedState = true

使用 Auto Layout 布局按钮

与其他 macOS 控件类似，NSButton 可以使用 Auto Layout 进行布局。以下示例展示了如何使用 Auto Layout 添加和定位按钮。

Objective-C

// 初始化按钮
NSButton *button = [[NSButton alloc] init];
[button setTitle:@"Auto Layout Button"];
[button setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:button];

// 创建并激活约束
[NSLayoutConstraint activateConstraints:@[
    [button.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
    [button.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
    [button.widthAnchor constraintEqualToConstant:150],
    [button.heightAnchor constraintEqualToConstant:50]
]];

Swift

// 初始化按钮
let button = NSButton()
button.title = "Auto Layout Button"
button.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(button)

// 创建并激活约束
NSLayoutConstraint.activate([
    button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    button.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    button.widthAnchor.constraint(equalToConstant: 150),
    button.heightAnchor.constraint(equalToConstant: 50)
])

访问辅助功能

NSButton 提供了访问辅助功能的支持，这对于实现无障碍应用程序尤为重要。

  • accessibilityTitle
    • 设置按钮的辅助功能标题，方便屏幕阅读器识别按钮。

Objective-C

// 设置辅助功能标题
[button setAccessibilityTitle:@"Click Me Button"];

Swift

// 设置辅助功能标题
button.setAccessibilityTitle("Click Me Button")

使用 Interface Builder

在 Xcode 的 Interface Builder 中，可以通过图形用户界面轻松配置 NSButton 的各种属性。通过 Interface Builder，你可以：

  • 设置按钮的标题和图片。
  • 配置按钮的类型和样式。
  • 绑定按钮的目标和动作。
  • 配置 Auto Layout 约束。
  • 设置辅助功能属性。

通过 Interface Builder 和代码的结合，可以快速实现复杂的 UI 布局和交互体验。

使用 KVO 观察按钮属性

Objective-C

[self.button addObserver:self forKeyPath:@"state" options:NSKeyValueObservingOptionNew context:nil];

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *, id> *)change context:(void *)context {
    if ([keyPath isEqualToString:@"state"] && object == self.button) {
        NSLog(@"Button state changed to: %@", change[NSKeyValueChangeNewKey]);
    } else {
        [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
    }
}

Swift

button.addObserver(self, forKeyPath: "state", options: [.new], context: nil)

override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
    if keyPath == "state", let newValue = change?[.newKey] as? NSControl.StateValue {
        print("Button state changed to: \(newValue)")
    } else {
        super.observeValue(forKeyPath: keyPath, of: object, change: change, context: context)
    }
}

总结

NSButton 是 macOS 开发中功能丰富且常用的控件，通过其提供的 API，我们可以轻松地自定义按钮的外观和行为。通过多种配置和技巧，我们可以实现不同类型的按钮，并满足各种用户交互需求。

无论是通过代码还是 Interface Builder，NSButton 都可以很方便地集成到 macOS 应用中。

posted @ 2024-08-06 16:48  Mr.陳  阅读(24)  评论(0)  编辑  收藏  举报