主题色配置业务包

更新时间：2024-11-18 11:32:38下载pdf

涂鸦主题色配置业务包用于配置涂鸦 智能生活 App SDK 中 UI 相关的各种颜色，以及使用这些颜色开发自己的页面，从而使 UI 业务包提供的界面和您自己搭建的界面达到颜色效果的一致性。

接入组件

在工程的 Podfile 文件中添加主题色业务包组件，并执行 pod update 命令：

source 'https://github.com/tuya/tuya-pod-specs.git'
source 'https://cdn.cocoapods.org/'
platform :ios, '11.0'

target 'your_target_name' do
  # 添加主题色业务包
  pod 'TuyaSmartThemeManagerBizBundle'
end

使用指南

主题色配置支持配置智能生活 App SDK 中 UI 相关的各种颜色，以及提供对应的颜色给开发者搭建直接的界面。

支持自定义的有主题色、背景色、警告背景颜色、成功背景颜色、引导背景颜色、导航栏背景色、Tab 选中颜色以及弹窗蒙层的透明度。可以使用以下两种方式中的任何一种进行配置：

方式一：通过配置文件进行配置

确保项目根目录存在 ty_custom_config.json 文件，如果不存在，则需要添加，具体请参考框架接入。

添加颜色配置项：

{
	"config": {
		...
	},
        "colors":{
		"themeColor": "#FF5A28",
		"backgroundColor": "#F8F8F8",
		"warningColor": "#FF4444",
		"tipsColor": "#00CC99",
		"guideColor": "#1989FA",
		"navigationBarColor": "#FFFFFF",
		"tabBarSelectedColor": "#FF5A28", 
		"alertMaskAlpha": 0.4
	}
}

方式二：通过 API 进行配置

如果你选择通过 API 进行配置，那么确保在 application:didFinishLaunchingWithOptions: 返回 true之前，并且在创建 UI 之前完成以下调用。请不要在 App 运行过程中进行配置，也不要重复进行配置。

configNormalModuleWithThemeColor:backgroundColor:warningColor:tipsColor:guideColor:navigationBarColor:tabBarSelectedColor:alertMaskAlpha:

Objective-C 示例

#import <TuyaSmartBizCore/TuyaSmartBizCore.h>
#import <TYModuleServices/TYModuleServices.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    id<TYThemeManagerProtocol> impl = [[TuyaSmartBizCore sharedInstance] serviceOfProtocol:@protocol(TYThemeManagerProtocol)];
    [impl configNormalModuleWithThemeColor:[UIColor ty_colorWithHexString:@"FF5A28"]
                           backgroundColor:[UIColor ty_colorWithHexString:@"F8F8F8"]
                                 warningColor:[UIColor ty_colorWithHexString:@"FF4444"]
                                    tipsColor:[UIColor ty_colorWithHexString:@"00CC99"]
                                   guideColor:[UIColor ty_colorWithHexString:@"1989FA"]
                           navigationBarColor:[UIColor ty_colorWithHexString:@"FFFFFF"]
                          tabBarSelectedColor:[UIColor ty_colorWithHexString:@"00FFFF"]
                               alertMaskAlpha:@(0.4)];

    //do something else
    ...
}

Swift 示例

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

     let impl: TYThemeManagerProtocol? = TuyaSmartBizCore.sharedInstance().service(of: TYThemeManagerProtocol.self) as? TYThemeManagerProtocol
     impl?.configNormalModule(withThemeColor: UIColor.ty_color(withHexString: "FF0000"),
                                 backgroundColor: UIColor.ty_color(withHexString: "000000"),
                                 warningColor: UIColor.ty_color(withHexString: "0000FF"),
                                 tipsColor: UIColor.ty_color(withHexString: "FFFF00"),
                                 guideColor: UIColor.ty_color(withHexString: "FF00FF"),
                                 navigationBarColor: UIColor.ty_color(withHexString: "FFFFFF"),
                                 tabBarSelectedColor: UIColor.ty_color(withHexString: "00FFFF"),
                                 alertMaskAlpha: 0.9)

    //do something else
    ...

}

使用示例

Objective-C 示例

#import <TuyaSmartBizCore/TuyaSmartBizCore.h>
#import <TYModuleServices/TYModuleServices.h>

id<TYThemeManagerProtocol> impl = [[TuyaSmartBizCore sharedInstance] serviceOfProtocol:@protocol(TYThemeManagerProtocol)];
UIColor *themeColor = impl.themeColor;

//render your interface with themeColor
...

Swift 示例

