【iOS開発】Swiftで画像を配置して、綺麗にレイアウトする方法【Xcode初心者向け】

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の使い方を勉強していきます。

ABOUTこの記事をかいた人

新卒ノマドエンジニアとして独立し、半年で月収100万円を達成する。フリーランスのエンジニアとして活動しながら、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んでいる。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは好きなことだけ仕事にしています。