iOS整個APP實現灰色主題的示例代碼

Posted on by

灰色主題

背景

在一些哀悼日，清明節的時候app會實現一些灰色主題功能，部分app需求是tab首頁實現灰色模式就可以，但一些需求是直接整個app都變為灰色模。

  •  普通UI界面
  • web頁面
  • xib界面
  • attributeText加載的htmlString頁面
  • attachment掛件頁面

實現方式

基本的實現方式1，普通頁面用hook顏色方式2.web頁面用註入灰色js實現方式

圖片變灰

重新繪制圖片變為灰色代碼實現

//image類別
- (UIImage *)getGrayImage {
    
  const int RED =1;
  const int GREEN =2;
  const int BLUE =3;
    
  UIImage *image = self;
    
  // Create image rectangle with current image width/height
  CGRect imageRect = CGRectMake(0,0, image.size.width* image.scale, image.size.height* image.scale);
    
  int width = imageRect.size.width;
  int height = imageRect.size.height;
    
  // the pixels will be painted to this array
  uint32_t *pixels = (uint32_t*) malloc(width * height *sizeof(uint32_t));
    
  // clear the pixels so any transparency is preserved
  memset(pixels,0, width * height *sizeof(uint32_t));
    
  CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    
  // create a context with RGBA pixels
  CGContextRef context = CGBitmapContextCreate(pixels, width, height,8, width *sizeof(uint32_t), colorSpace, kCGBitmapByteOrder32Little | kCGImageAlphaPremultipliedLast);
    
  // paint the bitmap to our context which will fill in the pixels array
  CGContextDrawImage(context,CGRectMake(0,0, width, height), [image CGImage]);
    
  for(int y = 0; y < height; y++) {
    for(int x = 0; x < width; x++) {
      uint8_t *rgbaPixel = (uint8_t*) &pixels[y * width + x];
        
      // convert to grayscale using recommended method: http://en.wikipedia.org/wiki/Grayscale#Converting_color_to_grayscale
      uint32_t gray = 0.3 * rgbaPixel[RED] +0.59 * rgbaPixel[GREEN] +0.11 * rgbaPixel[BLUE];
        
      // set the pixels to gray
      rgbaPixel[RED] = gray;
      rgbaPixel[GREEN] = gray;
      rgbaPixel[BLUE] = gray;
    }
  }
    
  // create a new CGImageRef from our context with the modified pixels
  CGImageRef imageRef = CGBitmapContextCreateImage(context);
    
  // we're done with the context, color space, and pixels
  CGContextRelease(context);
  CGColorSpaceRelease(colorSpace);
  free(pixels);
    
  // make a new UIImage to return
  UIImage *resultUIImage = [UIImage imageWithCGImage:imageRef scale:image.scale orientation:UIImageOrientationUp];
    
  // we're done with image now too
  CGImageRelease(imageRef);
    
  return resultUIImage;
  
}

文本變灰

文本textColor變為灰色 rgb的處理有很多這裡簡單提供一個

    [self swizzleMethod:self orgSel:@selector(initWithRed:green:blue:alpha:) swizzSel:@selector(hdd_initWithRed:green:blue:alpha:)];
+ (UIColor *)hdd_colorWithRed:(CGFloat)red green:(CGFloat)green blue:(CGFloat)blue alpha:(CGFloat)a{
  CGFloat gray = red*0.299 + green*0.587 + blue*0.114;
  if ([CSDarkSiteManager isLocalCacheDarkSiteStatus]) {
    return [self hdd_colorWithRed:gray green:gray blue:gray alpha:a];
  }
  else {
    return [self hdd_colorWithRed:red green:green blue:blue alpha:a];
  }
}

文本變灰色還牽扯到系統顏色的灰色處理，例如[UIcolor whiteColor],系統alertView彈框中的藍色按鈕顏色處理，都需要有專門的處理方法

xib圖片變灰

由於xib讀取圖片不是直接通過[UIimageView imageName:@””] 加載方式 沒辦法直接通過hook setImage直接設置xib圖片變為灰色

方法：重寫UIimageView的awakeFromNib，再去執行hook setImage的方法進行加載

webView的變灰

hook webView的初始化方法，註入js灰色

+ (void)swizzHook {
  static dispatch_once_t onceToken;
  dispatch_once(&onceToken, ^{
    Method originalMethod = class_getInstanceMethod([self class], @selector(initWithFrame:configuration:));
    Method swizzledMethod = class_getInstanceMethod([self class], @selector(lg_initWithFrame:configuration:));
    method_exchangeImplementations(originalMethod, swizzledMethod);
  });
}
- (instancetype)lg_initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration {
  Class class = NSClassFromString(@"AIRWKWebView");
  if ([CSDarkSiteManager isLocalCacheDarkSiteStatus] && ![self isKindOfClass:class]) {
    NSString *jScript = @"var filter = '-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%) filter:grayscale(100%);';document.getElementsByTagName('html')[0].style.filter = 'grayscale(100%)';";
    // 註入
    WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
    [configuration.userContentController addUserScript:wkUScript];
    WKWebView *webView = [self lg_initWithFrame:frame configuration:configuration];
    return webView;
  }
  else {
    WKWebView *webView = [self lg_initWithFrame:frame configuration:configuration];
    return webView;
  }
  
}

attributeText加載htmlString變灰

attribute情況下加載html不是直接通過設置color來改變顏色的，需要通過遍歷對應的屬性進行重新顏色進行賦值

存在的問題

這樣全局修改，可能會把鍵盤的顏色也改變瞭需要特殊處理

系統顏色中，alertView中的藍色，不在定義的系統顏色范圍之內需要重新加載

hook系統顏色的處理

完整性

需要完整的私發信息

到此這篇關於iOS整個APP實現灰色主題的示例代碼的文章就介紹到這瞭,更多相關iOS 灰色主題內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：