*

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

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


スポンサードリンク



当然ですが、iOS向けのアプリケーションを作成するためには、
画面に画面コンポーネント(UIコンポーネント)であるボタンやラベルを配置し、それを制御する必要があります。

本エントリーはXcode6利用(言語はSwift)で画面コンポーネントを利用するための基本的な事項を取り扱います。
利用しているXcodeの詳細はバージョンはXcode6.0.1です。

本エントリーの内容は以下の通りです。

  1. 検証を実施するプロジェクトの作成
  2. PickerViewを画面に追加し初期表示データをセット
  3. 開始ボタンと停止ボタンを画面に追加しボタンタップ時の処理も実装
  4. 作成したアプリケーションの動作確認

 

1 検証を実施するプロジェクトの作成と説明

templateは「Single view Application」
product nameには「UiComponentSample」
Company identifierには「com.example」
LanguageにはSwift
をそれぞれ指定してプロジェクトを作成します。

スクリーンショット 2014-10-13 15.32.48

このエントリーの次にアニメーションを表示するエントリーを作成しようと考えていますので
(といってもパラパラ漫画レベルですが・・・)

ちなみに利用するのは「ドロイドちゃん」です。
横向き、前向き、後ろ向きがあります。
c6ce2e3e4376ae926ef5bd4e4e1fb0bf

キャラクターの向きと、アニメーションの速度を指定するコンポーネント、開始ボタン、停止ボタンを画面に配置します。
キャラクターの向きと、アニメーションの速度に関してはPicker viewを利用します。

2 PickerViewを画面に追加し初期表示データをセット

PickerViewの追加

ナビゲーションエリアのMain.storyboardをクリックし、エディタエリアにストーリーボードを表示します。

スクリーンショット 2014-10-13 15.59.47

ユーティリティエリアのツールボックスからPicker viewを以下のようにドラッグ&ドロップします。
スクリーンショット 2014-10-13 16.27.16

PickerViewに表示するデータを指定する処理の実装

PickerViewのOutletsのdelegateをViewControllerに接続

まずは、Picker viewのOutletsのdelegateをViewControllerに接続します。
Picker viewを選択した状態でユーティリティエリアのコネクションインスペクタ(Connections inspector)を表示します。
スクリーンショット 2014-10-13 20.41.00

Outletsのdelegateをクリックし、ViewController(画面の上部にある黄色のアイコン)にドラッグ&ドロップします。
スクリーンショット 2014-10-13 20.44.51

これでPicker viewのOutletsのdelegateがViewControllerに接続されました。
スクリーンショット 2014-10-13 20.52.02

ViewController.swiftでUIPickerViewDelegateを実装

デリゲートの詳細につきましては「Xcode(Swift)のデリゲートとプロトコルの使い方」を参照ください。

まずはViewControllerクラスでUIPickerViewDelegateを実装するとの宣言を追加します。

実装が必要なメソッドは
Picker viewのカラムの数を指定するメソッド
func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int

PickerViewの各カラムで選択可能な要素の数を指定するメソッド
func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int

PickerViewの各カラムで表示する項目をを指定するメソッド
func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int)
の3つとなります。

この3つのメソッドの実装後のViewController.swiftは以下のようになりました。

PickerViewの動作確認

とりあえずPickerViewが思った通りに表示・動作するか確認するために実行してみます。
iPhone6のシュミレーターで実行した結果の画面は以下のようになりました。
スクリーンショット 2014-10-13 21.06.29

うーん・・・、利用しているディスプレイの解像度が低いのでiPhone6のシュミレーターは表示しきれない
ためスクロールバーが表示されているのはしょうがないのですが、
(新しいモニター欲しいっす)
表示するカラムは2個あると指定しているにも関わらず1つ目しか表示されていません。

これはオートレイアウト機能によって引き起こされています。
オートレイアウトをOffにしても良いのですが、PickerViewの位置を固定する制約を追加してみます。

PickerViewを選択した状態で以下の画像の赤枠部分をクリックします。
スクリーンショット 2014-10-13 21.16.31

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

表示された画面で以下の赤丸を付けた部分をクリックします。
値がマイナスになっている所がありますが、PickerViewの幅が大きすぎるからです。
本来はPickerViewの幅をもう少し小さくしてから制約を追加すべきだったのですが、画面イメージ取ってから気付いちゃいました・・・
スクリーンショット 2014-10-13 21.19.57

すると4つの点線が実践になります。この状態で「Add 4 Constraints」ボタンをクリックします。
これによってPickerViewのルートViewからの相対位置の制約が追加されます。
スクリーンショット 2014-10-13 21.27.03

これでうまくいくはずです!
再度実行してみました。
スクリーンショット 2014-10-13 21.38.13

うん、うん、思ったように表示されました。

PickerViewをViewControllerにOutlet接続

PickerViewで選択されている値をViewControllerから参照する必要がありますので
PickerView自体をViewControllerにOutlet接続します。

まずはアシスタント(assistant)エディタ表示ボタンをクリックします。
スクリーンショット 2014-10-13 21.47.17

エディタエリアの左側にMain.storyboardを、右側にViewControllerを表示します。
左側はナビゲーションエリアでMain.storyboardをクリックすれば表示されます。

「Control」ボタンを押しながらPickerViewを選択し、ViewController.swiftにドラッグ&ドロップします。
スクリーンショット 2014-10-13 22.48.42

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

