Microsoft 系のあれこれ

港区の SIer で よくわからんことをしている SE みたいな人です。Xamarin 中心です。

Xamarin.FormsでiOSのスプラッシュの背景色が意図した色にならない

あるアプリでテーマカラーを以下のような色にしたかったのですが、スプラッシュ画面が意図した色にならなかったため、その対応方法です。
「Xamarin.Formsで」と記載されてるのは同じような問題が Mac で普通に iOS のアプリを作っても発生するのかわからなかった(知らない)ので、保険として。
f:id:ShunsukeKawai:20180926173433p:plain

iOS でのスプラッシュには Storyboard を使用しています。

まとめ

  • Visual Studio で Storyboard は編集しない
  • ColorSpace は sRGB

現象再現手順

WindowsVisual Studio で Storyboard の背景色を変更します。
f:id:ShunsukeKawai:20180926181720p:plain

アプリを起動します。
↓スプラッシュ
f:id:ShunsukeKawai:20180926182504p:plain:w400

はい、その次の画面で同じ色を背景にしたログイン画面が出てくるのですが、比べてみましょう。
↓ログイン画面
f:id:ShunsukeKawai:20180926182646p:plain:w400

違いますね。

色々調べてみるとXamarin のリポジトリにも Issue があがってました。
Xamarin の問題じゃないぞ、とクローズされてますが、解決方法が書いてありました。
iOS Storyboard Launch Screen color issue · Issue #1750 · xamarin/Xamarin.Forms · GitHub

This particular issue does look like a mismatched colorspace. We don't currently expose an easy way to alter the colourspace, but it is on the roadmap.

For now can you can open your storyboard in Xcode and access the colorspace selector like this: http://recordit.co/JAVdR1FHjh . If you want things to match you will have to use the same RGB values and the same colorspace for both controls. There is some more information here about handling colorspaces: https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/

colorspace が違うから、と書いてあるようです。
ということで対応します。

対応方法

先ほど編集した Storyboard をエディターで開くと色を定義している箇所が以下の様になっています。

<color key="backgroundColor" red="0.84313725490196079" green="0.23137254901960785" blue="0.00784313725490196" alpha="1" colorSpace="calibratedRGB"/>

ここの colorSpace="calibratedRGB" が悪いヤツみたいです。

MacXcode で対象の Storyboard を開き、色を変更するウィンドウの歯車マークを選択して sRGB ~~ を選択して、再度正しい色の値を設定します。
f:id:ShunsukeKawai:20180926185849p:plain

編集した Storyboard は以下の様になっています。

<color key="backgroundColor" red="0.84313725490196079" green="0.23137254901960785" blue="0.0078431372549019607" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>

colorSpace="custom" customColorSpace="sRGB"の部分ですね。

この部分の変更を元のプロジェクトにしてやって再度アプリを起動します。
f:id:ShunsukeKawai:20180926191942p:plain:w400

ちゃんと意図した色になりました!!

この Storyboard を再度 Visual Studio の Interface Builder で編集するとcolorSpace="calibratedRGB"に戻ります(汗
そのため、今後は Storyboard を Visual Studio で編集しないようにしましょうっとw

補足

  • Visual Studio for Mac でも同じ現象が再現しました。
  • GenericRGB はもう使うなって Apple は言ってる?

kCGColorSpaceGenericRGB - Core Graphics | Apple Developer Documentation

  • ネイティブ開発でも同じなのかな?

InterfaceBuilderで色を設定するときはcolorSpaceに気をつけよう