主题色配置业务包

更新时间:2024-06-03 02:32:25下载pdf

涂鸦主题色配置业务包用于配置涂鸦 Cube 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 'ThingSmartThemeManagerBizBundle'
end

使用指南

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

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

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

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

  2. 添加颜色配置项:

    {
        "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 <ThingSmartBizCore/ThingSmartBizCore.h>
#import <ThingModuleServices/ThingModuleServices.h>

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

    id<ThingThemeManagerProtocol> impl = [[ThingSmartBizCore sharedInstance] serviceOfProtocol:@protocol(ThingThemeManagerProtocol)];
    [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: ThingThemeManagerProtocol? = ThingSmartBizCore.sharedInstance().service(of: ThingThemeManagerProtocol.self) as? ThingThemeManagerProtocol
     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 <ThingSmartBizCore/ThingSmartBizCore.h>
#import <ThingModuleServices/ThingModuleServices.h>

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

//render your interface with themeColor
...

Swift 示例

let impl: ThingThemeManagerProtocol? = ThingSmartBizCore.sharedInstance().service(of: ThingThemeManagerProtocol.self) as? ThingThemeManagerProtocol
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:));