Как создать согласованные кнопки панели инструментов с иконками

Желаемый вид

Я хочу создать панель инструментов для своего приложения, которая будет содержать несколько простых кнопок, каждая с одним монохромным значком. Вот пример некоторых кнопок панели инструментов, похожих на те, которые я пытаюсь получить, из окна создания почты:

Кнопки панели инструментов окна создания почты

Обратите внимание, что эти кнопки имеют одинаковый размер, внутреннее заполнение, заполнение и затенение. Это довольно последовательный стиль для macOS, присутствующий в Mail, Safari, Finder и т. Д. Это заставляет меня подозревать, что для создания таких кнопок существует стандартизированный компонент пользовательского интерфейса.

Если я использую сегментированный элемент управления, каждая кнопка выглядит правильно, а каждый значок правильно дополнен:

«Сегментированный

Теперь я хотел бы добавить отдельные кнопки, соответствующие стилю.

Попытка 1

Моей первой попыткой было добавить кнопку (NSButton) на панель инструментов:

Это привело к тому, что широкая кнопка оказалась слишком короткой и не выровнена с сегментированным элементом управления:

Попытка 1

Попытка 2

Моя вторая попытка состояла в том, чтобы использовать сегментированный элемент управления только с 1 сегментом.

Это привело к тому, что кнопка имела правильную форму, размер и т. д., но она была смещена относительно ее метки.

Попытка 2

Естественно, я могу вручную настроить кнопку под цель, но чувствую, что что-то упускаю. Как правильно создать эти стандартные кнопки?


person Alexander    schedule 08.09.2017    source источник


Ответы (1)


Это на самом деле довольно легко сделать, и вы уже были близки. Вы можете использовать NSButton для этого. Обратите внимание, что у него есть разные стили (определенные в NSButton.BezelStyle) на выбор. По умолчанию используется тот, который используется внутри окон и модальных окон. Но для панелей инструментов, чтобы они соответствовали стилю сегментированных элементов управления и панелей поиска, вы можете выбрать стиль .texturedRounded.

Вы также можете установить стиль через Interface Builder. Обратите внимание, что вам нужно выбрать саму кнопку, а не элемент панели инструментов вокруг нее.

введите описание изображения здесь

Чтобы получить правильный размер, вы, кажется, устанавливаете значок в элементе панели инструментов, а не в самой кнопке.

Вот мой результат:

введите описание изображения здесь

введите описание изображения здесь

person mangerlahn    schedule 09.09.2017
comment
Я пробовал это, но это не совсем совпадает, а также размер кнопки не соответствует значку внутри нее автоматически. i.imgur.com/tRLXaQi.png - person Alexander; 09.09.2017
comment
Это странно, я обновил свой ответ. Возможно, это исправит это для вас. - person mangerlahn; 09.09.2017
comment
Вы уверены, что размер автоматически? Я не мог повторить результаты. И из того, что я вижу, имя изображения NSToolbarItem используется совместно с изображением NSButton. - person Alexander; 11.09.2017
comment
А, ладно, извини. Я неправильно понял поведение Xcode. Я измерил ширину некоторых кнопок в Finder, Mail и т. д. Они имеют ширину 38, которую я установил вручную на панели инструментов. (минимальная и максимальная ширина одинаковы). После этого я установил изображение элемента панели инструментов, и только тогда интерфейсный конструктор представил новый размер. - person mangerlahn; 11.09.2017
comment
Удалось ли исправить смещение по высоте? - person mangerlahn; 11.09.2017
comment
Нет, высота все еще немного не та, как на скриншоте. - person Alexander; 11.09.2017
comment
Да, но это только в Interface Builder. Скомпилируйте и запустите, значки должны быть выровнены правильно. Тем не менее, он достоин сообщения об ошибке. - person mangerlahn; 12.09.2017
comment
Не могли бы вы поделиться этим примером проекта, который вы сделали? - person Alexander; 12.09.2017
comment
Ну, в этом нет ничего особенного, но я точно смогу разослать его сегодня после Keynote ;) - person mangerlahn; 12.09.2017
comment
Извините, я совсем забыл об этом. Вот мой пример: github.com/mangerlahn/StackOverflow-ToolbarItem-Test - person mangerlahn; 16.09.2017