XcodeでUIImageViewを追加する方法【初心者向け】

Xcodeで【UIImageView(イメージビュー)を追加する方法】を初心者向けに解説した記事です。UIImageViewを使えば、簡単にアプリ上に画像を表示させることができます。コードの記述方法など基礎から説明しています。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

iPhoneアプリの開発の際に便利な、UIパーツの使い方を初心者向けに紹介する記事です。

今回は、XcodeUIImageView(イメージビュー)を扱います。

 

なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。

 

UIImageViewとは

UIImageView(イメージビュー)は、アプリの画面に画像を表示させることができつUIパーツです。画像の表示方法はくつかありますが、簡単な方法で追加できるのはUIImageViewです。

 

 

UIImageViewの使い方

一般的な使われ方として2つあるので、順番に紹介します。

  • あらかじめ決まったイメージを表示する
  • アプリから画像を設定する

 

あらかじめ決まったイメージを表示する

アプリのロゴなど、UIとしての静的な画像を配置する場合はこの手法を使います。この場合は、あらかじめプロジェクト内に画像を取り込んでおく必要があります。(Supporting Filesに取り込んでおくと良いでしょう)

やり方は簡単で、Viewにイメージビューをドラッグ&ドロップして、インスペクターで画像サイズに合わせて調整します。

imageview

XcodeScreenSnapz001

XcodeScreenSnapz003

 

これで画像の枠ができました。

XcodeScreenSnapz002

 

インスペクターであらかじめ取り込んでおいた画像を設定します。これで固定の画像が表示されました。

XcodeScreenSnapz005

 

アプリから画像を設定する

もう1つの方法です。この方法を使うと、取り込んでおいた画像を切り換えて表示することができます。

事前に画像を取り込んでおくことと、画面にUIImageViewをドラッグ&ドロップするところまでは一緒ですが、今回はリサイズを行いません。

 

今回は、UIImageViewをヘッダーファイルに右ドラッグで接続します。

XcodeScreenSnapz006

XcodeScreenSnapz007

すると、下記のIBOutletが生成されます。

@property (weak, nonatomic) IBOutlet UIImageView *imageView;

 

今回表示する画像の名前は「scene.jpg」としています。また、起動時に画像を表示するので、viewDidLoadに下記のように記述します。

UIImage *image = [UIImage imageNamed:@”scene.jpg”];
_imageView.image = image;

 

これで、生成したインスタンスをイメージビューのimageプロパティに設定することで画像が表示されました。

iOS SimulatorScreenSnapz001

 

 

[PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中

画像の表示モード

UIImageViewの表示にはいくつか種類がありますので、主要な3つを最後に紹介します。

 

Scale To Fill

UIImageViewのサイズに画像のサイズを合わせるので、縦横どちらかに伸びた画像になります。

XcodeScreenSnapz008

 

Aspect Fit

アスペクト比を保持したまま、画像のすべてが表示されます。そのため、画像の上下や左右に空白ができる場合があります。

XcodeScreenSnapz009

 

Aspect Fill

アスペクト比を保持したままUIImageView全体に画像を表示します。そのため、画像の大きさによっては上下や左右が見切れてしまいます。

XcodeScreenSnapz010

 

今回の記事は以上です。

さらにXcodeを使いこなしたい場合は、XcodeでUIAlertViewを追加する方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。