はじめに
現在、個人的にiosアプリ開発を行うにあたってAdobeのXDとXcodeを使用しているのですが、
アイコンの作成～Xcodeまでの反映の流れがまとまっているものがなく、
転々と調べていたため、メモ程度に記事投稿をしようと思います。
同様の組み合わせでアプリ開発を行おうと思っている方のお役に立てれば幸いです。
本題
STEPは全部で4つになります。
- XDでアイコンを作成する
- XDで作成したアイコンの書き出し
- Xcodeに書き出したアイコン画像を反映させる
- Xcodeのstoryboard上でViewに画像を反映させる
1. XDでアイコンを作成する
まずは、アプリで使用したいアイコンをXD上で作成を行います。
XD上の機能だけで作成しても良いですし、商用利用可能なフリーアイコンなどのサイトから
好みのアイコンを取ってきて、それをアレンジして使用するのも良いと思います。
自分は今回以下のアイコンを作成しました。
フリーアイコンの以下のサイトが非常に使いがってがよく、商用利用も可能なためお勧めです。
・icooon-mono https://icooon-mono.com/
2. XDで作成したアイコンの書き出し
アイコンの作成ができたら、画像として書き出したいアイコンを選択して、
左上の「ファイル」→「書き出し」→「選択したオブジェクト...」で書き出しを行います。
今回はPNGで書き出しを行い、使用しました。
3. Xcodeに書き出したアイコン画像を反映させる
XDからローカルにアイコン画像を持ってくることができたら、
FinderからXcode左側のファイルに対してドラッグ&ドロップをします。
画像のように対象のアイコン画像が反映されていればOKです。
4.Xcodeのstoryboard上でViewに画像を反映させる
Xcode上に画像を持ってくることができた後は、反映させたい対象のstoryboardを選択します。
そうしたら、Object LibraryからImage Viewをstoryboard上にドラッグ&ドロップします。
XcodeのバージョンによってUIが一部異なるかもしれませんが、
右上のプラスボタンからObject Libraryを開いて、Image Viewを選択できます。
(自分のバージョンは14.0です)
storyboard上にUIimageViewが表示されたら、UIimageViewを選択し、
右側の調整画面、imageのプルダウンからアップロードした画像を選択します。
アスペクト比が崩れてしまう場合は、調整画面のContent Modeから
Aspect Fitを選択してください。
これで、XDからXcodeに作成したアイコンを反映させる手順は完了です。
参考文献
参考にさせて頂いたサイト
https://rara-world.com/swift-image-layout-aspect/
最後に
一連の流れをぱっと把握できるものがなかったため、メモ程度に投稿しました。
最後まで読んで頂き、有難う御座いました！