Отступы Edge Insets для ´UIButton´

Отступы Edge Insets для ´UIButton´

Как добавить отступ между картинкой и заголовком в кнопке. Как поместить иконку справа от заголовка.


Имя Автора
Автор Иван Воробей iOS разработчик. Пишу библиотеки, веду телеграм-канал.

Содержание


Вы управляете тремя отступами - imageEdgeInsets, titleEdgeInsets и contentEdgeInsets. Чаще всего задача сводится к выставлению симметрично-противоположных значений, я поясню ниже этот конфуз.

Перед погружением в процесс гляньте проект-пример. Каждый ползунок отвечает за конкретный отступ — вы можете их комбинировать. На видео такие настройки: цвет фона - красный, цвет иконки - жёлтый, а тайтла - синий.



Сделайте отступ между заголовком и иконкой 10pt. Когда получится, убедитесь, контролируете ли вы результат или получилось наугад. В конце туториала вы будете знать, как это работает.


contentEdgeInsets

Свойство ведёт себя предсказуемо и добавляет отступы вокруг заголовка и иконки. Если поставите отрицательные значения - отступ будет уменьшаться. Код:

// Я знаю про сокращённую запись
previewButton.contentEdgeInsets.left = 10
previewButton.contentEdgeInsets.right = 10
previewButton.contentEdgeInsets.top = 5
previewButton.contentEdgeInsets.bottom = 5
`contentEdgeInsets` отступы.

Вокруг контента появились отступы. Они добавляются пропорционально и влияют только на размер кнопки. Нужны, чтобы расширить область нажатия, если кнопка маленькая.


imageEdgeInsets и titleEdgeInsets

Я вынес их в одну секцию не просто так. Чаще всего задача будет сводиться к симметричному добавлению отступов с одной стороны и уменьшению с другой. Звучит сложно, но сейчас разрулим.

Добавим отступ между картинкой и заголовком 10pt. Первая идея - добавить отступ через проперти imageEdgeInsets:



Отступ добавляется, но не влияет на размер кнопки и иконка вылетает за кнопку. Напарник titleEdgeInsets работает так же - не меняет размер кнопки. Добавим отступ для заголовка, но противоположный по значению отступа иконки. Выглядеть это будет так:

previewButton.imageEdgeInsets.left = -10
previewButton.titleEdgeInsets.left = 10

Это та симметрия, про которую писал выше.

Давайте усложним задачу - поставим иконку справа от заголовка.

let buttonWidth = previewButton.frame.width
let imageWidth = previewButton.imageView?.frame.width ?? .zero

// Смещаем заголовок к левому краю. 
// Отступ слева был `imageWidth`. Если уменьшите на это значение, то получите левый край.
previewButton.titleEdgeInsets = UIEdgeInsets(
    top: 0, 
    left: -imageWidth, 
    bottom: 0, 
    right: imageWidth
)

// Перемещаем иконку к правому краю.
// Дефолтный отступ был 0, значит, у новой точки Y шириной станет ширина иконки.
previewButton.imageEdgeInsets = UIEdgeInsets(
    top: 0, 
    left: buttonWidth - imageWidth, 
    bottom: 0, 
    right: 0
)

Готовый класс

В моей библиотеке SparrowKit уже есть готовый класс кнопки SPButton с поддержкой отступа между картинкой и текстом.

button.titleImageInset = 8

Работает для RTL-локализации. Если картинки нет, то отступ не добавляется. Разработчику нужно только выставить значение отступа.


Deprecated

Обратите внимание, с iOS 15 наши друзья помечены depriсated.

Скриншот с сайта Apple Developer.

Несколько лет проперти будут работать. Apple рекомендуют использовать конфигурацию. Посмотрим, что останется в живых - конфигурация или старый добрый padding.

На этом всё. Чтобы наглядно побаловаться, качайте проект-пример. Задать вопросы можно в комментариях к посту.


Другие туториалы

Асинхронность с async/await/actor

Разберём async, await, actor. Напишем тузлу для поиска приложений в App Store, используя новые инструменты.

Действия на сочетания клавиш в SwiftUI

Знакомимся с модификатором keyboardShortcut. Добавим модификаторы для клавиш .command, .option, .shift

Жизненный цикл ´UIViewController´

Рассмотрим когда вызываются методы контроллера и что можно делать внутри них. Когда настраивать вьюхи и данные.

SF Symbols 3 и Render Mode

Вместе c iOS 15 обновили SF Symbols до 3-ей версии. Добавили 600 новых символов и разные способы покрасить их. Некоторые символы получили вариации форм.

В telegram-канале приходят уведомления о новых туториалах. В чате для iOS разработчиков ответят на вопросы.

Открыть Telegram-канал