如何在 Swift 4 中仅将 NSButton 的一侧的角圆角化?
How can I round the corners of only one side of an NSButton in Swift 4?
我是 Swift 和 Stack Overflow 的新手,所以我希望我不会要求太多。
我正在尝试实现可以在 Finder 或 XCode 编辑器工具栏中找到的 'grouped' 按钮样式,like these two button groups。正如您在第一组按钮中看到的那样,左侧按钮仅在左侧呈圆形,中心按钮根本没有圆形,而右侧按钮仅在右侧呈圆形。同样的事情适用于第二组按钮。我想完成这样的事情,但我不确定如何实现。
在网上搜索了一个解决方案(包括 iOS 教程)后,我尝试为 NSButton class 提供一个扩展并手动将两个左角圆角化,如下所示:
// Extensions.swift
extension NSButton {
func roundLeftCorners() {
self.layer?.maskedCorners = [.layerMinXMinYCorner, .layerMinXMaxYCorner]
self.layer?.cornerRadius = 20.0 // Some arbitrary number, just wanted to make the rounded corner visible
self.layer?.masksToBounds = true
}
}
然后,在我的视图控制器的 viewDidLoad()
函数中,我尝试调用这个成员:
// MyViewController.swift
class MyViewController: NSViewController {
@IBOutlet weak var leftButton: NSButton!
override func viewDidLoad() {
super.viewDidLoad()
leftButton.roundLeftCorners()
}
// ...
}
...但这对我不起作用。一些简单的调试显示 self.layer
的 Optional
值为 nil
,所以我不确定那里发生了什么。
接下来,我尝试创建自己的自定义 class 并使用上面相同的代码覆盖 draw(_ dirtyRect:)
函数,如下所示:
// LeftButton.swift
class LeftButton: NSButton {
override func draw(_ dirtyRect: NSRect) {
super.draw(dirtyRect)
self.layer?.maskedCorners = [.layerMinXMinYCorner, .layerMinXMaxYCorner]
self.layer?.cornerRadius = 20.0
self.layer?.masksToBounds = true
}
}
// MyViewController.swift
class MyViewController: NSViewController {
@IBOulet weak var leftButton: LeftButton!
// ...
}
...但这并没有删除右侧的圆角。奇怪的是,新的 cornerRadius
值只有在 50.0
或更大时才会明显;少一点,左角看起来和其他角完全一样 NSButton
.
一些答案提到用 NSBezierPath
手动绘制路径中的点,但它没有达到我想要的效果。我在 Storyboard 编辑器上也找不到任何相关的 properties/attributes。也许我对这个看似简单的问题的方法过于复杂,或者我没有以正确的方式看待它,但我希望有人能帮助我解决这个问题。提前致谢!
1) 您显示的图像使用的是简单的 NSSegmentedControl。无需定制。
2) 你尝试做的事情无论如何都行不通;如果它可以机械地工作,它最终会做的只是剪裁左角的绘制内容。它不会神奇地填充右边的绘图,并创建适当的控制边框等。
AppKit 控件不仅仅是填充了边框、背景等属性的 CALayer。它们几乎全部都是通过经典的 drawRect: 方法以某种方式使用 Core Graphics 绘制的。视图具有层的事实是由于层支持。使用现有控件的层,您最终可以做的事情很少。要正确地自定义它们,您可以适当地覆盖 NSView、NSControl、NSCell 等中的标准绘图例程。
我是 Swift 和 Stack Overflow 的新手,所以我希望我不会要求太多。
我正在尝试实现可以在 Finder 或 XCode 编辑器工具栏中找到的 'grouped' 按钮样式,like these two button groups。正如您在第一组按钮中看到的那样,左侧按钮仅在左侧呈圆形,中心按钮根本没有圆形,而右侧按钮仅在右侧呈圆形。同样的事情适用于第二组按钮。我想完成这样的事情,但我不确定如何实现。
在网上搜索了一个解决方案(包括 iOS 教程)后,我尝试为 NSButton class 提供一个扩展并手动将两个左角圆角化,如下所示:
// Extensions.swift
extension NSButton {
func roundLeftCorners() {
self.layer?.maskedCorners = [.layerMinXMinYCorner, .layerMinXMaxYCorner]
self.layer?.cornerRadius = 20.0 // Some arbitrary number, just wanted to make the rounded corner visible
self.layer?.masksToBounds = true
}
}
然后,在我的视图控制器的 viewDidLoad()
函数中,我尝试调用这个成员:
// MyViewController.swift
class MyViewController: NSViewController {
@IBOutlet weak var leftButton: NSButton!
override func viewDidLoad() {
super.viewDidLoad()
leftButton.roundLeftCorners()
}
// ...
}
...但这对我不起作用。一些简单的调试显示 self.layer
的 Optional
值为 nil
,所以我不确定那里发生了什么。
接下来,我尝试创建自己的自定义 class 并使用上面相同的代码覆盖 draw(_ dirtyRect:)
函数,如下所示:
// LeftButton.swift
class LeftButton: NSButton {
override func draw(_ dirtyRect: NSRect) {
super.draw(dirtyRect)
self.layer?.maskedCorners = [.layerMinXMinYCorner, .layerMinXMaxYCorner]
self.layer?.cornerRadius = 20.0
self.layer?.masksToBounds = true
}
}
// MyViewController.swift
class MyViewController: NSViewController {
@IBOulet weak var leftButton: LeftButton!
// ...
}
...但这并没有删除右侧的圆角。奇怪的是,新的 cornerRadius
值只有在 50.0
或更大时才会明显;少一点,左角看起来和其他角完全一样 NSButton
.
一些答案提到用 NSBezierPath
手动绘制路径中的点,但它没有达到我想要的效果。我在 Storyboard 编辑器上也找不到任何相关的 properties/attributes。也许我对这个看似简单的问题的方法过于复杂,或者我没有以正确的方式看待它,但我希望有人能帮助我解决这个问题。提前致谢!
1) 您显示的图像使用的是简单的 NSSegmentedControl。无需定制。
2) 你尝试做的事情无论如何都行不通;如果它可以机械地工作,它最终会做的只是剪裁左角的绘制内容。它不会神奇地填充右边的绘图,并创建适当的控制边框等。
AppKit 控件不仅仅是填充了边框、背景等属性的 CALayer。它们几乎全部都是通过经典的 drawRect: 方法以某种方式使用 Core Graphics 绘制的。视图具有层的事实是由于层支持。使用现有控件的层,您最终可以做的事情很少。要正确地自定义它们,您可以适当地覆盖 NSView、NSControl、NSCell 等中的标准绘图例程。