*

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

公開日: : 最終更新日:2014/10/30 Objective-C ,


スポンサードリンク



Xcodeでアプリ開発を行う時に、イメージ(画像)の表示とイメージ操作時のイベント処理は必須とまではいかなくとも、重要な処理であると言えます。

前々回のエントリーでは「Xcode5のプロジェクトへのファイルやフォルダの追加方法」を扱わせていただきました。

前回のエントリーでは「Xcode5でイメージ(画像)を表示&操作する[前編]」を扱わせていただきました。

本エントリーではこの流れを受けて、イメージがタップされた時の処理を実装します。

実際に開発するアプリでは、初期表示時に1と書かれたイメージが表示され、タップ時に1ずつ増えていき、5まで行くとまた1に戻るとの動きを実現します。

利用しているXcodeはXcode5(5.1)となります。

本エントリーでは、以下の順番で説明させていただきます。

  1. Xcode5でイメージ(画像)を表示する[前編]の終了時点のアプリの修正
  2. タップ時の処理の実装
  3. その他でイメージを扱うアプリ開発時に役に立つ内容

 

1 Xcode5でイメージ(画像)を表示する[前編]の終了時点のアプリの修正

前回のエントリーでは「Xcode5でイメージ(画像)を表示する[前編]」で記載させていただいた「2.2 UIImageViewをストーリーボードに配置後、表示イメージを選択する。」の方法でイメージを表示するように変更します。

なぜ2.2かと言うと、Xcodeのストーリーボードの考え方に一番合致しているからです。
ストーリーボードに配置したUIImageViewのクリックイベントでイメージを切り替えるようにすれば思っている処理が実現できるはずです。

「2.1 メディアライブラリからドロップする。」だと、イメージをドロップして配置するので、イメージ自体を操作する感があり、処理が素直な感が無いためです。まあ、中身的には2.2と同じ結果になるかもしれないのですが・・・

プロジェクトフォルダの削除とプロジェクトの再作成

と言う事で、プロジェクトのフォルダを消して、同じ物を再作成した方が安全で手っ取り早いですので、フォルダ削除後に「Single View Application」テンプレートで。プロジェクト名がUiImageViewSampleのプロジェクトを作成してください。残りの設定は全てデフォルトのままの設定としてください。

あ!、imagesの追加もお願いいたします。

UIImageViewの追加

UIImageViewをストーリーボードに配置

UIImageViewをストーリーボードに配置します。特に問題は無いと思います。

UIImageViewのサイズ変更

配置後にサイズを変更します。表示するイメージのサイズは100×100ですので、UIImageViewは110×110とします。スクリーンショット 2014-03-18 15.54.28

ViewのModeを変更

UIImageViewの真ん中にイメージを表示するために、ViewのModeをCenterに設定します。
スクリーンショット 2014-03-18 16.00.02

UIImageViewをOutlet接続

ViewControllerからUIImageViewを利用するために、Outlet接続をする必要があります。
Outlet接続の基本的な知識は「Xcode5で画面コンポーネントを利用するための基本 」に記載しておりますので、この知識を押さえてない場合は是非ご覧ください。iOS(アイフォン)アプリ開発には重要で基本的な知識となります。

以下の画像の様に、UIImageViewを選択した状態で「Control」ボタンを押しながら画像の矢印の示す位置にドロップします。
スクリーンショット 2014-03-18 17.09.11

すると以下の画像の赤枠のウインドウが表示されますので、nameにimageViewを指定し、「Connect」ボタンをクリックします。
スクリーンショット 2014-03-18 17.13.25

ViewController.hに

の記述が追加されました。

UIImageViewでイベントハンドラを利用できるように設定変更を行う

イベントハンドラってJavaや.NETでは普通に使いますが、Xcodeでも問題無いですよね・・・
スマートフォン(アイフォン、アンドロイド)向けのアプリ開発でもイベントハンドラとの呼び名で良いか不明です。

UIImageViewは他の画面コンポーネントとは異なり、デフォルト設定では、イベントハンドラを扱う設定になっていませんので設定変更が必要です。画面の「User Interaction Enabled」にチェックを入れてください。Tagの値も0以外に変更する必要があります(0はルートのウインドウ)
スクリーンショット 2014-03-18 17.38.22

なお、この設定変更はコーディングでも可能です。
ViewController.mのviewDidLoad内に以下のコードを追加することで同様の設定変更が可能です。

とりあえず1回目の実行

とりあえず今の状態で実行してみます。「Command」+「R」

見事に真っ白です。
スクリーンショット 2014-03-18 18.03.55

アイフォンアプリの開発の初学者の方が良く陥るのですが以下の2点です。
(アイフォンに限らず、アンドロイドも同様の事が言えますので、アプリ開発を行う方は注意が必要です。)

  • 実際には表示されているけどボーダーも背景も指定無しなので表示されていないように見える。
  • 他のViewが全面に表示されていて、実装者が思ったように表示されない。

上述の2点目ですね、imageViewは表示されているのですが、分からないですね、はい。背景を設定しましょう!
とりあえず私は黒に変えました。
スクリーンショット 2014-03-18 18.05.55

やはり、ちゃんと表示されていますね。
スクリーンショット 2014-03-18 18.07.50

touchesBegan:withEvent:のオーバーライド

ViewController.mでtouchesBegan:withEvent:をオーバーライドして、imageViewがタップされた時の処理を実装します。

