MacOS如何实现含文本标签、图片、进度控件的可复用UI片段？

Got it, let's break down how to build this reusable UI component for macOS exactly how you want it—using a XIB for standalone design, so you can drop it into any part of your app with minimal code (or even none at all):

First, set up the core of your reusable component:

• Create a new NSView subclass (e.g., ProgressCardView).
• Create a matching XIB file (same name, ProgressCardView.xib). In the XIB's Identity Inspector, set the "File's Owner" class to your custom ProgressCardView—don't set the view's class yet (we'll handle that in code).

Open the XIB and build your desired layout:

• Drag in the controls you need: NSTextField (for text labels), NSImageView (for images), and NSProgressIndicator (for the progress bar).
• Set up Auto Layout constraints to make the layout adaptive (e.g., pin the icon to the leading edge, label next to it, progress bar below both, with padding).
• Connect the controls to your custom view class as IBOutlets (control-drag from each control to the ProgressCardView.swift file).

To let you set values directly in Storyboards/XIBs without writing code, add @IBInspectable properties to your custom view. This exposes them in the Attributes Inspector:

import Cocoa

class ProgressCardView: NSView {
    @IBOutlet weak var titleLabel: NSTextField!
    @IBOutlet weak var iconImageView: NSImageView!
    @IBOutlet weak var progressIndicator: NSProgressIndicator!
    
    // Configurable properties (visible in Attributes Inspector)
    @IBInspectable var titleText: String = "Default Title" {
        didSet {
            titleLabel.stringValue = titleText
        }
    }
    
    @IBInspectable var icon: NSImage? {
        didSet {
            iconImageView.image = icon
        }
    }
    
    @IBInspectable var progress: Double = 0.0 {
        didSet {
            progressIndicator.doubleValue = progress
        }
    }
    
    // MARK: - Load XIB
    override init(frame frameRect: NSRect) {
        super.init(frame: frameRect)
        loadXib()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        loadXib()
    }
    
    private func loadXib() {
        guard let nib = NSNib(nibNamed: .init("ProgressCardView"), bundle: nil) else { return }
        var topLevelObjects: NSArray?
        if nib.instantiate(withOwner: self, topLevelObjects: &topLevelObjects) {
            if let contentView = topLevelObjects?.first(where: { $0 is NSView }) as? NSView {
                contentView.frame = bounds
                contentView.autoresizingMask = [.width, .height]
                addSubview(contentView)
            }
        }
    }
}

Now you can drop this component anywhere in your app:

Option 1: No-Code Reuse in Storyboard/XIB #

1. Open the Storyboard or XIB where you want to use the component.
2. Drag a regular NSView from the Object Library onto your view.
3. Select the new NSView, go to the Identity Inspector, and set its class to ProgressCardView.
4. Switch to the Attributes Inspector—you'll see your custom titleText, icon, and progress properties. Set them directly here, and the UI will update in real time.

Option 2: Code-Based Reuse (If Needed) #

If you need to create the component dynamically, just initialize it like any other view:

let progressCard = ProgressCardView(frame: NSRect(x: 20, y: 20, width: 300, height: 80))
progressCard.titleText = "File Upload"
progressCard.icon = NSImage(named: .documentIcon)
progressCard.progress = 75.0
yourView.addSubview(progressCard)

• Make sure your XIB's layout uses Auto Layout properly so the component adapts to different sizes in parent views.
• If you want to add custom actions (e.g., tapping the card), add IBActions to your custom view class and connect them in the XIB.

内容的提问来源于stack exchange，提问作者armenm