*

Xcode6とSwiftでイメージ(画像)やアニメーションを表示する方法

公開日: : 最終更新日:2015/04/29 Swift ,


スポンサードリンク



本エントリーでは、Xcode6(言語はSwift)を利用してイメージ(画像)やアニメーションを表示するアプリケーションの作成方法を説明させていただきます。

なお、本エントリーは
「Xcode6&Swiftで画面コンポーネント(UIコンポーネント)を配置して利用するための基本」
の続編となっておりますので、上記エントリーをまずはご覧ください。

作成するアプリケーションの説明

前回エントリーにおける未実装部分の確認

前回のエントリーで説明させていただいた通り、「ドロイドちゃん」を動作させるアプリケーションです。
PickerViewで方向と早さが指定でき、「開始」ボタンでアニメーションが開始され、「停止」ボタンでアニメーションが停止します。
イメージの表示コンポーネント(UIImageView)と実際のアニメーション処理以外は前回エントリーで実装済みです。

実際のアプリケーションの画面イメージ

実際の画面イメージは以下の通りです。
スクリーンショット 2014-10-16 13.48.56

なお、前回エントリーの終了時点のViewController.swiftは以下の通りとなっております。

UIImageViewを画面に配置し固定のイメージを表示

まずは、UIImageViewの配置と実施すべき設定の説明を行います。
それに先立って、アニメーションに利用するイメージをプロジェクトに追加しておきます。

アニメーションに利用するイメージをプロジェクトに追加

アニメーションに利用するファイルはdroidフォルダに格納しています。
スクリーンショット 2014-10-16 15.54.14

実際のファイルは以下のリンクからダウンロードしてご利用ください。
droidフォルダを圧縮した物

このままではXcodeで利用できませんのでXcodeのプロジェクトに追加する必要があります。
Xcodeのプロジェクトへのファイルやフォルダの追加の詳細につきましては
「Xcode5のプロジェクトへのファイルやフォルダの追加方法」を参照ください。Xcode6でもほとんど変わっていませんので参考になると思います。

以下の画面のようにイメージファイルが保管されているフォルダをXcodeのプロジェクトにドラッグ&ドロップします。
スクリーンショット 2014-10-16 13.23.51

するとファイルの登録オプション画面が表示されますので、以下のようにオプションを指定してから「Finish」ボタンをクリックしてください。
スクリーンショット 2014-10-16 13.24.32

追加後にプロジェクトナビゲーターで「droid」を展開すると以下のようになっているはずです。
スクリーンショット 2014-10-16 13.25.00

UIImageViewを画面に配置

ドロイドちゃんのアニメーションを表示するためのUIImageViewを画面に配置し必要な設定変更を行った後に
オートレイアウト(Auto Layout)の制約を追加します。

UIImageViewの配置と必要な設定変更

Main.storyboardをエディタエリアに表示した状態で「オブジェクトライブラリ」を表示後に
UIImageViewを選択し、画面にドラッグ&ドロップします。
スクリーンショット 2014-10-16 13.32.54

画面に配置されたUIImageViewを選択し、アトリビュートインスペクタ(Attributes Inspector)のViewのModeを「Aspect Fit」に変更します。
スクリーンショット 2014-10-16 16.24.49

「Aspect Fit」を指定すると、イメージの縦横比を維持しつつ、UIImageViewに収まる最大サイズのイメージが表示されます。
ViewのModeで指定可能な値は以下の通りです。Xcode5と同じ選択肢ですね。

選択肢 意味 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

UIImageViewのAuto Layoutの制約を追加

Auto Layout機能を有効にしていますので、UIImageViewに制約を追加する必要があります。
Auto Layout機能もXcode5からほとんど変わっておりませんので
詳細は
「Xcode5の「Auto Layout」機能の使い方[Pin制約の設定方法]」
Xcode5の「Auto Layout 」機能の使い方[基礎知識と制約(Align)の設定方法]」をご参照ください。

まずはUIImageViewを選択後に以下の画像の赤枠部分をクリックします。
スクリーンショット 2014-10-16 18.38.59

すると以下の画面が表示されます。
スクリーンショット 2014-10-16 18.41.19

上下左右の基準コンポーネントからの距離を指定する制約を追加します。
まずは以下の赤枠のテキストボックスの値を50に変更し、フォーカスを他のテキストボックスに移動します。
スクリーンショット 2014-10-16 18.41.19

すると点線だった所が実線に変わりました。
スクリーンショット 2014-10-16 18.45.30

実線に変わったことが、その値で上にある基準コンポーネントからの距離の制約を指定していることを意味します。
(実際に制約が追加されるのは「Add Constraints」がクリックされたタイミングです。)
再度実線をクリックすると点線に変わりますし、再度点線をクリックすると実線に変わります。
スクリーンショット 2014-10-16 18.52.18

同じように以下の画像のように値を設定し「Add 4 Constraints」ボタンをクリックします。
スクリーンショット 2014-10-16 18.54.05

どのような制約が登録されているかは「Document Outline」で確認できます。
「Document Outline」は以下の画像の赤枠部分をクリックすることで表示されます。
スクリーンショット 2014-10-16 19.01.21

