Touch Bar，如何添加可滚动的按钮列表？

Question

我想在应用的触控栏中显示一个可滚动的按钮列表，类似于 Safari 在键入地址时显示收藏夹的方式。

滚动视图似乎不是标准的 TouchBar 控件之一。您为此使用哪些控件？

Answer 1

您可能知道，添加 NSTouchBarItems to a TouchBar 实例是为了将项目添加到 Touch Bar。

为了添加可滚动列表，创建 NSScrubber. Once that's set up, you'll need to add that NSScrubber to a custom instance of NSCustomTouchBarItem 的实例，最有可能是 view 属性。然后，您可以将该项目添加到触控栏。请务必阅读链接的文档。

Answer 2

NSScrollView is actually supported on the TouchBar (https://developer.apple.com/reference/appkit/nstouchbar#2587738).

NSScrubber 旨在成为项目的选择器，类似于分段控件，但具有可滚动列表的额外好处。 NSScrubber 还管理它自己的高亮状态并且会吃掉触摸事件。您可以通过将它们弹出到滚动视图中来获得 NSButton 的水平可滚动列表。这是一个使用约束创建 NSCustomTouchBarItem 的简单示例：

  NSScrollView *scrollView = [[NSScrollView alloc] initWithFrame:CGRectMake(0, 0, 400, 30)];

  NSMutableDictionary *constraintViews = [NSMutableDictionary dictionary];
  NSView *documentView = [[NSView alloc] initWithFrame:NSZeroRect];

  NSString *layoutFormat = @"H:|-8-";
  NSSize size = NSMakeSize(8, 30);

  for (int i = 0; i <= 8; i++) {
    NSString *objectName = [NSString stringWithFormat:@"button%@",@(i)];
    NSButton *button = [NSButton buttonWithTitle:objectName
                                          target:nil
                                          action:nil];
    button.translatesAutoresizingMaskIntoConstraints = NO;
    [documentView addSubview:button];

    // Constraint information
    layoutFormat = [layoutFormat stringByAppendingString:[NSString stringWithFormat:@"[%@]-8-", objectName]];
    [constraintViews setObject:button forKey:objectName];
    size.width += 8 + button.intrinsicContentSize.width;
  }

  layoutFormat = [layoutFormat stringByAppendingString:[NSString stringWithFormat:@"|"]];

  NSArray *hConstraints = [NSLayoutConstraint constraintsWithVisualFormat:layoutFormat
                                                                  options:NSLayoutFormatAlignAllCenterY
                                                                  metrics:nil
                                                                    views:constraintViews];

  [documentView setFrame:NSMakeRect(0, 0, size.width, size.height)];
  [NSLayoutConstraint activateConstraints:hConstraints];
  scrollView.documentView = documentView;

  NSCustomTouchBarItem *item = [[NSCustomTouchBarItem alloc] initWithIdentifier:@"com.TouchBar.scrollButtons"];
  item.view = scrollView;

Answer 3

我刚刚将代码从 Santiago Gil 翻译成 Swift 4.

let scrollView = NSScrollView(frame: CGRect(x: 0, y: 0, width: 400, height: 30))
var constraintViews: Dictionary<String, Any> = [:]
let documentView = NSView(frame: NSZeroRect)

var layoutFormat: String = "H:|-8-"
var size = NSSize(width: 8, height: 30)

for i in 0...8 {
    let objectName: String = "button\(i)"
    let button: NSButton = NSButton(title: objectName, target: nil, action: nil)
    button.translatesAutoresizingMaskIntoConstraints = false
    
    documentView.addSubview(button)
    
    // Constraint Information
    
    layoutFormat += "[\(objectName)]-8-"
    constraintViews[objectName] = button
    size.width += 8 + button.intrinsicContentSize.width
     
}

layoutFormat += "|"

let hConstraints: Array<NSLayoutConstraint> = NSLayoutConstraint.constraints(withVisualFormat: layoutFormat, options: .alignAllCenterY, metrics: nil, views: constraintViews)

documentView.frame = NSRect(x: 0, y: 0, width: size.width, height: size.height)
NSLayoutConstraint.activate(hConstraints)

scrollView.documentView = documentView

let item = NSCustomTouchBarItem(identifier: .controlScrubber)

item.view = scrollView

希望这对某人有所帮助 ;-)

Touch Bar，如何添加可滚动的按钮列表？

Touch Bar, how to add a scrollable list of buttons?

macos

objective-c

swift

nstouchbar