Настройка пользовательских стилей ChatKit

Навигация 1. Описание поддерживаемых областей для настройки

2. Настройка пользовательских UI-ресурсов - Положение по умолчанию для UI-ресурсов - Правила названия пользовательских Bundle
3. Настройка свойств UI 1. TableView 2. TableViewCellcom/leancloud/ChatKit-OC/blob/master/ChatKit%20Сообщество%20столбцов%20стилей.md#tableviewcell) 3. Несмотря на непрочитанные сообщения 4. Фон для чата 5. Поле ввода 6. Сообщения чата 7. Пузыри сообщений
4. Управление статусной строкой, навигационной строкой, Tabbar и т. д.

Пакеты пользовательских ресурсов UI

Путь к пакетам по умолчанию

Вы можете найти пакеты ресурсов по следующему пути, и внести изменения в изображения и конфигурационные файлы, которые напрямую повлияют на пользовательский интерфейс:

├── ChatKit  # Корневая директория основной библиотеки
│   └── Class
│       ├── Model
│       ├── Module
│       ├── Resources  # Пакеты ресурсов UI
│       ├── Tool
└── ChatKit-OC  # Демонстрационный проект

Примечание: Однако мы настоятельно рекомендуем не изменять этот пакет напрямую, так как это затруднит обновление ChatKit при необходимости. Рекомендуется использовать метод создания пользовательского пакета тематики.

Примечание: **Для удобства обновления ChatKit настоятельно рекомендуется использовать пользовательские пакеты ресурсов. При создании пользовательских ресурсных файлов достаточно скопировать соответствующий пакет, соблюдая правила названия, без необходимости настройки в коде. ChatKit разделяет ресурсы на несколько пакетов, поэтому при создании пользовательского пакета достаточно включить только те пакеты, которые требуются. Например, если вам нужно только настроить пузырьки сообщений, вам потребуется выполнить следующие шаги:**1. Скопируйте пакет MessageBubble.bundle из ChatKit на ваш компьютер, например, на рабочий стол. 2. Измените соответствующие ресурсы в этом пакете на рабочем столе. 3. Переименуйте измененный пакет в CustomizedChatKit.MessageBubble.bundle (важно: убедитесь, что название файла и количество файлов остаются неизменными). 4. Переместите CustomizedChatKit.MessageBubble.bundle в ваш проект (важно: переместите его в свой проект, а не в ChatKit).

Правила названия пользовательских пакетов

ChatKit предоставляет пакеты ресурсов по умолчанию. Если вы хотите создать пользовательский пакет, вам необходимо добавить префикс CustomizedChatKit. перед соответствующим ресурсным пакетом, а затем переместить его в свой проект. Вот подробное соответствие:

CustomizedChatKit.MessageBubble.bundle
CustomizedChatKit.Other.bundle

Настройка свойств UIВы можете найти файл ChatKit-Theme.plist в пакете ресурсов и изменить определенные параметры для настройки соответствующего пользовательского интерфейса.

TableView

Влияет на большинство TableView, кроме страницы чата, например, список последних диалогов:

TableViewCell

Непрочитанные сообщения

Фон чатаЕсли вы хотите изменить стандартное изображение, вам нужно заменить файл conversationViewController_default_backgroundImage.png в пакете Other.bundle. Если вы хотите изменить фон для определенного диалога, вам нужно использовать следующие методы: -[LCChatKit setCurrentConversationBackgroundImage:scaledToSize:] или -[LCChatKit setBackgroundImage:forConversationId:scaledToSize:].Стандартное изображение фона | Изменение файла пакета для изменения фона для всех диалогов | Изменение фона для определенного диалога с помощью кода

-------------|-------------|------------- | |

Поля ввода

Key	Изменяемая область
MessageInputView-BackgroundColor	Цвет фона области ввода сообщения
MessageInputView-MorePanel-TextColor	Цвет текста в панели "Больше" области ввода сообщения
MessageInputView-MorePanel-BackgroundColor	Цвет фона панели "Больше" области ввода сообщения
MessageInputView-TextField-TextColor	Цвет текста в поле ввода сообщения
MessageInputView-TextField-BackgroundColor	Цвет фона поля ввода сообщения
MessageInputView-Record-TextColor	Цвет текста кнопки записи сообщения
MessageInputView-Tint-Color	Цвет темы области ввода сообщения, если этот параметр отсутствует, используется глобальный цвет темы

Чат-сообщения