NameにpickerViewを指定し「Connect」ボタンをクリックします。
スクリーンショット 2014-10-13 22.54.36

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

Outlet接続はコネクションインスペクタから確認できます。
スクリーンショット 2014-10-14 21.36.22

これでpickerViewを介して画面で選択した値が取得可能になりました。

3 開始ボタンと停止ボタンを画面に追加しボタンタップ時の処理も実装

アニメーションの開始ボタンと停止ボタンの追加

まずは開始ボタンを配置します。
スクリーンショット 2014-10-14 15.12.57

配置したボタンをダブルクリックしテキストを開始に変更します。
スクリーンショット 2014-10-14 15.16.33

同様に停止ボタンを配置しテキストを変更します。
スクリーンショット 2014-10-14 15.28.55

実際のアプリケーションでは開始ボタンと停止ボタンにもオートレイアウトの制約を追加するのですが
今回はオートレイアウトの説明はどうでもよいので制約は追加しませんので、実行時にPickerViewと重ならない部分に配置してください。

実行した時の画面は以下のようになればOKです。
スクリーンショット 2014-10-14 15.59.45

開始ボタンと停止ボタンタップ時の処理の追加

今回はPickerViewで選択されている値と、どのボタンが押されたかをUIAlertViewで表示します。
具体的にはUIAlertViewのタイトルに「開始」ボタンor「停止」ボタンから呼ばれたかが分かる文字列、
UIAlertViewのメッセージには、”方向:” + PickerViewで選択された方向 + 改行 + “速度:” + PickerViewで選択された速度
を表示するようにします。

開始ボタンの処理の追加

アシスタント(assistant)エディタでMain.storyboardとViewController.swiftを表示した状態で
「Control」ボタンを押しながら「開始」ボタンを選択し、ViewController.swiftにドラッグ&ドロップします。
スクリーンショット 2014-10-14 18.11.21

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

ボタンがタップされた時の動作を指定したいので、Connectionで選択されている内容をActionに変更します。
スクリーンショット 2014-10-14 18.16.01

すると画面は以下のように変わりますので
nameにstartと入力して「Connect」ボタンをクリックします。
スクリーンショット 2014-10-14 18.20.03

これで「開始」ボタンがタッブされた時に呼び出されるメソッドが追加されました。
中身は当然空っぽです。

タップ時のイベントハンドラーはコネクションインスペクタから確認できます。
スクリーンショット 2014-10-14 21.41.30

実際の処理の実装後のstartメソッドは以下のようになりました。

停止ボタンの処理の追加

「開始」ボタンと同様にボタンがタッブされた時に呼び出されるメソッド(名前はstop)を以下のように実装しました。
startとほとんど同じで冗長ですが・・・

4 作成したアプリケーションの動作確認

初期表示

iPhone6シュミレーターで実行すると以下のような画面が表示されます。
スクリーンショット 2014-10-14 21.16.05

開始ボタンタップ時の動作

まずはPickerViewの値を変更せずに「開始」ボタンをクリックしてみます。
すると以下のアラート画面が表示されました。
スクリーンショット 2014-10-14 21.19.39

次にPickerViewの値を変更して「開始」ボタンをクリックしてみます。
PickerView上で変更した値が正しくアラート画面のメッセージに反映されていることが確認できます。
スクリーンショット 2014-10-14 21.21.37

停止ボタンタップ時の動作

最後に「停止」ボタンタップ時の動作を確認してみます。
スクリーンショット 2014-10-14 21.30.45

「Xcode6&Swiftで画面コンポーネント(UIコンポーネント)配置して利用するための基本」は以上です。

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

 
関連オススメ書籍


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

Xcode6-Beta2でSwiftのユニットテスト(Unit Test)をXCTestフレームワークで試してみる。

タイトルの通りですが、Xcode6-Beta2でSwiftのユニットテスト(XCTestフレームワー

記事を読む

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

前回はSwiftの概要をザックリと説明させていただきました。 今回は「メソッドの宣言方法」をよ

記事を読む

Swift(Xcode6-Beta2)でStringのメソッド(stringByReplacingCharactersInRange:withString:)のコンパイルが通らない時の対処

SwiftでStringのメソッド stringByReplacingCharactersInRa

記事を読む

Xcode6-Beta3でSwiftでBDDを行うためにQuickを導入しようと思ったが、all-product-headers.yaml:4:13: error: Could not find closing ]!が発生する

そろそろQuickを利用しようと思いまたまたハマりました。というかハマり中です。 「Quick

記事を読む

Xcode6(Swift)のデリゲートとプロトコルの使い方

Xcode(Objective-C)のデリゲートの使い方では利用言語がObjective-Cの時のデ

記事を読む

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

Clone the repository Create a using Quick Pro

記事を読む

Swift入門(Xcode6のXCTestフレームワークで学ぶ) 第一回「Swiftの概要」 

Swiftの簡単な説明 アップルのiOS(iOS8以降)およびOS Xのためのプログラミング言語。

記事を読む

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

前回はObjective-CにおけるNSThreadクラスの簡単な利用例を取り扱いましたが今回は、ほ

記事を読む

Xcode6_Beta5&SwiftでUITableViewでUINibを使ったカスタムセル(UITableViewCell)を利用する方法

前回は、「Xcode5&Objective-CでUITableViewでUINibを使ったカ

記事を読む

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

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

記事を読む

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 ↑