ということで、ViewController.mにtouchesBegan:withEvent:を追加します。
まずは、タップされた時にログを出力するだけの実装としています。

このタイミングで再度実行してみます。本来のアプリ開発でしたら、できるだけコードを組み上げて、最小限の確認実行(本来はテスト駆動開発やビヘイビア駆動開発を行うのが日本のIT業界の有るべき姿だと常々思っています。楽するために!、残業減らすために!、後で痛い目に遭わないために!、やるべき事が一杯あると思います。まあ当然ですが、楽できる開発手法として使わないと逆に首が絞まりますが・・・)でPGを終えるのですが、今は現状確認&現状提示がとっても必要ですので・・・

実行前に以下の画像の赤枠部分をクリックしてコンソール等を表示しておきます。
そうしないとログが確認できません。
スクリーンショット 2014-03-18 18.22.39

表示時の画面イメージは以下の通りです。
スクリーンショット 2014-03-18 18.24.08

では実行して、imageViewをクリックしてみます。
すると以下の様にコンソールに「imageViewがタップされた!」とのログが出力されます。
スクリーンショット 2014-03-19 12.09.20

タッブ時の処理が確認できましたので、いよいよイメージの切り替え処理の実装を残すのみです。

・imageViewに表示する初期画像にone.pngをセットします。
スクリーンショット 2014-03-19 14.43.20

・ViewController.hを以下の様に変更します。
表示したいイメージ名を保持する配列と、その配列のどの要素が今表示されているかを保持するプロパティを追加しました。
ViewController.mのtouchesBegan:withEvent:でこの2つのプロパティを利用してimageViewに表示しているイメージを変化させて行こうという考えです。

・ViewController.mを以下の様に変更します。
処理内容はソース内のコメントをご覧ください。

・実行結果
実行結果は以下の様になりました。思った通りの動きですね。

実行結果(初期表示)
スクリーンショット 2014-03-19 14.55.42

実行結果(1回タップ後)
スクリーンショット 2014-03-19 14.56.52

実行結果(2回タップ後)
スクリーンショット 2014-03-19 14.58.55

実行結果(3回タップ後)
スクリーンショット 2014-03-19 14.59.42

実行結果(4回タップ後)
スクリーンショット 2014-03-19 15.00.36

実行結果(5回タップ後)
スクリーンショット 2014-03-19 14.55.42

その他でイメージを扱うアプリ開発時に役に立つ内容

UIImageのイメージキャッシュ処理

UIImageのmageNamedを使って画像を生成すると自動的に画像がキャッシュをします。このキャッシュをクリアする方法は存在しないようです。
アプリケーションで利用する画像が少ないし、サイズも小さい場合は問題ありません。
その場合はキャッシュされている分処理が高速になるので、アプリケーション的には有利に働きます。

逆に、利用する画像数が多い、かつサイズも大きい場合はキャッシュがメモリ空間を圧迫します。
その場合はUIImageのimageWithContentsOfFileメソッドを利用します。イメージの読み込みはimageNamedの方がかなり高速です。全てオンメモりの方が早いのは当然です。

one.pngを指定してUIImageを作成するサンプルコードは以下の通りです。

そこまで厳密に考えてアプリ開発を行う必要はないのかも知れませんが、メモリ利用量が多くて、UIImageのキャッシュの利用が多い場合は、利用回数が少なく、サイズの大きいファイルにはimageWithContentsOfFileを利用する。との選択を行えば良いと言えます。

Retinaディスプレイ用の画像ファイル

最近のiPhone、iPadではRetinaディスプレイが当たり前ですが、作成されているアプリで非Retinaディスプレイのデバイスにも対応しなければいけない場合もありますよね。
この場合で、Retina、非Retinaで表示するイメージを変更したい場合は、Retina用のイメージはone@x2.png、非Retina用のイメージはone.pngとの名前にしておけば、iOSが自動的に2つのイメージを適切に選択してくれます。

当然ですが、うちのアプリは非Retinaなんて動作保証の対象外です。との場合は、このような考慮は不要となります。

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


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

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

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

記事を読む

Xcode5を軽快に利用するためのショートカット[基本編]

「Xcode5のエディタエリアの説明 」 「Xcode5のエディタエリアの説明 [中編]」 「X

記事を読む

Xcode5の「Auto Layout」機能の使い方[制約の編集方法]

Xcode5の「Auto Layout」機能の使い方と Xcode5の「Auto Layout

記事を読む

Xcodeの使い方[ツールバー]

Xcode5(iOS7対応バージョンの統合開発)の「ツールバー」の使い方のエントリーとなります。

記事を読む

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

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

記事を読む

Xcode&Objective-Cのまとめエントリー

エントリーもまずまず揃ってきたので、まとめのエントリーを作成しておこうと思います。 基本的には、各

記事を読む

Xcode5のプロジェクトへのファイルやフォルダの追加方法

Xcodeでアプリ開発を行う時に、イメージ(画像)の表示は必須な処理であると言えます。 本エントリ

記事を読む

Xcode(Objective-C)のデリゲートとプロトコルの使い方[前編]

Xcode(Xcode5でも同様)でアプリ開発をしていて、少し複雑な事をしようとするとデリゲートと言

記事を読む

Xcodeのユーティリティエリアの使い方[ソースファイル表示時]

本エントリーでは、Xcodeの「ユーティリティエリア」の使い方を説明させていただきます。 利用

記事を読む

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

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

記事を読む

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 ↑