Key	Изменяемая область
ConversationView-Message-Left-TextColor	Цвет текста левого сообщения
ConversationView-Message-Right-TextColor	Цвет текста правого сообщения
ConversationView-Message-LinkColor	Цвет текста ссылки в сообщении
ConversationView-Message-LinkColor-Left	Цвет текста ссылки в левом сообщении; если этот параметр отсутствует, используется общий цвет текста ссылки
ConversationView-Message-LinkColor-Right	Цвет текста ссылки в правом сообщении; если этот параметр отсутствует, используется общий цвет текста ссылки
ConversationView-SenderName-TextColor	Цвет текста имени отправителя
ConversationView-TimeLine-TextColor	Цвет текста временной линии
ConversationView-TimeLine-BackgroundColor	Цвет фона временной линии### Пузырьки сообщений

Файлы ресурсов

ChatKit предоставляет настройку внешнего вида пузырьков сообщений. Вы можете найти файл MessageBubble-Customize.plist в пакете ресурсов MessageBubble.bundle:

Настройки стиля пузырьков сообщений:

В этих файлах есть несколько ключевых полей:

cap_insets: Устанавливает область растяжения фона пузырька:

Параметры растяжения 9-квадратного изображения top, left, bottom, right имеют следующее значение:

Чтобы достичь следующего эффекта растяжения:

edge_insets: Расстояние между фоновой областью пузырька (красный) и областью содержимого (белый):

Управление статусной строкой, навигационной строкой, Tabbar и т.д.ChatKit предоставляет различные контроллеры, которые следуют протоколу LCCKViewControllerEventProtocol. Вы можете использовать блоки -setViewDidLoadBlock:, -setViewWillAppearBlock:, -setViewDidAppearBlock:, -setViewWillDisappearBlock: и -setViewDidDisappearBlock: для вызова соответствующих системных API, чтобы управлять статусной строкой, навигационной строкой, Tabbar и т.д.Примеры:

    [conversationViewController setViewWillAppearBlock:^(LCCKBaseViewController *viewController, BOOL aAnimated) {
        [viewController.navigationController setNavigationBarHidden:NO animated:aAnimated];
    }];

    [conversationViewController setViewWillAppearBlock:^(LCCKBaseViewController *viewController, BOOL aAnimated) {
        [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent animated:aAnimated];
    }];

Навигационная строка заголовка страницы списка сообщений

В LCCKConversationListViewController в блоке setViewDidLoadBlock: можно изменить заголовок навигационной строки.

    LCCKConversationListViewController *firstViewController = [[LCCKConversationListViewController alloc] init];
    [firstViewController setViewDidLoadBlock:^(LCCKBaseViewController *viewController) {
        viewController.navigationItem.title = @"Сообщения";
    }];

Пользовательская настройка заголовка чата

Необходимо отключить автоматическую настройку заголовка.

По умолчанию настроено следующее:

• В правом углу отображается состояние тишины
• В одиночном чате по умолчанию отображается имя собеседника, в групповом чате отображается значение поля name в conversation

    LCCKConversationViewController *conversationViewController = [[LCCKConversationViewController alloc] initWithConversationId:conversationId];
    conversationViewController.disableTitleAutoConfig = YES;
    [conversationViewController setViewDidLoadBlock:^(LCCKBaseViewController *viewController) {
        viewController.navigationItem.title = @"Сообщение";
    }];

Определение закругленного края аватара

Можно настроить закругленный край аватара следующим образом, поддерживается круглый аватар:```Objective-C [[LCChatKit sharedInstance] setAvatarImageViewCornerRadiusBlock:^CGFloat(CGSize avatarImageViewSize) { if (avatarImageViewSize.height > 0) { return avatarImageViewSize.height / 2; } return 5; }];

Уведомления


```Objective-C
    [[LCChatKit sharedInstance] setShowNotificationBlock:^(UIViewController *viewController, NSString *title, NSString *subtitle, LCCKMessageNotificationType type) {
        [self exampleShowNotificationWithTitle:title subtitle:subtitle type:type];
    }];
    

HUD

    [[LCChatKit sharedInstance] setHUDActionBlock:^(UIViewController *viewController, UIView *view, NSString *title, LCCKMessageHUDActionType type) {
        switch (type) {
            case LCCKMessageHUDActionTypeShow:
                [[self class] lcck_showMessage:title toView:view];
                break;
                
            case LCCKMessageHUDActionTypeHide:
                [[self class] lcck_hideHUDForView:view];
                break;
                
            case LCCKMessageHUDActionTypeError:
                [[self class] lcck_showError:title toView:view];
                break;
                
            case LCCKMessageHUDActionTypeSuccess:
                [[self class] lcck_showSuccess:title toView:view];
                break;
        }
    }];