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

Содержание

• contentEdgeInsets
• imageEdgeInsets и titleEdgeInsets
• Готовый класс
• Deprecated

---

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

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

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

---

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

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

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

---

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

Добавим отступ между картинкой и заголовком 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-локализации. Если картинки нет, то отступ не добавляется. Разработчику нужно только выставить значение отступа.

---

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

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

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

---

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