macOS 开发-NSButton

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。完整的源码请访问这里:https://github.com/dengyhgit/macOS-Dev-Demo/tree/master/NSButton, 如对你有帮忙,别忘点亮小⭐⭐。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容