SDK：主题色配置业务包

Posted 2023-01-19 IoT砖家涂拉拉

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

准备工作

创建工程

在 android Studio 中建立工程，接入智能生活 App SDK 并完成业务包框架接入。

主题色配置

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

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

接入组件

// in rootProject build.gradle
buildscript
    dependencies
        // 声明插件版本
        classpath "com.tuya.smart:tuyasmart-theme-open-plugin:1.1.0"
    


// in application / library build.gradle
dependencies 
    // 依赖运行时库
    implementation "com.tuya.smart:tuyasmart-theme-open:1.1.0"

初始化

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

也可以通过涂鸦 IoT 平台的 主题配置 进行对应的设置效果。

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

功能调用

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

interface ITYThemeManager 
    /**
     * 主题色，通常作为按钮的背景色
     * @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

而当你需要调用静态资源时，可以直接调用应用 Module 在 tysrc/ui-open-theme-values 路径内生成的资源文件内的色值。

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <!--
Automatically generated files, please do not modify it manually!!!
-->
    <color name="ty_theme_open_color_theme">#ffff5a28</color>
    <color name="ty_theme_open_color_warning">#ffff4444</color>
    <color name="ty_theme_open_color_tips">#ff00cc99</color>
    <color name="ty_theme_open_color_guide">#ff1989fa</color>
    <color name="ty_theme_open_color_tab_bar_selected">#ffff5a28</color>
    <color name="ty_theme_open_color_background">#fff8f8f8</color>
    <color name="ty_theme_open_color_navigator_bg">#ffffffff</color>
    <color name="ty_theme_open_color_bottom_tab_bar">#ffffffff</color>
    <color name="ty_theme_open_color_card_bg">#ffffffff</color>
    <color name="ty_theme_open_color_alert_bg">#ffffffff</color>
    <color name="ty_theme_open_color_alert_mask">#ffff5a28</color>
    <color name="ty_theme_open_color_list_cell_bg">#ffff5a28</color>
    <color name="ty_theme_open_color_head_line_text">#e6000000</color>
    <color name="ty_theme_open_color_sub_head_text">#b3000000</color>
    <color name="ty_theme_open_color_auxi_libiary_text">#80000000</color>
    <color name="ty_theme_open_color_disable_text">#4c000000</color>
    <color name="ty_theme_open_color_theme_text">#ffffffff</color>
    <color name="ty_theme_open_color_warning_text">#ffffffff</color>
    <color name="ty_theme_open_color_tips_text">#ffffffff</color>
    <color name="ty_theme_open_color_guide_text">#ffffffff</color>
</resources>