一、实现功能及主要思路
实现功能:
iOS 开发中有时候会有夜间模式(换肤设置)的需求, 其实主要是更改相关颜色操作.每次切换夜间/白天模式时,都会发出通知给所有ViewController,让它们切换到相应的主题.
主要思路:
1. 创建一个管理模式主题的单例管理类ThemeManage
2. 封装好需要做夜间模式变色处理的控件扩展:UIView (ThemeChange), UINavigationBar (ThemeChange), UITabBar (ThemeChange), UILabel (ThemeChange), UIButton (ThemeChange)
3. 在 AppDelegate里先获取夜间模式状态, 根控制器里先设置tabBar 及 子控制器里navigationBar的夜间模式状态
4. 添加控制白天/黑夜模式item,发通知切换相对应i模式及image
5. 添加相关控件是否黑夜模式下已更换字色和背景色
二、程序实现
Step1. 创建一个管理模式主题的单例管理类
ThemeManage.h 文件里添加模式管理单例:
1
2
3
4
5
6
|
// 是否是夜间 YES表示夜间, NO为正常
@property(nonatomic, assign)
BOOL
isNight;
/**
* 模式管理单例
*/
+ (ThemeManage *)shareThemeManage;
|
ThemeManage. m 文件:
单例的初始化:
1
2
3
4
5
6
7
8
|
+ (ThemeManage *)shareThemeManage {
static
dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
themeManage = [[ThemeManage alloc] init];
});
return
themeManage;
}
|
重写isNight的set方法 (是否是夜间 YES表示夜间, NO为正常)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
- (
void
)setIsNight:(
BOOL
)isNight {
_isNight = isNight;
if
(self.isNight) {
// 夜间模式改变相关颜色
self.bgColor = [UIColor colorWithRed:0.06 green:0.08 blue:0.1 alpha:1];
self.textColor = [UIColor whiteColor];
self.color1 = [UIColor colorWithRed:0.08 green:0.11 blue:0.13 alpha:1];
self.navBarColor = [UIColor whiteColor];
self.color2 = [UIColor colorWithRed:0.2 green:0.31 blue:0.43 alpha:1];
self.textColorGray = [UIColor whiteColor];
}
else
{
self.bgColor = [UIColor whiteColor];
self.textColor = [UIColor blackColor];
self.color1 = [UIColor colorWithRed:0.06 green:0.25 blue:0.48 alpha:1];
self.navBarColor = [UIColor colorWithRed:0.31 green:0.73 blue:0.58 alpha:1];
self.color2 = [UIColor colorWithRed:0.57 green:0.66 blue:0.77 alpha:1];
self.textColorGray = [UIColor grayColor];
}
static
dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
self.colorClear = [UIColor clearColor];
});
}
|
Step2. 封装好需要做夜间模式变色处理的控件扩展
一般需要UIView (ThemeChange), UINavigationBar (ThemeChange), UITabBar (ThemeChange), UILabel (ThemeChange), UIButton (ThemeChange);
详情见 Demo, 这里拿 UIView 做例子:
添加颜色状态枚举值 颜色的定义(一个代表一套):
1
2
3
4
5
6
|
typedef
NS_ENUM(NSInteger, UIViewColorType) {
UIViewColorTypeNormal,
// 白天白色, 夜间黑色
UIViewColorType1,
// 白天蓝色, 夜间深灰
UIViewColorType2,
// 白天浅蓝, 夜间浅蓝
UIViewColorTypeClear
// 透明状态
};
|
添加type的set,get方法:
1
2
3
4
5
6
7
|
- (
void
)setType:(id)type {
objc_setAssociatedObject(self, @selector(type), type, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
- (id)type {
return
objc_getAssociatedObject(self, @selector(type));
}
|
开始监听:
1
2
3
|
- (
void
)startMonitor {
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(changeColor) name:@
"changeColor"
object:nil];
}
|
改变颜色:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
- (
void
)changeColor {
// type为NSNumber型, 变为NSInteger
switch
([self.type integerValue]) {
case
UIViewColorTypeNormal:
self.backgroundColor = [ThemeManage shareThemeManage].bgColor;
break
;
case
UIViewColorType1:
self.backgroundColor = [ThemeManage shareThemeManage].color1;
break
;
case
UIViewColorType2:
self.backgroundColor = [ThemeManage shareThemeManage].color2;
break
;
case
UIViewColorTypeClear:
self.backgroundColor = [ThemeManage shareThemeManage].colorClear;
break
;
default
:
break
;
}
}
|
设置颜色类型和对应颜色:
1
2
3
4
5
6
7
8
9
|
- (
void
)NightWithType:(UIViewColorType)type {
self.type = [NSNumber numberWithInteger:type];
[self changeColor];
[self startMonitor];
// 调用设置字体颜色的方法
[self initTextColor];
}
|
改变字体颜色的方法, 空方法, 可以在子类中重写这个方法来改变颜色(例如:Label):
1
2
3
|
- (
void
)initTextColor {
}
|
Step3. 在 AppDelegate里先获取夜间模式状态, 根控制器里先设置tabBar 及 子控制器里navigationBar的夜间模式状态
1
2
|
#import "ThemeManage.h"
#import "UIView+ThemeChange.h"
|
获取夜间模式状态:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
- (
BOOL
)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// 获取夜间模式状态
[ThemeManage shareThemeManage].isNight = [[NSUserDefaults standardUserDefaults] boolForKey:@
"night"
];
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
self.window.backgroundColor = [UIColor whiteColor];
[self.window makeKeyAndVisible];
RootViewController *rootVc = [[RootViewController alloc] init];
self.window.rootViewController = rootVc;
return
YES;
}
|
RootViewController.m 文件里设置navigationBar的夜间模式状态:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
- (
void
)viewDidLoad {
[super viewDidLoad];
[self.view NightWithType:UIViewColorTypeNormal];
HomeViewController *vc = [[HomeViewController alloc] init];
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:vc];
// 设置navigationBar的夜间模式状态
[nav.navigationBar NightWithType:UIViewColorTypeNormal];
vc.tabBarItem = [[UITabBarItem alloc] initWithTitle:@
"首页"
image:[UIImage imageNamed:@
"home"
] tag:10];
SchemaViewController *secondVC = [[SchemaViewController alloc] init];
UINavigationController *nav1 = [[UINavigationController alloc] initWithRootViewController:secondVC];
// 设置navigationBar的夜间模式状态
[nav1.navigationBar NightWithType:UIViewColorTypeNormal];
secondVC.tabBarItem = [[UITabBarItem alloc] initWithTitle:@
"菜单"
image:[UIImage imageNamed:@
"schema"
] tag:11];
[self.tabBar NightWithType:UIViewColorTypeNormal];
self.viewControllers = @[nav, nav1];
self.tabBar.translucent = NO;
[[UINavigationBar appearance] setTranslucent:NO];
}
|
Step4. 添加控制白天/黑夜模式item,发通知切换相对应i模式及image
1
2
3
4
|
[self.view NightWithType:UIViewColorTypeNormal];
UIImage *barButtonImage = [ThemeManage shareThemeManage].isNight ? [UIImage imageNamed:@
"night"
] : [UIImage imageNamed:@
"day"
];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithImage:barButtonImage style:UIBarButtonItemStylePlain target:self action:@selector(rightBarBtnAction:)];
|
Action点击动作事件(切换夜间模式):
1
2
3
4
5
6
7
8
|
- (
void
)rightBarBtnAction:(UIBarButtonItem *)barButton {
[ThemeManage shareThemeManage].isNight = ![ThemeManage shareThemeManage].isNight;
[[NSNotificationCenter defaultCenter] postNotificationName:@
"changeColor"
object:nil];
[[NSUserDefaults standardUserDefaults] setBool:[ThemeManage shareThemeManage].isNight forKey:@
"night"
];
UIImage *barBtnImage = [ThemeManage shareThemeManage].isNight ? [UIImage imageNamed:@
"night"
] : [UIImage imageNamed:@
"day"
];
[barButton setImage:barBtnImage];
}
|
发了通知不要忘记移除监听:
1
2
3
4
|
- (
void
)dealloc {
// 移除监听
[[NSNotificationCenter defaultCenter] removeObserver:self];
}
|
Step5. 添加相关控件是否黑夜模式下已更换字色和背景色
1
|
#import "UILabel+ThemeChange.h"
|
1
2
3
4
5
|
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(100, 100, 200, 40)];
label.text = @
"测试看看字色及背景色"
;
[label NightWithType:UIViewColorTypeNormal];
[label NightTextType:LabelColorGray];
[self.view addSubview:label];
|
三、项目截图及运行效果
项目截图:
这时候测试下, 看下运行效果:
夜间模式对比截图:
四、其他补充
界面性问题可以根据自己项目需求调整即可, 具体可参考代码, 项目能够直接运行!
如需看源码,请点击这里下载!