Androidはワンツーパンチ 三歩進んで二歩下がる

プログラミングやどうでもいい話

Xcode9での画像リソース追加方法(アセットカタログ・PDF)

ios アプリで使用する画像について、
・Asset Catalogで画像を追加する方法
ベクター画像を扱うためにPDF形式のファイルを使用する
の内容について書きます。

アセットカタログ(Assets Catalog)とは

アプリで使用する画像やサウンドその他リソースを管理できる便利なツールです。

異なる解像度のデバイス用の複数のサイズの画像などを管理し、
リソースを名前で呼び出すとデバイスに最適な解像度の画像を自動で使ってくれたりします。

プロジェクトを新規に作成すると、Assets.xcassetsという名前でアセットカタログが生成されます。

f:id:sakura_bird1:20180105233801p:plain

公式ドキュメント

Asset Catalog Format Reference: Format Overview

Xcodeのヘルプページ
http://help.apple.com/xcode/mac/current/#/dev10510b1f7

Added option to preserve image vector data for matching Dynamic Type scaling.
What's New in Xcode 9

アセットカタログにファイルを追加する

プロジェクトのファイルの中からAssets.xcassetsというフォルダのアイコンをクリックします。
画像ファイルをドラッグ&ドロップしてコピペするか、「+」ボタンを押して追加します。
画像追加の場合「+」ボタンから追加するなら「New Image Set」をクリックし、
1x,2x,3xのところにそれぞれの解像度の画像をドラッグ&ドロップして追加します。
png形式やjpeg形式の画像を使う場合。)

f:id:sakura_bird1:20180105235351p:plain:w300

右側のAttributes Inspectorの「Name」に指定された名前をプログラム中で使用します。

画像にPDFファイルを使用する

Xcode6から、Assets CatalogにPDFのベクター画像が使用できるようになっています。
これにより解像度別に画像を用意する必要が無くなります。

PDFをアセットカタログに追加すると、Xcodeがビルド時に@1x PNG, @2x PNG, and @3x PNGの画像ファイルを生成します。

用意するPDFファイルは@1x のサイズです。
PhotoshopIllustratorSketchInkscapePixelMatorGraphicなど様々なソフトやツールを使ってPDFファイルにエクスポート出来ます。

動的にスケールしないベクター画像(Xcode8まで)

PDFファイルを使用することで、用意する画像がワンサイズで良くなったことはいいとして、
ビルド時に生成された静的な画像ファイルでしかないので
大きなビューで画像を表示したりすると、画像は汚く表示されてしまいます。

Xcode9でAsset Catalogに「Preserve Vector Data」というオプションが追加され、PDF画像が動的にスケーリング出来るようになりました。
iOS11で実行した時に有効となるようです。

参考サイト様
Xcode 9 のベクター機能がさらなる次元に – Swift・iOSコラム – Medium
Xcode 9 Vector Images
The Unexpected Joy of Vector Images in iOS 11 — Erica Sadun

使い方はアセットカタログのAttributes InspectorのResizingのところの「Preserve Vector Data」のチェックボックスをonにするだけです。
PreviewやStoryBoardではきれいに表示されないみたいですが、実行時には綺麗に表示されます。

f:id:sakura_bird1:20180106012222p:plain:w300


以上です。