let impl: TYThemeManagerProtocol? = TuyaSmartBizCore.sharedInstance().service(of: TYThemeManagerProtocol.self) as? TYThemeManagerProtocol
let themeColor = impl?.themeColor

//render your interface with themeColor
...

深浅色默认配置

根据颜色的色调饱和度亮度 HSB（Hue Saturation Brightness）值，可以判断属于深色还是浅色。

名词	说明
深色	表示 0 ≤ S ≤ 40% 并且 60% ≤ B ≤ 100% 的颜色
浅色	深色之外的其它颜色

/**
 * 主题色，通常作为按钮的背景色
 * 默认值为 #FF5A28
 * 支持自定义配置
 */
- (UIColor *)themeColor;

/**
 * 警告颜色，通常作为警告性控件的背景色，一般用来强烈的警告用户，吸引用户的注意
 * 默认值为 #FF4444
 * 支持自定义配置
 */
- (UIColor *)warningColor;

/**
 * 提示颜色，通常作为提示性控件的背景色，一般用来对用户的交互进行响应
 * 默认值为 #00CC99
 * 支持自定义配置
 */
- (UIColor *)tipsColor;

/**
 * 引导颜色，通常作为引导性控件的背景色，一般用来对用户进行引导
 * 默认值为 #1989FA
 * 支持自定义配置
 */
- (UIColor *)guideColor;

/**
 * tab 栏选中颜色
 * 默认值为 #FF5A28
 * 支持自定义配置
 */
- (UIColor *)tabBarSelectedColor;

/**
 * 背景色，App 界面的背景色
 * 默认值为 #F8F8F8
 * 支持自定义配置
 */
- (UIColor *)backgroundColor;

/**
 * 导航栏背景色
 * 默认值为 #FFFFFF
 * 支持自定义配置
 * 如果自定义，将使用自定义的值
 * 如果未进行自定义，那么当 backgroundColor 是浅色，其值为 #FFFFFF
 * 当 backgroundColor 是深色，其值为 backgroundColor 混合 #FFFFFF 10%
 */
- (UIColor *)navigationBarColor;

/**
 * 底部 tab 栏背景色
 * 默认值为 #FFFFFF
 * 当 backgroundColor 是浅色，其值为 #FFFFFF
 * 当 backgroundColor 是深色，其值为 backgroundColor 混合 #FFFFFF 10%
 */
- (UIColor *)bottomTabBarBgColor;

/**
 * 卡片背景色
 * 默认值为 #FFFFFF
 * 当 backgroundColor 是浅色，其值为 #FFFFFF
 * 当 backgroundColor 是深色，其值为 backgroundColor 混合 #FFFFFF 10%
 */
- (UIColor *)cardBgColor;

/**
 * 弹窗内容背景色
 * 默认值为 #FFFFFF
 * 当 backgroundColor 是浅色，其值为 #FFFFFF
 * 当 backgroundColor 是深色，其值为 backgroundColor 混合 #FFFFFF 10%
 */
- (UIColor *)alertBgColor;

/**
 * 弹窗蒙层色
 * 默认值为 #000000 40%
 * 如果自定义 alertMaskAlpha，那么弹窗蒙层色等于 #000000 alpha=alertMaskAlpha
 * 如果并未自定义 alertMaskAlpha，那么当 backgroundColor 是浅色，
   弹窗蒙层色为 #000000 40%，当 backgroundColor 是深色，弹窗蒙层色为 #000000 70%
 */
- (UIColor *)alertMaskColor;

/**
 * 列表单元格背景颜色
 * 默认值为 #FFFFFF
 * 当 backgroundColor 是浅色，其值为 #FFFFFF
 * 当 backgroundColor 是深色，其值为 backgroundColor 混合 #FFFFFF 10%
 */
- (UIColor *)listCellBgColor;

/**
 * 大标题文字颜色
 * 默认值为 #000000
 * 当 backgroundColor 是浅色，其值为 #000000
 * 当 backgroundColor 是深色，若 backgroundColor 与 themeColor、warningColor、
   tipsColor、guideColor、tabBarSelectedColor 任何一个一样，那么其值为 #FFFFFF，
   否则为 #FFFFFF 90%
 */
- (UIColor *)headLineColor;

/**
 * 小标题文字颜色
 * 默认值为 #000000
 * 当 backgroundColor 是浅色，其值为 #000000
 * 当 backgroundColor 是深色，若 backgroundColor 与 themeColor、warningColor、
   tipsColor、guideColor、tabBarSelectedColor 任何一个一样，那么其值为 #FFFFFF，
   否则为 #FFFFFF 70%
 */
