Xcode 8 の新機能！画像と色のリテラル、画像のコード補完

画像や色をソースコード上でより扱いやすく

Xcode 8 から、画像と色のリテラルと画像のコード補完が使えるようになりました。

「リテラル」とは、コードをより簡単に記述するために用意された特別な記法です。このリテラルを使うと、ソースコード上に画像を表示したり、色を表示したりすることができます。いままでは、ソースコードでどのような画像を参照しているか知るためにはアセットカタログを見たりしなければいけませんでしたが、一目瞭然となります。色についても同様です。

本記事では、「画像と色のリテラル」を中心に触れてみます。

画像のリテラル

まずアセットカタログに、適当な画像を用意します。

「IconA」や「IconB」などといった名前にしているので、ソースコード上で「ic...」と入力すると、コード補完に画像(アセット)が出てきます。

ソースコード上に画像が表示される、特殊な表示になりました。これは　UIImage のインスタンスとなります。

普通の UIImage と変わりはないので、UIImageView の image にセットすることができます。

もちろん、アプリの画面上に実際に表示することができます。

なお、コード補完で「Image Literal」を選ぶことで、リテラルを書き始めることもできます。

その場合には、アセットカタログに登録されているアセットが一覧で表示されます。

一度リテラルを書いた後、そのリテラルをダブルクリックすると、再度選び直すことができます。

ものすごく便利ですね！

色のリテラル

色のリテラルは、コード補完で「Color Literal」を選びます。

カラーパレットが出てきます。

ソースコード上に色が表示される、特殊な表示になりました。これは　UIColor のインスタンスとなります。

もちろん、普通の UIColor のインスタンスとして扱うことができます。

例えば背景に設定した場合、もちろん適用されます。

ダブルクリックすると、変更することができます。

ものすごく便利ですね！

追記: カラーパレットからドラッグアンドドロップでも追加することもできます！

実際のコード

Xcode 以外のエディタでソースコードを開くと確認できますが、実際には以下のようなコードになっています。

#imageLiteral(resourceName: "IconA")
#colorLiteral(red: 0.1764705926, green: 0.01176470611, blue: 0.5607843399, alpha: 1)

まとめ

画像や色をいちいち参照することなく、ソースコードに集中して作業できるようになりました。ぜひ活用していきましょう。