XcodeでUIImageViewを追加する方法【初心者向け】
Xcodeで【UIImageView（イメージビュー）を追加する方法】を初心者向けに解説した記事です。UIImageViewを使えば、簡単にアプリ上に画像を表示させることができます。コードの記述方法など基礎から説明しています。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
iPhoneアプリの開発の際に便利な、UIパーツの使い方を初心者向けに紹介する記事です。
今回は、XcodeでUIImageView（イメージビュー）を扱います。
なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。
UIImageViewとは
UIImageView（イメージビュー）は、アプリの画面に画像を表示させることができつUIパーツです。画像の表示方法はくつかありますが、簡単な方法で追加できるのはUIImageViewです。
UIImageViewの使い方
一般的な使われ方として2つあるので、順番に紹介します。
- あらかじめ決まったイメージを表示する
- アプリから画像を設定する
あらかじめ決まったイメージを表示する
アプリのロゴなど、UIとしての静的な画像を配置する場合はこの手法を使います。この場合は、あらかじめプロジェクト内に画像を取り込んでおく必要があります。（Supporting Filesに取り込んでおくと良いでしょう）
やり方は簡単で、Viewにイメージビューをドラッグ&ドロップして、インスペクターで画像サイズに合わせて調整します。
これで画像の枠ができました。
インスペクターであらかじめ取り込んでおいた画像を設定します。これで固定の画像が表示されました。
アプリから画像を設定する
もう1つの方法です。この方法を使うと、取り込んでおいた画像を切り換えて表示することができます。
事前に画像を取り込んでおくことと、画面にUIImageViewをドラッグ&ドロップするところまでは一緒ですが、今回はリサイズを行いません。
今回は、UIImageViewをヘッダーファイルに右ドラッグで接続します。
すると、下記のIBOutletが生成されます。
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
今回表示する画像の名前は「scene.jpg」としています。また、起動時に画像を表示するので、viewDidLoadに下記のように記述します。
UIImage *image = [UIImage imageNamed:@”scene.jpg”];
_imageView.image = image;
これで、生成したインスタンスをイメージビューのimageプロパティに設定することで画像が表示されました。
画像の表示モード
UIImageViewの表示にはいくつか種類がありますので、主要な3つを最後に紹介します。
Scale To Fill
UIImageViewのサイズに画像のサイズを合わせるので、縦横どちらかに伸びた画像になります。
Aspect Fit
アスペクト比を保持したまま、画像のすべてが表示されます。そのため、画像の上下や左右に空白ができる場合があります。
Aspect Fill
アスペクト比を保持したままUIImageView全体に画像を表示します。そのため、画像の大きさによっては上下や左右が見切れてしまいます。
今回の記事は以上です。
さらにXcodeを使いこなしたい場合は、XcodeでUIAlertViewを追加する方法も合わせてご覧ください。
[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。
