*

Xcode5でイメージ(画像)を表示&操作する[前編]

公開日: : 最終更新日:2016/12/05 Objective-C ,


スポンサードリンク



Xcodeでアプリ開発を行う時に、イメージ(画像)の表示は必須な処理であると言えます。
前回のエントリーでは「Xcode5のプロジェクトへのファイルやフォルダの追加方法」を扱わせていただきました。

これを受けて、本エントリー(Xcode5でイメージ(画像)を表示&操作する[前編])では、Xcode5のプロジェクトへのイメージの登録とアプリケーションでの表示までの内容を扱わせていただきます。

イメージタップ時の動作の実装は、

「Xcode5でイメージ(画像)を表示&操作する[後編]」

のエントリーで記載させていただきます。

「Xcode5でイメージ(画像)を表示する[後編]」では、初期表示時に1と書かれたイメージが表示され、タップ時に1ずつ増えていき、5まで行くとまた1に戻るとの動きのアプリケーションを実装します。

利用しているXcodeはXcode5(5.1)となります。最近マイナーアップしたんですね・・・

再度復習となりますが、本エントリーでは、以下の順番で説明させていただきます。

  1. プロジェクトへの既存ファイルの登録
  2. Xcode5におけるイメージ表示部分の実装


なお、利用するプロジェクトは、「Xcode5のプロジェクトへのファイルやフォルダの追加方法」で作成したUiImageViewSampleとなります。

前回のエントリーをご覧になっていない方は、作業に先立ってプロジェクトを作成ください。「Single View Application」テンプレートで。プロジェクト名がUiImageViewSampleのプロジェクトを作成します。残りの設定は全てデフォルトのままの設定としてください。

1 プロジェクトへのイメージの登録

イメージファイルの準備とプロジェクトへの追加

今回作成するアプリケーション(って程の物ではないですが)に利用する5つの画像ファイルを含むフォルダは以下のリンクからダウンロード可能ですので
images.zip
をダウンロードし、解凍してください。

このフォルダをプロジェクトに追加したいので、以下のようにドラッグ&ドロップします。
スクリーンショット 2014-03-16 16.07.45

ドロップ後に以下の様な画面が表示されます。イメージの登録オプション画面です。
以下の様な選択肢を選んだ後、「Finish」ボタンをクリックしてください。
イメージの登録オプション画面の詳細は
「Xcode5のプロジェクトへのファイルやフォルダの追加方法」をご覧ください。
スクリーンショット 2014-03-16 16.10.55

追加後のプロジェクトナビゲータで以下の様に表示されていればOKです。
スクリーンショット 2014-03-16 16.17.27

2 Xcode5におけるイメージ表示部分の実装

イメージの表示の実装の方法は3つあります。

  1. メディアライブラリからドロップする。
  2. UIImageViewをストーリーボードに配置後、表示イメージを選択する。
  3. 全ての処理のコードを手動で実装する。

2.1 メディアライブラリからドロップする。

これが一番簡単です。ユーティリティエリアのメディアライブラリから表示したい画像をドロップするだけです。
アプリ開発時に任意のイメージを単純に表示した場合はこの方法がお勧めです。

ユーティリティエリアのメディアライブラリは以下の画像の赤枠の部分をクリックすれば表示されます。
スクリーンショット 2014-03-16 16.37.11

クリック後の画面です。例のチープな数字の画像が表示されています。
スクリーンショット 2014-03-16 16.39.15

早速one.pngをドラッグしてみます。
Main.storyboardを表示した状態でone.pngをドラッグします。
スクリーンショット 2014-03-16 16.42.29

追加されました。
スクリーンショット 2014-03-16 16.42.54

2.2 UIImageViewをストーリーボードに配置後、表示イメージを選択する。

ストーリーボードに配置

まずは、ユーティリティエリアのオブジェクトライブラリを表示します。
以下の画像の赤枠部分をクリックします。
スクリーンショット 2014-03-16 16.37.11

その後、オブジェクトライブラリで「Image View」をCanvasにドロップします。
「Image View」はUIImageViewのことです。
スクリーンショット 2014-03-17 13.45.55

UIImageViewが配置できました。
スクリーンショット 2014-03-17 13.52.17

UIImageViewに表示するイメージを設定

UIImageViewを選択したまま、アトリビュートインスペクタを表示します。
以下の画像の赤枠部分をクリックすればアトリビュートインスペクタが表示されます。
スクリーンショット 2014-03-17 13.54.45

以下の画像の様に「Imaga View」の「image」でone.pngを選択します。
スクリーンショット 2014-03-17 14.01.12

