一鍵修改 xib storyboard 控制元件顏色空間(colorSpace)

灬C灬C灬發表於2019-02-27

緣起:

設計那邊出了個預設頁的圖然後還標註了按鈕的色值,然後我這邊也照常寫了,但多次溝通後設計還是說那顏色看起來不對(我看都長得一樣啊,設計自帶畫素眼?)

排查:

於是乎我開啟 XIB 檔案看看,確實是設定的 0099E8 呀,因為我沒有畫素眼,只能藉助外部工具來看看實際執行起來色值是多少,然後我藉助 FLEX 這個工具看了下色值,神奇的是實際出來的色值變成了 00AAEC(圖一)

圖一

解決:

經過一頓操作(我是一頓操作)最終定位到問題是電腦的顏色空間不一致導致的問題(想起之前因為 iMac 投出的副屏不清晰然後給 iMac 裝了特定的顏色檔案),然後再次開啟 XIB 檢視顏色空間確實不是常用的 sRGB 而是 Generic RGB(圖二),然後把顏色空間改成 sRGB 後跑起來色值正常了,設計也露出了滿意且邪魅的笑容。

圖二

反思:

但這樣真的解決了嗎?是解決了,但解決的只是這個按鈕的色值問題,專案中還有其它地方有這個問題嗎?好,寫個 Demo 來排查下,於是又經過一頓操作這個 Mac 應用出來了,主要可以根據色值匹配列出專案中所有的元素,然後一鍵替換或部分替換,還有個隱藏功能就是可以將專案中某個色值替換成指定色值(換膚)。最終發現專案中有 245 個用 GenericRGB 顏色空間導致有色差的地方(圖三),然後進行一一替換。

圖三

總結:

  • 色值出現偏差是因為 sketch 預設的顏色配置檔案是 sRGB IEC61966-2.1(圖四),而 Xcode8 之前是 generic RGB,Xcode8 之後才統一為 sRGB IEC61966-2.1
  • 程式碼編寫的 UIColor 顏色空間預設是 sRGB 的
  • 為了避免出現顏色偏差的問題,最優方案應該是跟設計那邊溝通統一顏色配置檔案,畢竟顏色配置檔案也是不斷髮展的,誰知道若干年後 sRGB 是不是也過時了呢!
    圖四

ChangeInterfaceBuilderColor

原理:

  1. 分別記錄修改前(matchColor)和修改後(modifyColor)的顏色模型, 以此匹配要改動的 modifyType(只改色值、只改顏色空間或二者都改);
  2. 遍歷匯入路徑下所有的 .xib 和 .storyboard 檔案;
  3. 對每一個 .xib 和 .storyboard 檔案進行 DOM 解析操作,找到所有 color 元素標籤NSXMLElement 並展示儲存;
  4. 點選替換時修改 color 元素標籤內的 NSXMLNode 相對應的 name,原始碼有詳細註釋
  5. 解析方式參考至來源

使用:

替換色值.gif
替換顏色空間.gif

相關文章