CODEWITHSUNDEEP
objective-cswiftmacosnstouchbar
Bernd
Bernd

Reputation: 11493

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

I’d like to show a scrollable list of buttons in my app’s Touch Bar, similar to how Safari shows favourites when typing an address.

A scroll view doesn’t seem to be one of the standard TouchBar controls. Which controls do you use for this?

Upvotes: 0

Views: 1702

Answers (3)

Michael_mhr
Michael_mhr

Reputation: 772

I just translated the code from Santiago Gil to 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

Hopefully this helps someone ;-)

Upvotes: 0

Santiago Gil
Santiago Gil

Reputation: 91

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

NSScrubber is intended to be a picker of items, similar to a segmented control but with the added benefit of a scrollable list. NSScrubber also manages it's own highlighted state and will eat up touch events. You can get a horizontal scrollable list of NSButtons by popping them into a scroll view. Here's a quick example using constraints to create an 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;

Upvotes: 8

Matthew Seaman
Matthew Seaman

Reputation: 8092

As you probably know, you add NSTouchBarItems to a TouchBar instance in order to add items to a Touch Bar.

In order to add a scrollable list, create an instance of NSScrubber. Once that's set up, you'll need to add that NSScrubber to a custom instance of NSCustomTouchBarItem, most likely to the view property. Then, you can add that item to the Touch Bar. Be sure to read the linked documentation.

Upvotes: 0

Related Questions