「Imaga View」の「image」の項目が見えない状態になっている時もあります。その場合は、以下の画像の赤枠部分をクリックすることで表示されるようになります。
スクリーンショット 2014-03-17 14.05.37

とここで、なんでやねん!、って思われている方が殆どだと思います。
画像が「2.1 メディアライブラリからドロップする。」に比べてごっつう大きいです。

これはViewのMode設定がデフォルト値である「Scale To Fill」になっており、UIImageViewで画像を表示すると、UIImageViewのサイズが優先されone.pngが拡大表示されるからです。
表示する画像の指定前にUIImageViewのサイズを小さくし、ViewのModeを任意の値に変更しておくと意図した表示になります。
スクリーンショット 2014-03-17 14.12.22

指定可能な値は以下のようになります。UIViewContentModeは「2.3 コーディングのみで表示する」で利用するため記載しています。

選択肢 意味 UIViewContentMode
Select To Fill UIImageViewの大きさ UIViewContentModeScaleToFill
Aspect Fit 画像の縦横比を維持しつつ、UIImageViewに収まる最大サイズ UIViewContentModeScaleAspectFit
Aspect Fill 画像の縦横比を維持しつつ、UIImageViewに空白領域が生じない最大サイズ UIViewContentModeScaleAspectFill
Redraw 基本的にはAspect Fillと同じ、UIImageViewのサイズ変更に追随してリサイズ UIViewContentModeRedraw
Center 画像のサイズを維持し、UIImageViewの中央に配置。UIImageViewのサイズが画像のサイズより小さいと切れる UIViewContentModeCenter
Top 画像のサイズを維持し、UIImageViewの上部に配置。画像が切れる可能性はCenterと同様 UIViewContentModeTop
Bottom 画像のサイズを維持し、UIImageViewの下部に配置。画像が切れる可能性はCenterと同様 UIViewContentModeBottom
Left 画像のサイズを維持し、UIImageViewの左部に配置。画像が切れる可能性はCenterと同様 UIViewContentModeLeft
Right 画像のサイズを維持し、UIImageViewの右部に配置。画像が切れる可能性はCenterと同様< UIViewContentModeRight
Top Left 画像のサイズを維持し、UIImageViewの左上部に配置。画像が切れる可能性はCenterと同様 UIViewContentModeTopLeft
Top Right 画像のサイズを維持し、UIImageViewの右上部に配置。画像が切れる可能性はCenterと同様 UIViewContentModeTopRight
Bottom Left 画像のサイズを維持し、UIImageViewの左下部に配置。画像が切れる可能性はCenterと同様 UIViewContentModeBottomLeft
Bottom Right 画像のサイズを維持し、UIImageViewの右下部に配置。画像が切れる可能性はCenterと同様 UIViewContentModeBottomRight

2.3 コーディングのみで表示する

そのままですが、コードエディタだけを利用してイメージを表示します。

ViewController.mに必要なコードを追加

ViewController.hに@propertyのUIImageViewのメンバを追加し、ViewController.mのviewDidLoadで初期化して・・・
との流れの処理を考えていたのですが、@propertyじゃなくてIBOutletじゃないとObjective-Cと言う言語ではだめなのですね・・・
IBOutletとと手で書くだけではIBOutletとして認識されないですよね・・・

main.mのmainメソッドは@autoreleasepool {}で囲まれているのでそんなことしなくてもゴミにならないし、
self.viewから参照されるようになるんだから、思わぬタイミングでリリースされることも無いから問題ないか・・・

すいません、どうでもよい記載ですね、でもバッサリ切り捨てるわけにもいかないんですよ!、だってここがJavaやC++、及びC#との大きな違いですから。

結果としてViewController.mのviewDidLoadを以下の様に変更しました。
まだ言及できていませんでしたがUIImageViewのサイズを50*50とし、イメージより小さくしています。

今回はソースコードのみでの実装なので、実行して確認してみます。

「Xcode5を軽快に利用するためのショートカット[基本編] 」にも記載させていただきましたが、
実行は、「Command」ボタン+「R」ボタンですね。是非、実際のアプリ開発時にもご利用ください。

実行結果の画面は以下の様になりました。
スクリーンショット 2014-03-17 18.29.02

次に、UIImageViewのcontentMode(UIViewContentModeCenterとUIViewContentModeBottomLeft)を設定した時の動作イメージを確認してみます。

まずはUIViewContentModeCenter(画像のサイズを維持し、UIImageViewの中央に配置)です。
合わせてimageViewとone.pngの位置関係が明確になるように、imageViewの背景を黒にしています。
ViewController.mのviewDidLoadは以下の様になりました。

