Темы оформления
Применение тем
В классе ChatCenterUI до вызова метода init(...) задайте стили, изменив поля theme или darkTheme.
Данные параметры опциональны. В SDK уже заданы параметры по-умолчанию для светлой темы, если вы не определите свои.
В случае, если не определена темная тема, внутри SDK всегда будет использоваться светлая тема.
Пример:
chatCenterUI = ChatCenterUI(applicationContext).apply {
theme = chatLightTheme
darkTheme = chatDarkTheme
init(server.threadsGateProviderUid, server.appMarker, chatConfig)
}
Тема состоит из двух уровней. Первый уровень - это компоненты (ChatComponents),
второй флоу (ChatFlows). Компоненты представляют собой набор общих стилей для отдельных view.
К примеру, ниже представлен фрагмент кода для "кнопок-иконок" внутри SDK:
class IconButtonComponent(
internal val context: Context,
colors: ChatColors,
images: ChatImages
) {
/**
* Иконка для кнопки "назад"
*/
@DrawableRes
var backBtnImage = images.backBtn
//...
/**
* Цвет кнопки "назад"
*/
@ColorRes
var backButtonColor = colors.backButton
/**
* Цвет кнопки "назад"
*/
@ColorRes
var chatToolbarInverseIconTintColor = colors.chatToolbarInverseIconTint
//...
/**
* Цвет иконки очистки цитаты
*/
@ColorRes
var quoteClearIconColor = colors.quoteClearIcon
}
Поля данного класса будут применены ко всем подобным кнопкам в приложении. Вы можете переопределить в SDK какие-то
компоненты целиком, либо переопределить точечно конкрутную кнопку через ChatFlows.
Компонент чата можно переопределить как целиком, так и его часть:
val lightChatComponents = ChatComponents(
applicationContext,
colors = lightColors,
images = lightImages
).apply {
navigationBarStyle = navigationBarStyle.copy(closeButtonEnabled = false)
}
Цвета и картинки, указанные выше при создании компонентов - опциональны. Можно задать свои, переопределив только те, которые считаете нужным:
val lightColors = ChatColors(
main = R.color.light_main,
searchingProgressLoader = R.color.light_main,
bodyIconsTint = R.color.light_main,
incomingText = R.color.black_color,
incomingTimeText = R.color.light_time_text,
outgoingTimeText = R.color.light_time_text,
outgoingText = R.color.black_color,
incomingBubble = R.color.alt_white,
outgoingBubble = R.color.light_outgoing_bubble,
toolbarText = R.color.white_color,
messageSendingStatus = R.color.light_icons,
messageSentStatus = R.color.light_icons,
messageDeliveredStatus = R.color.light_icons,
messageReadStatus = R.color.light_icons,
messageFailedStatus = R.color.light_icons,
incomingLink = R.color.light_links,
outgoingLink = R.color.light_links,
toolbar = R.color.light_main,
statusBar = R.color.light_statusbar,
menuItem = R.color.light_main
)
При переопределении компонента выше для светлой темы мы меняем кнопку назад для всех экранов: чат, просмотр изображений и т.д.
Однако если вы переопределите эту кнопку внутри ChatFlows, это будет иметь более высокий приоритет перед компонентом.
В дальнейшем вы создаете тему:
chatLightTheme = ChatTheme(lightChatComponents)
и при инициализации SDK устанавливаете ее:
chatCenterUI = ChatCenterUI(applicationContext, loggerConfig).apply {
theme = chatLightTheme
darkTheme = chatDarkTheme
init(server.threadsGateProviderUid ?: "", server.appMarker ?: "", chatConf)
}
Внутри ChatFlows представлены все элементы, которые отображены в SDK. Если вам, к примеру, нужно точечно переопределить
только кнопку "назад", вы можете сделать это следующий образом:
val flows = ChatFlows(ChatComponents(applicationContext)).apply {
// меняем кнопку "назад"
chatFlow.navigationBar.backButton = IconButtonChatStyle(
IconButtonColorStyle(
iconTintColor = R.color.blue_color
),
R.drawable.ic_cloud
)
// центрируем текст в тулбаре
chatFlow.navigationBar.centerToolbarText = true
}
chatLightTheme = ChatTheme(flows) // создайте инстанс темы, переопределив точечно нужные элементы
То есть при создании тем вы можете определять как компоненты, которые на более низком уровне будут задавать
стили для view, так и переопределить конкретные view с помощью ChatFlows.
Или, к примеру, если вам нужно переопределить подсказку при поиске в поле ввода:
val flows = ChatFlows(ChatComponents(applicationContext)).apply {
// ... Иные настройки flows, если необходимо
searchFlow.searchBar.textInput?.placeholderText = "Поиск в сообщениях"
}
Пример переопределения внутри компонента цвета текста для всех полей ввода:
ChatTheme(
lightChatComponents.apply {
inputTextComponent.inputMessageColor = R.color.alt_blue
}
)
Подробнее можно посмотреть в нашем демо и в специальном разделе, описывающем все методы публичного апи.
Ресурсы
Описание используемых ресурсов можно почитать в данном разделе
Инфографика
Данный раздел в изображениях описывает элементы чата и их кастомизацию через флоу и компоненты тем.
Основные элементы чата
1.1. Заголовок в тулбаре – chatFlow
→ navigationBar
→ toolbarHeaderText
Компонент: NavigationBarStyle
1.2. Подзаголовок в тулбаре – chatFlow
→ navigationBar
→ toolbarSubtitleText
Компонент: NavigationBarStyle
1.3. Заголовок с форматированием (Spannable) – chatFlow → navigationBar → toolbarSpannableHeaderText Компонент: NavigationBarStyle
1.4. Иконка поиска – searchFlow → searchBar → searchIcon Компонент: SearchChatComponent
1.5. Фоновый цвет панели навигации – chatFlow → navigationBar Параметр: backgroundColor Компонент: NavigationBarStyle
1.6. Цвет статус бара – chatFlow
→ navigationBar
Параметр: statusBarColor
Компонент: NavigationBarStyle
1.7. Отображение тени под тулбаром – chatFlow
→ navigationBar
Параметр: visibleShadow
Компонент: NavigationBarStyle
1.8. Центрирование текста в тулбаре – chatFlow
→ navigationBar
Параметр: centerToolbarText
Компонент: NavigationBarStyle
1.9. Активность кнопки "Назад" – chatFlow
→ navigationBar
Параметр: closeButtonEnabled
Компонент: NavigationBarStyle
1.10. Видимость подзаголовка в тулбаре – chatFlow
→ navigationBar
Параметр: chatSubtitleEnabled
Компонент: NavigationBarStyle
1.11. Стиль кнопки "Назад" – chatFlow
→ navigationBar
→ backButton
Компонент: NavigationBarStyle
1.12. Стиль кнопки поиска – chatFlow
→ navigationBar
→ searchButton
Компонент: NavigationBarStyle
2.1. Изображение в сообщении – chatFlow → image Компонент: ImageComponent
2.2. Баббл чата (общий стиль) – chatFlow
→ chatBubble
Компонент: BubbleComponent
2.3. Иконки статусов сообщений – chatFlow
→ statusIcons
Компонент: MessageStatusesComponent
3. Текст для временной метки в сообщении с изображением – chatFlow
→ imagesTimeText
Компонент: TextComponent
4. Описание стиля системных сообщений – systemMessages
→ systemMessageText
Компоненты: TextComponent, ImageComponent
5. Стиль исходящих сообщений – outcomeMessages
6. Аватар оператора в чате – imageFlow
Компонент: ImageComponent
7. Стиль входящих сообщений – incomeMessages
Задействованы все компоненты
8. Кнопка прикрепления вложения – chatFlow
→ inputView
→ attachButton
Компонент: iconButtonComponent
9. Поле ввода сообщения – chatFlow
→ inputView
Компоненты: iconButtonComponent, inputTextComponent
10.1. Запись сообщения – chatFlow
→ inputView
→ voiceButton
Компонент: iconButtonComponent
10.2. Отправка сообщения – chatFlow
→ inputView
→ sendButton
Компонент: iconButtonComponent
Поведение при выделении сообщения
1. Стиль кнопки "Копировать" – chatFlow
→ navigationBar
→ copyButton
Компонент: NavigationBarStyle
2. Стиль кнопки "Ответить с цитированием" – chatFlow
→ navigationBar
→ replyButton
Компонент: NavigationBarStyle
3. Инвертированная кнопка "Назад" – chatFlow
→ navigationBar
→ invertedBackButton
Компонент: NavigationBarStyle
4. Цвет фона под выделенным сообщением – chatFlow → highlightingColor
Поле поиска сообщений
1. Стиль кнопки поиска – chatFlow
→ navigationBar
→ searchButton
Компонент: SearchChatComponent
2. Цвет лоадера при поиске – searchFlow
→ searchLoaderColor
Компонент: SearchChatComponent
3. Стиль поля ввода – searchFlow
→ textInput
Компонент: SearchChatComponent
Список найденный сообщений
1. Стиль кнопки очистки поля ввода – searchFlow
→ clearSearch
Компонент: SearchChatComponent
2.1. Цвет текста с автором сообщения – searchFlow
→ searchResultsStyle
→ searchResultsItemNameTextColor
Компонент: SearchChatComponent
2.2. Цвет текста с сообщением – searchFlow
→ searchResultsStyle
→ searchResultsItemMessageTextColor
Компонент: SearchChatComponent
2.3. Цвет текста даты – searchFlow
→ searchResultsStyle
→ searchResultsItemDateTextColor
Компонент: SearchChatComponent
2.4. Цвет разделителя между результатами – searchFlow
→ searchResultsStyle
→ searchResultsDividerColor
Компонент: SearchChatComponent
2.5. Иконка "стрелка вправо" – searchFlow
→ searchResultsStyle
→ searchResultsItemRightArrowDrawable
Компонент: SearchChatComponent
2.6. Цвет иконки "стрелка вправо" – searchFlow
→ searchResultsStyle
→ searchResultsItemRightArrowTintColor
Компонент: SearchChatComponent
2.7. Изображение при отсутствии результатов – searchFlow
→ searchResultsStyle
→ searchResultsNoItemsImageDrawable
Компонент: SearchChatComponent
2.8. Текст при отсутствии результатов – searchFlow
→ searchResultsStyle
→ searchResultsNoItemsText
Компонент: SearchChatComponent
2.9. Цвет текста при отсутствии результатов – searchFlow
→ searchResultsStyle
→ searchResultsNoItemsTextColor
Компонент: SearchChatComponent
2.10. Цвет фона в результатах поиска – searchFlow
→ searchResultsStyle
→ backgroundColor
Компонент: SearchChatComponent
Всплывающее сообщение
Стиль для всплывающих сообщений – balloonsChatStyle
Стилизуется только в случае, если система может выбрать Snackbar, привязавшись ко вью
Компактный пуш
Стиль компактного push-уведомления – smallPushes
Компонент: PushesComponent
Развернутый пуш
Стиль расширенного push-уведомления – bigPushes
Компонент: PushesComponent
Быстрый ответ на пуш-уведомление
1. Стиль для тулбара – chatFlow
→ navigationBarStyle
Компонент: NavigationBarStyle
2. Фоновый цвет – chatFlow
→ backgroundColor
Компонент: ImageComponent
3. Цвет фона за полем ввода – chatFlow
→ answerLayoutBackgroundColor
Компонент: InputTextComponent
4. Иконка для ответа на сообщение с цитированием – chatFlow
→ replyIcon
Компонент: IconButtonComponent
5. Цвет иконок – chatFlow
→ iconColor
Компонент: ImageComponent
6. Стиль кнопки отправки сообщения – chatFlow
→ sendButton
Компонент: IconButtonComponent
7. Стиль текста с именем оператора – chatFlow
→ consultNameText
Компонент: TextComponent
8. Стиль текста с вопросом – chatFlow
→ questionText
Компонент: TextComponent
9. Стиль поля ввода для быстрых ответов – chatFlow
→ fastTextInput
Компонент: InputTextComponent
Запрос на завершение диалога
1. Текст – chatFlow
→ systemMessages
→ approveRequest
Компонент: TextComponent
2. Кнопка с положительным ответом – chatFlow
→ systemMessages
→ denyRequest
Компонент: TextComponent
3. Кнопка с отрицательным ответом – chatFlow
→ systemMessages
→ requestToResolve
Компонент: TextComponent
Отзыв о работе оператора (звезды)
1. Текст при просьбе проставить оценку – chatFlow
→ systemMessages
→ ratingStyle
→ askForRateText
Компонент: TextComponent
2. Текст благодарности за проставленную оценку – chatFlow → systemMessages → ratingStyle → thanksForRateText Компонент: TextComponent
3. Вид пустой звезды – chatFlow
→ surveyStyle
→ optionsSurveyUnselected
Компонент: ImageComponent
4. Вид заполненной звезды – chatFlow
→ surveyStyle
→ optionsSurveySelected
Компонент: ImageComponent
Опрос при завершении диалога (пальцы)
Стиль для рейтинга – chatFlow
→ systemMessages
→ ratingStyle
Компонент: RatingComponent
Опрос с кнопками
1. Стиль для кнопки опроса – chatFlow
→ buttonSurveyButton
Компонент: IconButtonChatStyle
2. Стиль текста для вопроса в опросах – chatFlow
→ buttonSurveyQuestion
Компонент: TextComponent
Быстрые ответы в чате
Стиль текста для кнопки быстрых ответов – chatFlow
→ chip
Компонент: TextComponent
Предпросмотр отправляемого файла
1. Стиль текста с заголовком цитаты – QuoteViewStyle
→ quoteHeaderChatViewText
Компонент: TextComponent
2. Стиль текста с сообщением цитаты – QuoteViewStyle
→ quoteMessageChatViewText
Компонент: TextComponent
3. Стиль кнопки "очистить" в цитате – QuoteViewStyle
→ quoteClearIconButton
Компонент: IconButtonChatStyle
Предпросмотр голосового файла
1. Стиль кнопки воспроизведения/паузы – chatFlow
→ quotePlayPauseButton
Компонент: IconButtonChatStyle
2. Стиль текста с продолжительностью голосового сообщения – chatFlow
→ quoteViewStyle
→ quoteDurationChatViewText
Компонент: TextComponent
Сообщения с файлом
1. Фоновый цвет элемента с файлом – FileMessageStyle
→ backgroundColor
Компонент: ImageComponent
2. Внутренние отступы для элемента - padding
Компонент: ImageComponent
3. Стиль для лоадера - loader
Компонент: LoaderChatStyle
4. Стиль для имени файла - fileName
Компонент: TextComponent
5. Стиль для характеристик файла - fileSpecs
Компонент: TextComponent
Сообщение с ошибкой при отправке
1. Текст ошибки загрузки файла - chatFlow → outcomeMessages /incomeMessages → fileMessageStyle → error
2. Стиль сообщений с ошибками – chatFlow
→ errorMessages
→ chatBubble
Компонент: BubbleComponent
Заглушка для изображения
Ресурс заглушки для недоступного изображения – imageFlow
→ imagePlaceholderResId
Компонент: ImageComponent
Прогресс-бар при старте чата
Прогресс-бар при старте чата – chatFlow
→ loader
Компонент: LoadingIndicatorComponent
Экран с ошибкой
1. Кнопка повторной инициализации чата – chatFlow
→ retryChatInitButton
Компонент: TextButtonComponent
2. Сообщение на экране ошибки чата – chatFlow
→ errorScreenMessage
Компонент: TextComponent
3. Изображение на экране ошибки чата – chatFlow
→ errorScreenImage
Компонент: ImageComponent
Экран-приветствие
1. Стиль заголовка приветствия – chatFlow
→ welcomeScreenStyle
→ welcomeScreenTitle
Компонент: TextComponent
2. Стиль подзаголовка приветствия – chatFlow
→ welcomeScreenStyle
→ welcomeScreenSubtitle
Компонент: TextComponent
3. Стиль изображения приветствия – chatFlow
→ welcomeScreenStyle
→ welcomeScreenImage
Компонент: ImagesChatStyle
4. Фоновый цвет экрана приветствия – chatFlow
→ welcomeScreenStyle
→ backgroundColor
Компонент: ChatMainComponent
Кнопка скролла вниз по сообщениям
1. Стиль кнопки скролла – chatFlow
→ outcomeMessages / incomeMessages
→ scrollDownButton
Компонент: ImageComponent
2. Цвет стикера непрочитанных сообщений – chatFlow
→ outcomeMessages / incomeMessages
→ unreadMsgStickerColor
Компонент: ChatMainComponent
3. Текст на стикере непрочитанных сообщений – chatFlow
→ outcomeMessages / incomeMessages
→ unreadMessagesCount
Компонент: TextComponent
Кнопка скролла вверх по сообщениям
1. Стиль кнопки скролла – chatFlow
→ outcomeMessages / incomeMessages
→ scrollUpButton
Компонент: ImageComponent
2. Цвет стикера непрочитанных сообщений – chatFlow
→ outcomeMessages / incomeMessages
→ unreadMsgStickerUpColor
Компонент: ChatMainComponent
3. Текст на стикере непрочитанных сообщений – chatFlow
→ outcomeMessages / incomeMessages
→ unreadMessagesCountUp
Компонент: TextComponent