iOS 应用界面灰色主题

0x00 前提

某些特殊节日，应用需要切换到灰色主题，表达哀思和悼念。

---

0x01 方案

一种是整体置灰
一种是界面元素(图片和文字)置灰

一、整体置灰（>= iOS 13.0 有效）
在应用最顶层添加一层灰色滤镜，让整体呈现灰色。
简单点，就是盖上一块灰色蒙板。

直接上代码：

@interface JHGrayDayView : UIView
+ (void)shouldShow:(NSDictionary *)data;
@end

@implementation JHGrayDayView

// 根据后台返回开关判断
+ (void)shouldShow:(NSDictionary *)data
{
    BOOL show = [data[@"turnGray"] boolValue];
    if (!show) {
        return;
    }
    
    UIWindow *window = /* AppDelegate 的 window; */
    JHGrayDayView *view = [[JHGrayDayView alloc] initWithFrame:window.bounds];
    view.translatesAutoresizingMaskIntoConstraints = false;
    view.backgroundColor = [UIColor lightGrayColor];
    view.layer.compositingFilter = @"saturationBlendMode";
    [window addSubview:view];
}

// 最顶层视图，承载滤镜，自身不接收、不拦截任何触摸事件
- (UIView*)hitTest:(CGPoint)point withEvent:(UIEvent *)event{
    return nil;
}

@end


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
28
29
30

二、界面元素(图片和文字)置灰

a.把图片转成灰度图

+ (UIImage *)covertToGrayImageFromImage:(UIImage *)sourceImage
{
    int width = sourceImage.size.width;
    int height = sourceImage.size.height;
    
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceGray();
    CGContextRef context = CGBitmapContextCreate (nil,width,height,8,0,colorSpace,kCGImageAlphaNone);
    CGColorSpaceRelease(colorSpace);
    
    if (context == NULL) {
        return nil;
    }
    
    CGContextDrawImage(context,CGRectMake(0, 0, width, height), sourceImage.CGImage);
    CGImageRef contextRef = CGBitmapContextCreateImage(context);
    UIImage *grayImage = [UIImage imageWithCGImage:contextRef];
    CGContextRelease(context);
    CGImageRelease(contextRef);
    
    return grayImage;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

b.把文字颜色转成灰色
使用公式就可以了 Y = 0.299 * r + 0.587 * g + 0.114 * b

+ (UIColor *)covertToGrayColorFromColor:(UIColor *)color
{
	CGFloat r,g,b,a;
	[color getRed:&r green:&g blue:&b alpha:&a];
	CGFloat y = 0.299*r + 0.587*g + 0.114*b;
	UIColor *gray = [UIColor colorWithRed:y green:y blue:y alpha:a];
	return gray;
}
1
2
3
4
5
6
7
8

---

0x02 参考

iOS页面灰化-节日

---

0x03 后续

当 JHGrayDayView 添加到 window 后，有一些弹窗的层级，可能比 JHGrayDayView 还高，这些弹窗就无法被 灰色 主题覆盖到，要如何处理呢？
你有什么处理方式吗？知道的可以留个言~
不知道的，如果你能加上我的微信(附言：灰色主题)。我可以提供一个思路~

---

0x04 我的小作品

欢迎体验我的作品之一：小五笔
五笔学习好帮手
App Store 搜索即可~

---