実行結果は以下のようになりました。確かにイメージのサイズは元のままで、imageViewの中央に位置しています。
スクリーンショット 2014-03-17 18.38.33

今度はUIViewContentModeBottomLeft(画像のサイズを維持し、UIImageViewの左下部に配置)に変更した実行結果です。
こちらもにイメージのサイズは元のままで、imageViewの左下部に位置しています。
スクリーンショット 2014-03-17 18.42.19

以上の様にcontentModeの設定によっては、Viewとしての階層構造的には親のUIImageViewをイメージが飛び出して表示できるようになります。
逆に言うと、飛び出た部分を考慮して、対応を行う必要があるとのことです。

なお、UIImageViewから飛び出た部分の画像(Viewでも同様)を非表示にする事が可能です。
UIImageViewのclipsToBoundsにYESをセットすると非表示になります。
スクリーンショット 2014-03-19 16.16.21


「Xcode5でイメージ(画像)を表示&操作する[後編]」
に続く。

「Xcode6とSwiftでイメージ(画像)やアニメーションを表示する方法」もありますのでこちらも是非ご覧ください。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

Xcodeの使い方[エディタエリアのテキストエディタ]

「Xcodeの使い方」に引き続き「 Xcode5のエディタエリアの使い方[テキストエディタの使い方]

記事を読む

Xcodeの使い方[エディタエリアの環境設定]

「Xcodeの使い方」に引き続き「Xcodeの使い方[エディタエリアの環境設定]」となります。

記事を読む

Xcodeのユーティリティエリアの使い方[ストーリーボード表示時の「File」,「Quick Help」,「Identity」]

本エントリーでは、「Xcodeのユーティリティエリアの使い方」に引き続き、「ストーリーボード」表示時

記事を読む

Xcode5&Objective-CでUITableViewでUINibを使ったカスタムセル(UITableViewCell)を利用する方法

本エントリーでは、Xcode5のテーブルビューにUINibを使ったカスタムセル(UITableVie

記事を読む

Xcode5の「Auto Layout」機能の使い方[簡単な画面レイアウトを構成してみる。]

「基礎知識と制約(Align:アライメント)の設定方法」 で「Auto Layout」機能の利

記事を読む

iOS(Xcode6とObjective-C)におけるマルチスレッド処理の実装方法その1[NSThreadクラスの簡単な利用例]

「iOS(Xcode6)におけるマルチスレッド処理の実装方法その1」に引き続きiOSに置けるマルチス

記事を読む

Xcode&Objective-Cの文字列処理をユニットテスト(XCTestフレームワーク)で確認する。[NSStringを数値に変換する方法]

「Xcode&Objective-Cの文字列処理をユニットテスト(XCTestフレームワーク)で確認

記事を読む

iOS(Xcode6)におけるマルチスレッド処理の実装方法[iOSのマルチスレッド処理の概要]

iOSにおけるマルチスレッド処理の実装方法を数回に分けて説明させていただきます。 開発環境のXco

記事を読む

Xcode5&Objective-Cでセグエを利用して画面遷移を実現する。[後編:データのやり取り]

では、セグエを利用した画面遷移を実装しました。 後編では、各画面間でデータのやり取りを行えるよ

記事を読む

Xcode5でイメージ(画像)を表示&操作する[後編]

Xcodeでアプリ開発を行う時に、イメージ(画像)の表示とイメージ操作時のイベント処理は必須とまでは

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

動画で英語を学習できるiOSの無料アプリCapTubeをリリースいたしました。

個人では初となるiOSアプリをリリースいたしました。 何度もリジ

no image
Ruby on rails4系でBootstrapを利用するためのtips

MacでRuby on rails4系のBootstrapを利用しよう

no image
Java、Eclipse、JUnit関連のエントリーの移行のお知らせ

Java、Eclipse、JUnit関連のエントリーは http:/

iOS8開発者向けお勧め本紹介[詳細! Swift iPhoneアプリ開発 入門ノート Swift 1.1+Xcode 6.1+iOS 8.1対応]

iOS7開発者向けお勧め本紹介を以前に紹介させていただきまいたが、今回

Swift入門(Xcode6のXCTestフレームワークで学ぶ) 第二回「関数(メソッド)とクロージャーの利用方法」

前回はSwiftの概要をザックリと説明させていただきました。 今

→もっと見る

Optimization WordPress Plugins & Solutions by W3 EDGE
PAGE TOP ↑