Изображения
Класс ChatImages предоставляет набор предопределённых изображений и иконок, используемых в интерфейсе чата. Поддерживает как SF Symbols, так и кастомные изображения из бандла приложения.
к сведению
Для упрощения настройки и уменьшения размера SDK в качестве иконок по умолчанию используются SF Symbols
Быстрая замена иконки
// SF Symbol
images.sendButtonImage = ChatImage(system: "paperplane.fill", tintColor: .white)
// Кастомное изображение из бандла приложения
images.attachButtonImage = ChatImage(named: "my_icon", bundle: .main, tintColor: .systemBlue)
// Готовый UIImage
images.avatarPlaceholderImage = ChatImage(image: UIImage(named: "avatar")!, tintColor: .gray)
Полный список SF Symbols доступен в приложении SF Symbols от Apple.
Описание
ChatImages — это базовый класс, предоставляющий унифицированный доступ к различным иконкам и изображениям приложения. Все изображения реализованы через класс ChatImage, который поддерживает:
- SF Symbols с возможностью указания размера и цвета
- Кастомные изображения из ресурсов SDK
- Унифицированное управление цветом заливки (
tintColor)
Этот подход обеспечивает консистентность UI и упрощает темизацию.
Доступные изображения
Поиск
| Переменная | Тип | Назначение |
|---|---|---|
searchButtonImage | SF Symbol | Иконка поиска |
searchNotFoundPlaceholderImage | SF Symbol | Изображение для "ничего не найдено" |
Навигация
| Переменная | Тип | Назначение |
|---|---|---|
backButtonImage | SF Symbol | Иконка кнопки "Назад" |
nextButtonImage | SF Symbol | Иконка кнопки "Вперёд" |
keyboardShowImage | SF Symbol | Показ клавиатуры |
keyboardHideImage | SF Symbol | Скрытие клавиатуры |
Отправка сообщений
| Переменная | Тип | Назначение |
|---|---|---|
sendButtonImage | SF Symbol | Отправить сообщение |
attachButtonImage | SF Symbol | Прикрепить файл |
Плейсхолдеры
| Переменная | Тип | Назначение |
|---|---|---|
emptyChatPlaceholderImage | SF Symbol | Чат пустой |
errorPlaceholderImage | SF Symbol | Ошибка загрузки чата |
Реакции
| Переменная | Тип | Назначение |
|---|---|---|
likeEmptyImage | SF Symbol | Неактивный лайк |
likeFullImage | SF Symbol | Активный лайк |
dislikeEmptyImage | SF Symbol | Неактивный дизлайк |
dislikeFullImage | SF Symbol | Активный дизлайк |
Рейтинг
| Переменная | Тип | Назначение |
|---|---|---|
starRatingEmptyImage | SF Symbol | Неактивная звезда |
starRatingFullImage | SF Symbol | Активная звезда |
Файлы и медиа
| Переменная | Тип | Назначение |
|---|---|---|
fileImage | SF Symbol | Файл |
chatBubble | Кастомное | Маска сообщения |
Прокрутка
| Переменная | Тип | Назначение |
|---|---|---|
scrollToTopImage | SF Symbol | Прокрутка наверх |
scrollToBottomImage | SF Symbol | Прокрутка вниз |
Аватары
| Переменная | Тип | Назначение |
|---|---|---|
avatarPlaceholderImage | SF Symbol | Плейсхолдер аватара |
Меню и действия
| Переменная | Тип | Назначение |
|---|---|---|
closeButtonImage | SF Symbol | Закрыть |
menuCopyImage | SF Symbol | Скопировать |
menuQuoteImage | SF Symbol | Цитировать |
Голосовые сообщения
| Переменная | Тип | Назначение |
|---|---|---|
voiceButtonImage | SF Symbol | Запись голосового |
voiceSendButtonImage | SF Symbol | Отправка голосового |
voicePlayImage | SF Symbol | Воспроизведение |
voicePauseImage | SF Symbol | Пауза |
Статусы сообщений
| Переменная | Тип | Назначение |
|---|---|---|
sentStatusImage | Кастомное | Сообщение отправлено |
pendingStatusImage | SF Symbol | Сообщение в процессе |
readStatusImage | Кастомное | Сообщение прочитано |
Ошибки и уведомления
| Переменная | Тип | Назначение |
|---|---|---|
errorInfoImage | SF Symbol | Иконка информации об ошибке |
errorAlertImage | SF Symbol | Иконка предупреждения об ошибке |
errorShieldImage | SF Symbol | Иконка ошибки типа файла |
scheduleImage | SF Symbol | Иконка расписания/нерабочего времени |
editImage | SF 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 | Получено / Доставлено | deliveredStatusImage (в ChatMessageStyle, не в ChatImages; по умолчанию = sentStatusImage) |
icon/state-error | Ошибка отправки | errorInfoImage |
icon/state-download | Повтор при сбое загрузки | нет публичного токена в SDK |
icon/state-sending | В процессе отправки | pendingStatusImage |
icon/state-edit | Редактирование | editImage |
icon/play | Воспроизведение аудио | voicePlayImage |
icon/photos | Фотогалерея | Через chatMenuStyle |
icon/camera | Камера | Через chatMenuStyle |
icon-spinner | Спиннер загрузки | Через LoadingIndicatorStyle |
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 — стиль панели меню |
icon/search | Поиск | searchButtonImage |
icon/delete | Удаление | Через контекстное меню |
icon/copy | Копировать | menuCopyImage |
icon/record | Запись голоса | voiceButtonImage |
icon/attach | Прикрепить файл | attachButtonImage |
Класс ChatImage
Класс ChatImage представляет собой унифицированную обёртку над UIImage, поддерживающую:
- SF Symbols
- Кастомные изображения
- Настройку цвета (
tintColor) - Управление размером
Конструкторы
/// 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)
Пример использования
Актуальный пример можно найти в демо-приложении в MainViewController+Custom.swift.
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