macOS 开发-NSButton

5,347 阅读7分钟

Button是一个用户界面对象,单击该按钮即可将操作消息发送到目标。它的大部分工作都由NSButtonCell处理,当NSButtonCell实例被单击时,捕获到鼠标按下事件,实例会将动作消息发送到其目标。

按钮类型

cocoa为NSButton实现很多不同类型,按钮类型决定按钮的行为,按钮类型分为三类:

  • 按下按钮
  • 粘性按钮
  • 单选按钮和复选框

我们可以通过setButtonType:方法来设置按钮类型:

lazy var button: NSButton = {
    let button = NSButton()
    button.setButtonType(.pushOnPushOff)
    return button
}()

按下按钮

按下按钮对于触发操作最有用,因为它们不显示其状态。点击时,它们会更改其外观;取消点击时,则会恢复原始外观。

01.jpg

我们可以通过设置Button的Type为NSButtonTypeMomentaryPushIn来设置成按下按钮:

lazy var button: NSButton = {
    let button = NSButton(title: "button", target: self, action: #selector(click))
    button.setButtonType(.momentaryPushIn)
    button.frame = NSRect(x: 18, y: 100, width: 70, height: 25)
    return button
}()

要控制自己按下按钮的外观,可使用NSMomentaryChangeButton。按下鼠标按钮时,它将显示替代图像和标题。释放鼠标按钮时,它将显示正常图像和标题。如未设置,则其外观不会改变:

lazy var button1: NSButton = {
    let button = NSButton()
    button.setButtonType(.momentaryChange)
    button.title = "button"
    button.alternateTitle = "Change"
  	button.bezelStyle = .regularSquare
    button.frame = NSRect(x: 18, y: 100, width: 70, height: 25)
    return button
}()

粘性按钮

粘性按钮在按下时保留状态。点击一个后,它会保存按下状态,直到下次点击恢复。我们可以通过设置Button的Type为NSPushOnPushOffButton来设置成按下按钮:

lazy var onOrOffButton: NSButton = {
    let button = NSButton()
    button.setButtonType(.pushOnPushOff)
    button.title = "button"
    button.frame = NSRect(x: 210, y: 70, width: 70, height: 25)
    button.bezelStyle = .rounded
    return button
}()

我们可以通过state属性获取按钮的状态,判断按钮是否已经被选中。对于这个粘性按钮,对于显示应用程序中某些内容的状态(例如:Office Word 中是否为粗体的按钮)很有用。

要控制自己粘性按钮的外观,可使用NSToggleButton。点击一个后,它将显示替代图像和标题。直到下次点击恢复时,它将显示正常图像和标题。如未设置,则其外观不会改变。用于两个状态(例如,“停止”和“开始”)之间切换有效:

lazy var toggleButton: NSButton = {
    let button = NSButton()
    button.action = #selector(click)
    button.setButtonType(.toggle)
    button.title = "start"
    button.alternateTitle = "stop"
    button.frame = NSRect(x: 290, y: 70, width: 70, height: 25)
    button.bezelStyle = .regularSquare
    return button
}()

单选按钮和复选框

单选按钮和复选框主要是区分某些内容的状态,它们是NSToggleButton系统定义图标的专用版本。

复选框是可以在多个选项中选择多项,Button通过设置类型为NSButtonTypeSwitch,让它看起来像一个复选框:

02.jpg

实现代码如下:

lazy var switchBtnView: NSView = {
    let v = NSView(frame: NSRect(x: 70, y: 90, width: 80, height: 200))
    let b1 = NSButton(title: "红色", target: self, action: #selector(click))
    b1.setButtonType(.switch)
    b1.frame = NSRect(x: 5, y: 100, width: 70, height: 25)
    v.addSubview(b1)

    let b2 = NSButton(title: "绿色", target: self, action: #selector(click))
    b2.setButtonType(.switch)
    b2.frame = NSRect(x: 5, y: 130, width: 70, height: 25)
    v.addSubview(b2)

    let b3 = NSButton(title: "蓝色", target: self, action: #selector(click))
    b3.setButtonType(.switch)
    b3.frame = NSRect(x: 5, y: 160, width: 70, height: 25)
    v.addSubview(b3)
    return v
}()

单选按钮是可以在多个选项中选择一项,我们可能通过将多个Button类型设置为NSButtonTypeSwitch,并将它们加在同一个superview,达到多苦单选的效果:

03.jpg

实现代码如下:

lazy var radioBtnView: NSView = {
    let v = NSView(frame: NSRect(x: 70, y: 90, width: 80, height: 200))
    let b1 = NSButton(title: "红色", target: self, action: #selector(click))
    b1.setButtonType(.radio)
    b1.frame = NSRect(x: 5, y: 100, width: 70, height: 25)
    v.addSubview(b1)

    let b2 = NSButton(title: "绿色", target: self, action: #selector(click))
    b2.setButtonType(.radio)
    b2.frame = NSRect(x: 5, y: 130, width: 70, height: 25)
    v.addSubview(b2)

    let b3 = NSButton(title: "蓝色", target: self, action: #selector(click))
    b3.setButtonType(.radio)
    b3.frame = NSRect(x: 5, y: 160, width: 70, height: 25)
    v.addSubview(b3)
    return v
}()

按钮的使用

处理点击事件

我们可以通过action属性给按钮设置处理点击事件,同时也可以设置target来指定处理对象:

lazy var toggleButton: NSButton = {
    let button = NSButton()
    button.action = #selector(click)
    button.title = "start"
}()

@objc private func click(_ sender: NSButton) {
    print("click button")
}

设置边框的外观

我们可以通过更改按钮的形状和阴影来控制按钮的边框。通过设置isBordered来控制是否显示 边框。如若要改边框的形状,请使用更改按钮的边框类型bezelStyle:。边框类型有两个主要类型:

  1. 如果您的按钮主要由文本标识,请使用NSRoundedBezelStyle。它为文本按钮使用适当的边框样式,这是一个圆角矩形;
  2. 如果您的按钮主要是鉴定一个图标,使用NSRegularSquareBezelStyleNSThickSquareBezelStyleNSThickerSquareBezelStyle

设置按钮的标题

按钮可以具有两个与之关联的标题:正常和交替。如果按钮类型NSMomentaryPushInButtonNSPushOnPushOffButtonNSMomentaryLightButton,或者NSOnOffButton,是不断显示只有正常称号。如果按钮类型为NSMomentaryChangeButtonNSToggleButton,则在按钮状态为关闭(NSOffState)时显示普通标题,

如果标题只包含纯文本,使用setTitle:或setAlternateTitle:设置标题。如果希望标题包含样式文本,则使用setAttributedTitle:setAttributedAlternateTitle:设置标题。

如果要设置标题的字体,可使用setFont:按钮标题的字体。

设置按钮的图像

一个按钮可以具有两个与之关联的图像:正常和交替。如果按钮类是NSMomentaryPushInButtonNSPushOnPushOffButtonNSMomentaryLightButton,或NSOnOffButton,只会显示正常图像。如果按钮类型为NSMomentaryChangeButtonNSToggleButton,则在按钮状态为关闭(NSOffState)时显示正常图像。

注意: 如果按钮是复选框或单选按钮,请勿更改其图像。这些按钮的图像是系统定义的,更改它们可能会导致不可预测的结果。

如果要设置按钮图像的位置,请使用imagePosition,并使用以下值之一。默认是noImage,具体作用如下:

public enum ImagePosition : UInt {
    case noImage    // 没有图片
    case imageOnly  // 只有图片
    case imageLeft  // 左图右文
    case imageRight // 左文右图
    case imageBelow // 上文下图
    case imageAbove // 上图下文
    case imageOverlaps // 底层图,上层文,重叠
    @available(OSX 10.12, *)
    case imageLeading
    @available(OSX 10.12, *)
    case imageTrailing
}

隐藏按钮

按键钮有两种隐藏视图的方法:使它完全透明的,或者仅当鼠标悬停在其上方时才可以显示其边框。

  • 若要使按钮透明,请使用isTransparent。透明按钮可跟踪鼠标并发送其动作,但不会自行绘制。

  • 若要在按钮处于活动状态或鼠标悬停在其上方时才显示其边框,请使用showsBorderOnlyWhileMouseInside

默认按钮

当按钮设置为默认按钮。当用户按下Return键时,默认按钮会跳动,并调用其操作消息。若要将按钮标记为默认按钮,请将其keyEquivalent设置为Return ,如下所示:

button.keyEquivalent = "\r"

默认按钮周围有一个粗略的轮廓,位于按钮的边框之外。界面设计时应考虑到额外的空间。

等效键

按钮可以设置一个等效的键,当用户按下该键时,该按钮的响应与被点击一样。需要注意,如果将键设置为等效于Return,则该按钮将成为默认按钮。

我们可以通过keyEquivalent来设置等效键。例如,要将其设置为Return,则可使用:

button.keyEquivalent = "\r"

若要将按钮的键设置为等效于非打印字符,可以使用由定义的键常数,如以下示例所示,该常数将按钮的键设置为等效于左箭头键:

var array = [unichar(NSLeftArrowFunctionKey)]
button.keyEquivalent = NSString(characters: array, length: 1) as String

小结

NSButton相对iOS中的UIButton会更强大,功能也更复杂,在macOS开发中用得最多的组件之一。在接下来的一节我们来聊聊NSImageView。完整的源码请访问这里:github.com/dengyhgit/m…, 如对你有帮忙,别忘点亮小⭐⭐。更多内容,请关注我的公众号:

关注公众号