iPhoneアプリ開発をする上で絶対にさけては通れない、画像の配置とレイアウト。
画像をレイアウトする場合、位置だけではなくきちんとアスペクト比も合わせないと、崩れた状態で表示されてしまいます。
今回は、Xcodeを使って、iOSアプリに画像を綺麗に配置する方法を紹介します。
画像をXcodeにアップする
画像を配置するためには、まずXcodeの左端のディレクトリ・ファイル一覧ナビにアップしたい画像をドラッグ・アンド・ドロップしましょう。
この部分に、画像をアップすると、
このようにアップした画像がファイル一覧に追加されます(今回はupload-img.png)というファイルを追加しました。
アップした画像を配置する
次にアップした画像をstoryboardに表示させましょう。
【◎】のマーク(Object Library)から、【Image View】を選択して、ドラッグ・アンド・ドロップでstoryboardに持っていきます。
そうすると、
このような形で、UIimageViewがstoryboard上に表示されます。
次は、このUIimageViewに先程アップしたupload-img.pngを紐づけます。
このUIimageViewを選択した状態で、Xcode右側のImage Viewの調整画面の一番上のImageというセレクトボックスから先程アップしたupload-img.pngを選択します。
アスペクト比を調整する
右側のImage ViewのImageのセレクトボックスから、upload-img.pngを選択すると、storyboard上に以下のように画像が表示されるようになります。
しかし、せっかく画像が表示されたのに、アスペクト比を調整していないため、縦に縮んだ状態で表示されてしまいました。
これは、UIImageViewがデフォルトで、
View → Content Mode → Scale To Fill
を選択しているからです。
先程、Imageの選択したXcode右側のImage Viewのすぐ下の、
View→Content Mode
から、【Aspect Fit】を選択してください。
こうすることで、以下のように、アスペクト比を正常のまま綺麗に画像を表示することができます。
これで、画像をiOSアプリに綺麗に表示する方法の紹介は完了です！
プログラミングよりもXcodeの使い方が難しい
PHPやNode.js、perlといったプログラミング言語を経験したことがあるのですが、iOS開発ではswiftというプログラミング言語を覚えることよりも、Xcodeの使い方をマスターするほうが難しい印象です笑
しかし、iphoneアプリを作るためには必ず通らなければならない道なので、これからもXcodeの使い方を勉強していきます。
