更新时间:2024-06-25 10:08:52下载pdf
涂鸦主题色配置业务包用于配置涂鸦 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
中配置以下信息,可以完成自动生成对应静态主题色值的资源。
您也可以通过涂鸦开发者平台的 主题配置 进行对应的设置效果。详情请参考 创建智能家居 OEM App 的 界面配置 章节来参考您对应的界面展示。
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>
该内容对您有帮助吗?
是意见反馈该内容对您有帮助吗?
是意见反馈