Отступы Edge Insets для UIButton
Интерфейс и UIKit

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

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

titleEdgeInsets imageEdgeInsets Проект-пример

Имя Автора
Автор Иван Воробей 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 imageEdgeInsets и titleEdgeInsets

Deprecated

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

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

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


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

Новое в iOS 15

SF Symbols 3

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

Новое в iOS 15

UISheetPresentationController

В iOS 15 появились sheet-контроллеры. Их можно перетаскивать с изменением высоты. Вы встречали эти контроллеры в приложениях «Карты» и «Акции».

Часть 1: Коллекция и Таблица

Drag и Drop

Как изменить порядок ячеек в коллекции и таблице. Как перенести ячейки в другую коллекцию. Перемещение нескольких ячеек группой.

Подборка

Ресурсы для iOS разработчика

Подборка полезных ссылок для iOS разработчиков. Структурирована по формату материала. Есть раздел с русскими ресурсами.

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

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