Перейти к основному содержимому
Версия: 5.9.0

Изображения

Класс ChatImages содержит иконки и изображения интерфейса чата. По умолчанию большинство иконок — SF Symbols; chatBubble, sentStatusImage и readStatusImage используют растровые ресурсы из бандла SDK. Заменить любое значение можно на SF Symbol, кастомное изображение из своего бандла или готовый UIImage через конструкторы ChatImage.

Доступные изображения​

Поиск​

ПеременнаяТипНазначение
searchButtonImageSF SymbolИконка поиска
searchNotFoundPlaceholderImageSF SymbolИзображение для «ничего не найдено»

Навигация​

ПеременнаяТипНазначение
backButtonImageSF SymbolИконка кнопки «Назад». В 5.x не применяется — см. Известные ограничения
nextButtonImageSF SymbolИконка кнопки «Вперёд»
keyboardShowImageSF SymbolПоказ клавиатуры
keyboardHideImageSF SymbolСкрытие клавиатуры

Отправка сообщений​

ПеременнаяТипНазначение
sendButtonImageSF SymbolОтправить сообщение
attachButtonImageSF SymbolПрикрепить файл

Плейсхолдеры​

ПеременнаяТипНазначение
emptyChatPlaceholderImageSF SymbolЧат пустой
errorPlaceholderImageSF SymbolОшибка загрузки чата

Реакции​

ПеременнаяТипНазначение
likeEmptyImageSF SymbolНеактивный лайк
likeFullImageSF SymbolАктивный лайк
dislikeEmptyImageSF SymbolНеактивный дизлайк
dislikeFullImageSF SymbolАктивный дизлайк

Рейтинг​

ПеременнаяТипНазначение
starRatingEmptyImageSF SymbolНеактивная звезда
starRatingFullImageSF SymbolАктивная звезда

Файлы и медиа​

ПеременнаяТипНазначение
fileImageSF SymbolФайл
chatBubbleКастомноеМаска сообщения

Прокрутка​

ПеременнаяТипНазначение
scrollToTopImageSF SymbolПрокрутка наверх
scrollToBottomImageSF SymbolПрокрутка вниз

Аватары​

ПеременнаяТипНазначение
avatarPlaceholderImageSF SymbolПлейсхолдер аватара

Меню и действия​

ПеременнаяТипНазначение
closeButtonImageSF SymbolЗакрыть
menuCopyImageSF SymbolСкопировать
menuQuoteImageSF SymbolЦитировать

Голосовые сообщения​

ПеременнаяТипНазначение
voiceButtonImageSF SymbolЗапись голосового
voiceSendButtonImageSF SymbolОтправка голосового
voicePlayImageSF SymbolВоспроизведение
voicePauseImageSF SymbolПауза

Статусы сообщений​

ПеременнаяТипНазначение
sentStatusImageКастомноеСообщение отправлено
pendingStatusImageSF SymbolСообщение в процессе
readStatusImageКастомноеСообщение прочитано
Цвет иконок статусов

sentStatusImage, pendingStatusImage, readStatusImage инициализируются с tintColor: ChatColors().positive при первом обращении. При замене изображения через свойства ChatImages укажите нужный tintColor явно — кастомные цвета из ChatComponents.colors к этим трём токенам не применяются автоматически.

Ошибки и уведомления​

ПеременнаяТипНазначение
errorInfoImageSF SymbolИконка информации об ошибке
errorAlertImageSF SymbolИконка предупреждения об ошибке. В 5.x не применяется — см. Известные ограничения
errorShieldImageSF SymbolИконка ошибки типа файла. В 5.x не применяется — см. Известные ограничения
scheduleImageSF SymbolИконка расписания/нерабочего времени
editImageSF SymbolИконка редактирования

Соответствие Figma и SDK​

На странице Foundation → Icons в Figma иконки имеют свою систему именования. Ниже приведено соответствие между именами в Figma и свойствами ChatImages:

Иконка в FigmaОписание (Figma)Свойство SDK
icon/userАватар пользователяavatarPlaceholderImage
icon/star_emptyПустая звезда рейтингаstarRatingEmptyImage
icon/star_halfПоловина звездынет прямого токена (SDK поддерживает только пустую/полную звезду)
icon/star_fullПолная звезда рейтингаstarRatingFullImage
icon/fileДокументfileImage
icon/state-sendОтправленоsentStatusImage
icon/state-receivedПолучено / ДоставленоChatMessageStyle.deliveredStatusImage (не в ChatImages). По умолчанию читает текущее значение sentStatusImage; для отдельной иконки задайте deliveredStatusImage явно
icon/state-errorОшибка отправкиerrorInfoImage
icon/state-sendingВ процессе отправкиpendingStatusImage
icon/state-editРедактированиеeditImage
icon/playВоспроизведение аудиоvoicePlayImage
icon/photosФотогалереяНе настраивается публично — используется иконка SDK
icon/cameraКамераНе настраивается публично — используется иконка SDK
icon-spinnerСпиннер загрузкиИконка не настраивается (системный UIActivityIndicatorView); цвет — через LoadingIndicatorStyle.indicatorColor
icon/backКнопка «Назад»backButtonImage
icon/forwardКнопка «Вперёд»nextButtonImage
icon/micМикрофонvoiceButtonImage
icon/citeЦитированиеmenuQuoteImage
icon/cancelЗакрытиеcloseButtonImage
icon/scroll-downПрокрутка внизscrollToBottomImage
icon/arrow-upПрокрутка вверх (к старым)scrollToTopImage
icon/arrow-downПрокрутка вниз (к новым)scrollToBottomImage
icon/calendarРасписаниеscheduleImage
icon/menuКнопка открытия меню вложенийattachButtonImage (кнопка-триггер); сама панель меню стилизуется через chatMenuStyle (ChatMenuStyle — только текст и поведение, не иконки)
icon/searchПоискsearchButtonImage
icon/deleteУдалениеЧерез контекстное меню
icon/copyКопироватьmenuCopyImage
icon/recordЗапись голосаvoiceButtonImage
icon/attachПрикрепить файлattachButtonImage

Класс ChatImage​

Конструкторы​

/// SF Symbol
init(system name: String, tintColor: UIColor? = nil)

/// SF Symbol с указанием размера
init(system name: String, size: CGFloat = 14, tintColor: UIColor? = nil)

/// Кастомное изображение (для него нужно указать бандл, в котором оно хранится)
init(named: String,
bundle: Bundle = Bundle(for: ChatImage.self),
tintColor: UIColor? = nil,
renderingMode: UIImage.RenderingMode? = nil)

/// Оборачивание готового UIImage
init(image: UIImage,
tintColor: UIColor? = nil,
renderingMode: UIImage.RenderingMode? = nil)

Пример использования​

let images = ChatImages()
images.avatarPlaceholderImage = ChatImage(system: "person.circle.fill", tintColor: .white)
images.sendButtonImage = ChatImage(system: "paperplane.fill")
images.attachButtonImage = ChatImage(system: "plus.circle")

let theme = ChatTheme(images: images)
chatCenterSDK.theme = theme

Builder-паттерн​

Для группировки нескольких переопределений в одно выражение используйте ChatImage.build(configure:) — аналогично ChatColors.build и ChatTypography.build. Метод объявлен на ChatImage, но возвращает ChatImages.

static func build(configure: (ChatImages) -> Void) -> ChatImages​

ПолеТипОбязательныйОписание
configure(ChatImages) -> VoidДаЗамыкание, в котором мутируете нужные свойства создаваемого ChatImages

Пример:

let images = ChatImage.build { images in
images.sendButtonImage = ChatImage(system: "paperplane.fill", tintColor: .white)
images.attachButtonImage = ChatImage(system: "plus.circle")
images.avatarPlaceholderImage = ChatImage(system: "person.circle.fill")
}

let theme = ChatTheme(images: images)
chatCenterSDK.theme = theme