Share via

Тема библиотеки пользовательского интерфейса в приложении

  • Статья

Библиотека пользовательского интерфейса Службы коммуникации Azure — это набор компонентов, значков и составных элементов, упрощающих создание высококачественных пользовательских интерфейсов для проектов. Библиотека пользовательского интерфейса использует компоненты и значки из пользовательского интерфейса Fluent, кроссплатформенная система проектирования, которая используется корпорацией Майкрософт. В результате компоненты создаются с учетом удобства использования, специальных возможностей и локализации.

Из этой статьи вы узнаете, как изменить тему для компонентов библиотеки пользовательского интерфейса при настройке приложения.

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

Необходимые компоненты

Настройка тем

Подробную документацию и краткие руководства по библиотеке веб-интерфейса см. в статье " История библиотеки веб-интерфейса".

Дополнительные сведения см. в статье "Создание тем " в библиотеке веб-пользовательского интерфейса.

Дополнительные сведения см. в библиотеке пользовательского интерфейса Android с открытым исходным кодом и образце кода приложения.

Определение темы

Они обрабатываются с помощью XML-файлов ресурсов. Мы предоставляем следующие идентификаторы ресурсов для общедоступного область:

<resources>
    <public name="AzureCommunicationUICalling.Theme" type="style" />
    <public name="azure_communication_ui_calling_primary_color" type="attr" />
    <public name="azure_communication_ui_calling_primary_color_tint10" type="attr" />
    <public name="azure_communication_ui_calling_primary_color_tint20" type="attr" />
    <public name="azure_communication_ui_calling_primary_color_tint30" type="attr" />
</resources>

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

<style name="MyCompany.CallComposite" parent="AzureCommunicationUICalling.Theme">
    <item name="azure_communication_ui_calling_primary_color">#7800D4</item>
    <item name="azure_communication_ui_calling_primary_color_tint10">#882BD8</item>
    <item name="azure_communication_ui_calling_primary_color_tint20">#E0C7F4</item>
    <item name="azure_communication_ui_calling_primary_color_tint30">#ECDEF9</item>
</style>

Предыдущий пример влияет на следующие элементы пользовательского интерфейса:

  • PrimaryColor:
    • Аватар или видео — граница — указание речи
    • Кнопка "Присоединиться к вызову" — фон
  • Основной цветColorTint10:
    • Кнопка "Присоединиться к вызову" — выделенный фон — режим освещения
    • Кнопка "Присоединиться к вызову" — граница — светло-темный режим
  • Основной цветColorTint20:
    • Кнопка "Присоединиться к вызову" — выделенный фон — темный режим
  • Основной цветColorTint30:
    • Кнопка "Присоединиться к вызову" — выделенная граница — светлый или темный режим

Применение темы

Стиль темы применяется для передачи идентификатора ThemeConfiguration/Theme ресурса темы в .CallCompositeBuilder

val callComposite: CallComposite =
        CallCompositeBuilder()
            .theme(R.style.MyCompany_CallComposite)
            .build()

Светлые и темные режимы

Система ресурсов Android обрабатывает ночную тему. Ночной режим в Android — это системная конфигурация. При включении ночного режима Android предоставляет предпочтения ресурсам в папках -night/ . Чтобы указать цвета ночного режима, добавьте второй theme.xml файл в values-night/.

Чтобы включить ночной режим программным способом, Android предоставляет следующую функцию. Однако эта конфигурация применяется глобально к приложению. Нет надежного способа установить ночной режим для одного действия. Чтобы применить темную тему, используйте следующий параметр в приложениях:

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

Дополнительные сведения см. в библиотеке пользовательского интерфейса iOS с открытым исходным кодом и образце кода приложения.

Определение темы

Вы можете настроить тему, изменив основной цвет и связанные с ним оттенки. Вы также можете переопределить светлые и темные режимы в цветовой схеме.

Затронутый пользовательский интерфейс

  • PrimaryColor:
    • Аватар или видео — граница — указание речи
    • Кнопка "Присоединиться к вызову" — фон
  • Основной цветColorTint10:
    • Кнопка "Присоединиться к вызову" — выделенный фон — режим освещения
    • Кнопка "Присоединиться к вызову" — граница — светло-темный режим
  • Основной цветColorTint20:
    • Кнопка "Присоединиться к вызову" — выделенный фон — темный режим
  • Основной цветColorTint30:
    • Кнопка "Присоединиться к вызову" — выделенная граница — светлый или темный режим

Внедрение

Вы можете создать настраиваемые ThemeOptions параметры темы, реализующие протокол. Необходимо включить экземпляр этого нового класса CallCompositeOptionsв .

class CustomThemeOptions: ThemeOptions {

 var primaryColor: UIColor {
  return UIColor(named: "primaryColor")
 }
 
 var primaryColorTint10: UIColor {
  return UIColor(named: "primaryColorTint10")
 }
 
 var primaryColorTint20: UIColor {
  return UIColor(named: "primaryColorTint20")
 }
 
 var primaryColorTint30: UIColor {
  return UIColor(named: "primaryColorTint30")
 }

 var colorSchemeOverride: UIUserInterfaceStyle {
  return UIUserInterfaceStyle.dark
 }
}

let callCompositeOptions = CallCompositeOptions(theme: CustomThemeOptions())

Определение цветового ресурса

Определите каждый цвет в ресурсах с оттенком для светлых и темных режимов. На следующем эталонном рисунке показано, как настроить ресурсы в проекте Xcode.

Screenshot of an example configuration of iOS color assets.

Следующие шаги