更新时间: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 选中颜色以及弹窗蒙层的透明度。可以使用以下两种方式中的任何一种进行配置:
确保项目根目录存在 thing_custom_config.json
文件,如果不存在,则需要添加,具体请参考 框架接入。
添加颜色配置项:
{
"config": {
...
},
"colors":{
"themeColor": "#FF5A28",
"backgroundColor": "#F8F8F8",
"warningColor": "#FF4444",
"tipsColor": "#00CC99",
"guideColor": "#1989FA",
"navigationBarColor": "#FFFFFF",
"tabBarSelectedColor": "#FF5A28",
"alertMaskAlpha": 0.4
}
}
如果你选择通过 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:));
该内容对您有帮助吗?
是意见反馈该内容对您有帮助吗?
是意见反馈