主题色配置业务包

主题色配置业务包用于配置涂鸦 SDK 中 UI 相关的各种颜色。通过插件生成相关的静态资源文件，以及通过 SDK 动态获取相应色值，使用这些颜色开发页面，从而使 UI 业务包提供的界面和您自己搭建的界面达到颜色效果的一致性。

准备工作

创建工程

在 Android Studio 中建立您的工程，接入 Cube App SDK 并完成业务包 框架接入。

主题色配置

本主题色配置是可选功能插件。当接入使用本插件及其组件时，在 接入整体业务包框架 时，则不需要配置相关的 res/values/colors.xml 主题资源配置以及 assets/thingTheme/ui_theme_config.json 主题色 assets 资源配置。

具体地，您需要删除这两个资源配置，保证接入主题色配置业务包插件后不存在资源冲突的问题。

接入组件

// in rootProject build.gradle
buildscript{
    dependencies{
        // 声明插件版本
        classpath "com.thingclips.smart:thingsmart-theme-open-plugin:2.0.1"
    }
}

// in application / library build.gradle
dependencies {
    // 依赖运行时库
    implementation "com.thingclips.smart:thingsmart-theme-open:2.0.2"
}

初始化

通过在工程的 build.gradle 中配置以下信息，可以自动生成对应静态主题色值的资源。

您也可以通过 涂鸦开发者平台 的 主题配置，设置对应的效果。详情请见 创建智能家居 OEM App 的 界面配置 章节，参考您对应的界面展示。

apply plugin: 'com.thingclips.open.theme'
thingOpenTheme{
    // 浅色模式配置，目前不支持深色模式的配置
    lightTheme {
        color{
            // 背景色
            backgroundColor "#F8F8F8"
            // 主题色
            themeColor "#FF5A28"
            // 警告色
            warningColor "#FF4444"
            // 提示色
            tipColor "#00CC99"
            // 引导色
            guideColor "#1989FA"
            // tab选中背景色
            tabBarSelectColor "#FF5A28"
            // 导航栏背景色配置
            navigationBarColor "#FFFFFF"
        }
        colorAlpha{
            // 弹窗蒙层透明度
            alertMaskAlpha 0.8
        }
    }
}

使用

通过 ThingOptimusSdk.getManager(IThingThemeManager.class)，可以获取到对应的功能。

interface IThingThemeManager {
    /**
     * 主题色，通常作为按钮的背景色
     * @return Int
     */
    @ColorInt
    fun getThemeColor() : Int

    /**
     * 警告颜色，通常作为警告性控件的背景色，一般用来强烈的警告用户，吸引用户的注意
     * @return Int
     */
    @ColorInt
    fun getWarningColor() : Int

    /**
     * 提示颜色，通常作为提示性控件的背景色，一般用来对用户的交互进行响应
     * @return Int
     */
    @ColorInt
    fun getTipsColor() : Int

    /**
     * 引导颜色，通常作为引导性控件的背景色，一般用来对用户进行引导
     * @return Int
     */
    @ColorInt
    fun getGuideColor() : Int

    /**
     * tab栏选中颜色
     * @return Int
     */
    @ColorInt
    fun getTabBarSelectedColor() : Int

    /**
     * 背景色，app界面的背景色
     * @return Int
     */
    @ColorInt
    fun getBackgroundColor() : Int

    /**
     * 导航栏背景色
     * @return Int
     */
    @ColorInt
    fun getNavigatorBgColor() : Int

    /**
     * 底部tab栏背景色
     * @return Int
     */
    @ColorInt
    fun getBottomTabBarBgColor() : Int

    /**
     * 卡片背景色
     * @return Int
     */
    @ColorInt
    fun getCardBgColor() : Int

    /**
     * 弹窗内容背景色
     * @return Int
     */
    @ColorInt
    fun getAlertBgColor() : Int

    /**
     * 弹窗蒙层色
     * @return Int
     */
    @ColorInt
    fun getAlertMaskColor() : Int

    /**
     * 列表单元格背景颜色
     * @return Int
     */
    @ColorInt
    fun getListCellBgColor() : Int

    /**
     * 大标题文字颜色
     * @return Int
     */
    @ColorInt
    fun getHeadLineColor() : Int

    /**
     * 小标题文字颜色
     * @return Int
     */
    @ColorInt
    fun getSubHeadColor() : Int

    /**
     * 辅助文字颜色
     * @return Int
     */
    @ColorInt
    fun getAuxiLibiaryColor() : Int

    /**
     * 失效文字颜色
     * @return Int
     */
    @ColorInt
    fun getDisableColor() : Int

    /**
     * 主题背景下文字的颜色
     * @return Int
     */
    @ColorInt
    fun getThemeTextColor() : Int

    /**
     * 警告颜色下文字的颜色，通常作为警告性控件上文本的颜色，一般用来强烈的警告用户，吸引用户的注意
     * @return Int
     */
    fun getWarningTextColor() : Int

    /**
     * 提示颜色下文字的颜色，通常作为提示性控件上文本的颜色，一般用来对用户的交互进行响应
     * @return Int
     */
    @ColorInt
    fun getTipsTextColor() : Int

    /**
     * 引导颜色下文字的颜色，通常作为引导性控件上文本的颜色，一般用来对用户进行引导
     * @return Int
     */
    @ColorInt
    fun getGuideTextColor() : Int

    /**
     * 导航栏内的文字颜色
     * @return Int
     */
    @ColorInt
    fun getNavigatorTextColor() : Int
}

而当您需要调用静态资源时，可以直接调用在 application module 下的 thingsrc/ui-open-theme-values 路径内生成的资源文件内的色值。

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <!--
Automatically generated files, please do not modify it manually!!!
-->
    <color name="thing_theme_open_color_theme">#ffff5a28</color>
    <color name="thing_theme_open_color_warning">#ffff4444</color>
    <color name="thing_theme_open_color_tips">#ff00cc99</color>
    <color name="thing_theme_open_color_guide">#ff1989fa</color>
    <color name="thing_theme_open_color_tab_bar_selected">#ffff5a28</color>
    <color name="thing_theme_open_color_background">#fff8f8f8</color>
    <color name="thing_theme_open_color_navigator_bg">#ffffffff</color>
    <color name="thing_theme_open_color_bottom_tab_bar">#ffffffff</color>
    <color name="thing_theme_open_color_card_bg">#ffffffff</color>
    <color name="thing_theme_open_color_alert_bg">#ffffffff</color>
    <color name="thing_theme_open_color_alert_mask">#ffff5a28</color>
    <color name="thing_theme_open_color_list_cell_bg">#ffff5a28</color>
    <color name="thing_theme_open_color_head_line_text">#e6000000</color>
    <color name="thing_theme_open_color_sub_head_text">#b3000000</color>
    <color name="thing_theme_open_color_auxi_libiary_text">#80000000</color>
    <color name="thing_theme_open_color_disable_text">#4c000000</color>
    <color name="thing_theme_open_color_theme_text">#ffffffff</color>
    <color name="thing_theme_open_color_warning_text">#ffffffff</color>
    <color name="thing_theme_open_color_tips_text">#ffffffff</color>
    <color name="thing_theme_open_color_guide_text">#ffffffff</color>
</resources>