如何创建类似于Xcode属性面板的选项卡式面板

Question

我正在尝试创建一个类似于Xcode属性面板的选项卡式面板，但标准选项卡式面板似乎具有不同的外观和感觉，无法更改它。应使用哪些控件来创建类似的标签面板？

编辑： 我没有使用NSTabViewController - 只有TabView !!

Answer 1

我刚创建了一个带有故事板和提供的布局的新项目，添加到View Controllers视图顶部的自定义视图。在自定义视图中添加了按钮，style = square，type = toggle，并使用了类型为template的图标。将标签分配给按钮0-4并确实将它们放到水平堆栈视图中。然后添加了一条水平线和一个容器视图。然后我将一个Tab View Controller添加到故事板并将其嵌入到容器视图中。所有按钮都连接到相同的操作。

import Cocoa

class ViewController: NSViewController {

    @IBOutlet var myStackView: NSStackView!

    var oldSelection: Int = 0
    var newSelection: Int = 0

    var buttons: [NSButton]?
    var tabViewDelegate: NSTabViewController?

    @IBAction func selectedButton(_ sender: NSButton) {
        newSelection = sender.tag
        tabViewDelegate?.selectedTabViewItemIndex = newSelection

        buttons![oldSelection].state = .off
        sender.state = .on

        oldSelection = newSelection
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        buttons = (myStackView.arrangedSubviews as! [NSButton])
    }

    override var representedObject: Any? {
        didSet {
        // Update the view, if already loaded.
        }
    }

    override func prepare(for segue: NSStoryboardSegue, sender: Any?) {
        // Once on load
        tabViewDelegate = segue.destinationController as?  NSTabViewController
    }

}

Answer 2

如果您使用故事板，只需将标签视图控制器拖到曲面并连接到窗口即可。 然后转到选项卡视图控制器的IB设置并将样式更改为工具栏，如下所示：

然后添加标签并将图像添加到每个标签，如下所示：

运行您的应用并享受XCode设置视图的外观：

Answer 3

SwiftUI

实施

struct SystemSegmentControl : View {
    
    // MARK: - Internal -

    @Binding var selection : Int
    let systemImages: [String]

    var body : some View {
        HStack(spacing: 5) {
            ForEach (0..<systemImages.count) { i in
                SystemSegmentButton(selection: self.$selection, selectionIndex: i, systemImage: systemImages[i])
              }
        }
    }
}


struct SystemSegmentButton : View {
    
    // MARK: - Internal -

    @Binding var selection : Int
    let selectionIndex: Int
    let systemImage : String

    var body : some View {
        Button(action: { self.selection = self.selectionIndex }) {
            Image(systemName: systemImage)
                .padding(8)
                .foregroundColor(selectionIndex == selection ? .controlAccentColor : .controlColor)
        }
        .buttonStyle(BorderlessButtonStyle())
    }
}

用法

struct SettingsView: View {
    
    // MARK: - Internal -
            
    var body: some View {
        GeometryReader { geometry in
            VStack(spacing: 0) {
                SystemSegmentControl(selection: $selection, systemImages: ["slider.horizontal.3", "eye"])
                Divider()
                switch selection {
                case 0:
                    Text("Tab 1")
                default:
                    Text("Tab 2")
                }
            }
            .frame(width: geometry.size.width, height: geometry.size.height, alignment: .topLeading)
        }
        .frame(width: 250)
    }
    
    // MARK: - Private -
    
    @State private var selection = 0

}

结果