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

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プロパティに設定することで画像が表示されました。

 

 

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

画像の表示モード

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

 

Scale To Fill

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

 

Aspect Fit

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

 

Aspect Fill

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

 

今回の記事は以上です。

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

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