iOS 開發(fā)中有時候會有夜間模式(換膚設(shè)置)的需求, 其實主要是更改相關(guān)顏色操作!
思路:每次切換夜間/白天模式時，都會發(fā)出通知給所有ViewController，讓它們切換到相應(yīng)的主題。
- 創(chuàng)建一個管理模式主題的單例管理類ThemeManage
- 封裝好需要做夜間模式變色處理的控件擴展:UIView (ThemeChange), UINavigationBar (ThemeChange), UITabBar (ThemeChange), UILabel (ThemeChange), UIButton (ThemeChange)
- 在 AppDelegate里先獲取夜間模式狀態(tài), 根控制器里先設(shè)置tabBar 及 子控制器里navigationBar的夜間模式狀態(tài)
- 添加控制白天/黑夜模式item,發(fā)通知切換相對應(yīng)i模式及image
- 添加相關(guān)控件是否黑夜模式下已更換字色和背景色
一. 創(chuàng)建一個管理模式主題的單例管理類ThemeManage
ThemeManage.h 文件:
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
@interface ThemeManage : NSObject
#pragma mark - 顏色屬性
@property(nonatomic, retain) UIColor *bgColor;
@property(nonatomic, retain) UIColor *color1;
@property(nonatomic, retain) UIColor *color2;
@property(nonatomic, retain) UIColor *textColor;
@property(nonatomic, retain) UIColor *textColorGray;
@property(nonatomic, retain) UIColor *navBarColor;
@property(nonatomic, retain) UIColor *colorClear;
#pragma mark -
// 是否是夜間 YES表示夜間, NO為正常
@property(nonatomic, assign) BOOL isNight;
/**
* 模式管理單例
*/
+ (ThemeManage *)shareThemeManage;
@end
ThemeManage. m 文件
#import "ThemeManage.h"
static ThemeManage *themeManage; // 單例
@implementation ThemeManage
#pragma mark - 單例的初始化
+ (ThemeManage *)shareThemeManage {
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
themeManage = [[ThemeManage alloc] init];
});
return themeManage;
}
#pragma mark 重寫isNight的set方法
- (void)setIsNight:(BOOL)isNight {
_isNight = isNight;
if (self.isNight) { // 夜間模式改變相關(guān)顏色
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];
});
}
@end
二. 封裝好需要做夜間模式變色處理的控件擴展
一般需要UIView (ThemeChange), UINavigationBar (ThemeChange), UITabBar (ThemeChange), UILabel (ThemeChange), UIButton (ThemeChange);這里拿 UIView 做例子:
#import <UIKit/UIKit.h>
/**
* 顏色狀態(tài)枚舉值 顏色的定義(一個代表一套)
*/
typedef NS_ENUM(NSInteger, UIViewColorType) {
UIViewColorTypeNormal, // 白天白色, 夜間黑色
UIViewColorType1, // 白天藍色, 夜間深灰
UIViewColorType2, // 白天淺藍, 夜間淺藍
UIViewColorTypeClear // 透明狀態(tài)
};
@interface UIView (ThemeChange)
// 定義顏色類型的屬性, NSNumber類型
@property(nonatomic, assign) id type;
// 消息中心開始監(jiān)聽
- (void)startMonitor;
// 改變顏色的方法
- (void)changeColor;
// 設(shè)置顏色類型和對應(yīng)顏色
- (void)NightWithType:(UIViewColorType)type;
// 設(shè)置字體顏色的方法
- (void)initTextColor;
@end
#import "UIView+ThemeChange.h"
#import "ThemeManage.h"
// 添加runtime頭文件
#import <objc/runtime.h>
@implementation UIView (ThemeChange)
#pragma mark - 添加type的set,get方法
- (void)setType:(id)type {
objc_setAssociatedObject(self, @selector(type), type, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
- (id)type {
return objc_getAssociatedObject(self, @selector(type));
}
#pragma mark - 開始監(jiān)聽
- (void)startMonitor {
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(changeColor) name:@"changeColor" object:nil];
}
#pragma mark - 改變顏色
- (void)changeColor {
// type為NSNumber型, 變?yōu)镹SInteger
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;
}
}
#pragma mark - 設(shè)置顏色類型和對應(yīng)顏色
- (void)NightWithType:(UIViewColorType)type {
self.type = [NSNumber numberWithInteger:type];
[self changeColor];
[self startMonitor];
// 調(diào)用設(shè)置字體顏色的方法
[self initTextColor];
}
#pragma mark - 改變字體顏色的方法, 空方法, 可以在子類中重寫這個方法來改變顏色(例如:Label)
- (void)initTextColor {
}
@end
三. 在 AppDelegate里先獲取夜間模式狀態(tài), 根控制器里先設(shè)置tabBar 及 子控制器里navigationBar的夜間模式狀態(tài)
#import "ThemeManage.h"
#import "UIView+ThemeChange.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// 獲取夜間模式狀態(tài)
[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 文件:
- (void)viewDidLoad {
[super viewDidLoad];
[self.view NightWithType:UIViewColorTypeNormal];
HomeViewController *vc = [[HomeViewController alloc] init];
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:vc];
// 設(shè)置navigationBar的夜間模式狀態(tài)
[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];
// 設(shè)置navigationBar的夜間模式狀態(tài)
[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];
}
四. 添加控制白天/黑夜模式item,發(fā)通知切換相對應(yīng)i模式及image.
#import "ThemeManage.h"
#import "UIView+ThemeChange.h"
[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:)];
#pragma mark - Action點擊動作事件
// 切換夜間模式
- (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];
}
發(fā)了通知不要忘記移除監(jiān)聽
- (void)dealloc {
// 移除監(jiān)聽
[[NSNotificationCenter defaultCenter] removeObserver:self];
}
五. 添加相關(guān)控件是否黑夜模式下已更換字色和背景色
#import "UILabel+ThemeChange.h"
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(100, 100, 200, 40)];
label.text = @"測試看看字色及背景色";
[label NightWithType:UIViewColorTypeNormal];
[label NightTextType:LabelColorGray];
[self.view addSubview:label];
這時候測試下, 看下效果:
夜間模式.gif
Demo 下載請移步: 夜間模式(換膚設(shè)置)