- (UIColor *)subheadColor;

/**
 * 辅助文字颜色
 * 默认值为 #000000
 * 当 backgroundColor 是浅色，其值为 #000000
 * 当 backgroundColor 是深色，若 backgroundColor 与 themeColor、warningColor、
   tipsColor、guideColor、tabBarSelectedColor 任何一个一样，那么其值为 #FFFFFF，
   否则为 #FFFFFF 50%
 */
- (UIColor *)auxiLiaryColor;

/**
 * 失效文字颜色
 * 默认值为 #000000
 * 当 backgroundColor 是浅色，其值为 #000000
 * 当 backgroundColor 是深色，若 backgroundColor 与 themeColor、warningColor、
   tipsColor、guideColor、tabBarSelectedColor 任何一个一样，那么其值为 #FFFFFF，
   否则为 #FFFFFF 30%
 */
- (UIColor *)disableColor;

/**
 * 主题背景下文字的颜色
 * 默认值为 #FFFFFF
 * 当 themeColor 是浅色，其值为 #000000
 * 当 themeColor 是深色，其值为 #FFFFFF
 */
- (UIColor *)themeTextColor;

/**
 * 警告颜色下文字的颜色，通常作为警告性控件上文本的颜色，一般用来强烈的警告用户，
   吸引用户的注意
 * 默认值为 #FFFFFF
 * 当 warningColor 是浅色，其值为 #000000
 * 当 warningColor 是深色，其值为 #FFFFFF
 */
- (UIColor *)warningTextColor;

/**
 * 提示颜色下文字的颜色，通常作为提示性控件上文本的颜色，一般用来对用户的交互进行响应
 * 默认值为 #FFFFFF
 * 当 tipsColor 是浅色，其值为 #000000
 * 当 tipsColor 是深色，其值为 #FFFFFF
 */
- (UIColor *)tipsTextColor;

/**
 * 引导颜色下文字的颜色，通常作为引导性控件上文本的颜色，一般用来对用户进行引导
 * 默认值为 #FFFFFF
 * 当 guideColor 是浅色，其值为 #000000
 * 当 guideColor 是深色，其值为 #FFFFFF
 */
- (UIColor *)guideTextColor;

/**
 * 导航栏文字颜色
 * 默认值为 #000000
 * 当 navigationBarColor 是浅色，其值为 #000000
 * 当 navigationBarColor 是深色，若 navigationBarColor 与 themeColor、warningColor、tipsColor、guideColor、tabBarSelectedColor 任何一个一样，那么其值为 #FFFFFF，
   否则为 #FFFFFF 90%
 */
- (UIColor *)navigationBarTextColor;

/**
 * @brief 配置浅色模式的主题色、背景色、警告背景颜色、成功背景颜色、引导背景颜色、
   导航栏背景色、tab 选中颜色 以及 弹窗蒙层的透明度
 * @param themeColor 主题色，如果为 nil，则不修改
 * @param backgroundColor 背景色，如果为 nil，则不修改
 * @param warningColor 警告颜色，如果为 nil，则不修改
 * @param tipsColor 提示颜色，如果为 nil，则不修改
 * @param guideColor 引导颜色，如果为 nil，则不修改
 * @param navigationBarColor 导航栏背景颜色，如果为 nil，则不修改
 * @param tabBarSelectedColor tab 栏选中颜色，如果为 nil，则不修改
 * @param alertMaskAlpha 弹窗蒙层的透明度，取值范围 0～1，如果为 nil，则根据 themeColor 进行取值
 * @warning 请在 application:didFinishLaunchingWithOptions: 返回 true 之前，
   并且在创建 UI 之前完成自定义配置，不要在 App 运行过程中进行配置，也不要重复进行配置。
 */
- (void)configNormalModuleWithThemeColor:(nullable UIColor *)themeColor
                         backgroundColor:(nullable UIColor *)backgroundColor
                               warningColor:(nullable UIColor *)warningColor
                                  tipsColor:(nullable UIColor *)tipsColor
                                 guideColor:(nullable UIColor *)guideColor
                         navigationBarColor:(nullable UIColor *)navigationBarColor
                        tabBarSelectedColor:(nullable UIColor *)tabBarSelectedColor
                             alertMaskAlpha:(nullable NSNumber *)alertMaskAlpha
NS_SWIFT_NAME(configNormalModule(withThemeColor:
                                 backgroundColor:
                                 warningColor:
                                 tipsColor:
                                 guideColor:
                                 navigationBarColor:
                                 tabBarSelectedColor:
                                 alertMaskAlpha:));