iOS 应用界面灰色主题
创始人
2024-03-13 05:13:15
0

0x00 前提

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


0x01 方案

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

一、整体置灰
在应用最顶层添加一层灰色滤镜,让整体呈现灰色。
简单点,就是盖上一块灰色蒙板。

直接上代码:

@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

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

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;
}

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;
}

0x02 参考

iOS页面灰化-节日


0x03 后续

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


0x04 我的小作品

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


相关内容

热门资讯

中证A500ETF摩根(560... 8月22日,截止午间收盘,中证A500ETF摩根(560530)涨1.19%,报1.106元,成交额...
A500ETF易方达(1593... 8月22日,截止午间收盘,A500ETF易方达(159361)涨1.28%,报1.104元,成交额1...
何小鹏斥资约2.5亿港元增持小... 每经记者|孙磊    每经编辑|裴健如 8月21日晚间,小鹏汽车发布公告称,公司联...
中证500ETF基金(1593... 8月22日,截止午间收盘,中证500ETF基金(159337)涨0.94%,报1.509元,成交额2...
中证A500ETF华安(159... 8月22日,截止午间收盘,中证A500ETF华安(159359)涨1.15%,报1.139元,成交额...
科创AIETF(588790)... 8月22日,截止午间收盘,科创AIETF(588790)涨4.83%,报0.760元,成交额6.98...
创业板50ETF嘉实(1593... 8月22日,截止午间收盘,创业板50ETF嘉实(159373)涨2.61%,报1.296元,成交额1...
港股异动丨航空股大幅走低 中国... 港股航空股大幅下跌,其中,中国国航跌近7%表现最弱,中国东方航空跌近5%,中国南方航空跌超3%,美兰...
电网设备ETF(159326)... 8月22日,截止午间收盘,电网设备ETF(159326)跌0.25%,报1.198元,成交额409....
红利ETF国企(530880)... 8月22日,截止午间收盘,红利ETF国企(530880)跌0.67%,报1.034元,成交额29.0...