今回設定している制約は相対値ですのでView ControllerのルートViewは以下のConstraintsに各制約が表示されていますが、任意のコンポーネントの幅や高さなどの単一コンポーネントに関する制約は、そのコンポーネントの下のConstraintsに表示されます。
スクリーンショット 2014-10-16 19.04.33

UIImageViewに初期表示するイメージを指定

UIImageViewに何も表示されないのでぱっと見がイマイチですので、初期表示するイメージを指定します。
どのイメージでも良いのですが「ドロイドちゃん_前へ_1.gif」を表示してみます。

一番簡単な方法はメディアライブラリ(Media library)からドラッグ&ドロップする方法です。
スクリーンショット 2014-10-16 19.17.19

Main.storyboardの画面は以下のようになりました。
スクリーンショット 2014-10-16 19.20.12

「開始」、「停止」ボタンタップ時の処理の実装

いよいよアニメーション部分の実装です。

UIImageViewをoutlet接続

UIImageViewに対して処理を書かないといけないのでUIImageViewをViewController.にoutlet接続します。
スクリーンショット 2014-10-16 19.41.4

名前にimageViewを指定して「Connect」ボタンをクリックします。
スクリーンショット 2014-10-16 19.34.15

ViewController.swiftに以下の1行が追加されました。

「開始」ボタンの処理の実装

いよいよアニメーション処理です。

UIImageViewのanimationImages

アニメーション処理を行うためには、複数のイメージを指定する必要があります。
これはPickerViewで指定された方向によって変わるイメージ群に対応するUIImageの配列となります。
例えば、「横へ」が選択された場合は「ドロイドちゃん_横へ_1.gif」、「ドロイドちゃん_横へ_2.gif」、「ドロイドちゃん_横へ_3.gif」、「ドロイドちゃん_横へ_4.gif」
の各UIImageを含む配列となります。

UIImageViewのanimationRepeatCount

繰り返し回数を指定します。
繰り返し回数については今回は無限に実行するようにします。

UIImageViewのanimationDuration

アニメーションの一回りにかける時間(秒)をセットします。
各イメージの切り替わる時間については、基準値(PickerViewで1.0が選択された時の値)を1秒として、
基準値をPickerViewで指定された値で割った結果を設定します。

「開始」処理の実装内容

既に前回のエントリーでタップ時のイベントハンドラーとしてstartメソッドが登録されていますのでこの内部実装を変更するだけです。

変更後のstartメソッドは以下のようになりました。定数はクラスメンバとして定義すべきですね・・・

「停止」ボタンの処理の実装

「停止」処理の実装内容

既に前回のエントリーでタップ時のイベントハンドラーとしてstopメソッドが登録されていますのでこの内部実装を変更するだけです。

完成したアプリケーションのデモ

実際の動作イメージは以下のようになります。

関連オススメ書籍

関連オススメ書籍


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

Swift入門[公式リファレンスのチュートリアルのSteps2の後半]

「Swift入門」では、Steps2の前半まで説明させていただきました。 本エントリーでは、

記事を読む

Xcode6とSwiftで画面コンポーネント(UIコンポーネント)を配置して利用するための基本

当然ですが、iOS向けのアプリケーションを作成するためには、 画面に画面コンポーネント(UIコンポ

記事を読む

Swift入門[公式リファレンスのチュートリアルのSteps2の前半]

「Swift」と「Xcode 6」を少しずつさわっていこうと思ってはいるのですが、「Xcode 6

記事を読む

Xcode6の正式版がリリースされApp Storeからダウンロードしインストール可能になりました。

ついにSwiftが利用できるXcode6の正式版がリリースされました。 ブラウザからMac App

記事を読む

Swift(Xcode6-Beta2)でMagicalRecord関連の処理を含んだDAOクラスのユニットテスト(UnitTest:XCTestフレームワーク)を実装する時にハマった事

SwiftでMagicalRecord関連の処理を含んだDAOクラスを作成し、ユニットテスト(XCT

記事を読む

Xcode6-Beta3でSwiftでBDDを行うためにQuickを導入し動作させる手順

Clone the repository Create a using Quick Pro

記事を読む

Xcode6(xcode_6_beta_7、Xcode 6 GM seed)のインストール方法

2014年9月22日追記 Xcode6の正式版がリリースされApp Storeからインストール可能

記事を読む

iOS(Xcode6とSwift)におけるマルチスレッド(非同期)処理の実装方法その2[GCD(Grand Central Dispatch)の利用]

「iOS(Xcode6とSwift)におけるマルチスレッド処理の実装方法その1」ではNSThread

記事を読む

2014年の秋のAppleのプレスイベントとXcode6-beta-7のインストール方法

2014年の秋のAppleのプレスイベント いよいよAppleは、米国西海岸時間9月9日午前10時

記事を読む

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

iOS7開発者向けお勧め本紹介を以前に紹介させていただきまいたが、今回は同じ著者(大重美幸様)の本を

記事を読む

Comment

  1. […] で、今回はXcode6とSwiftでイメージ(画像)やアニメーションを表示する方法を参考にしながら進めていく途中で、コンパイルエラーに悩んだので、その対処法を書いておきます。 […]

    • おふ×3 より:

      コメントありがとうございます。
      UIImageを作成し一度変数に入れ、その変数のnilチェックをした後に!で変換した変数をリストに追加するように修正しまいた。
      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 ↑