*

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

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


スポンサードリンク



iOSアプリケーションは当然ですが、画面がありますよね。

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

これは、Xcodeに限らず、Javaで言うとswtのデザイナーツール.Netの画面デザイナーも同様の事をしていますので、
言わば、アプリ開発には必要不可欠であると言えます。

本エントリーはXcode5(iOS7対応バージョンの統合開発環境)で画面コンポーネントを利用するための基本的な事項を取り扱います。

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

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

作成されたアプリケーションのMain.storyboardを確認

「Single view Application」でプロジェクトを作成したので
Main.storyboardがプロジェクトに追加されています。
スクリーンショット 2013-12-22 12.13.23

ナビケーションエリアのMain.storyboardをクリックすると
エディタエリアは上記の画面に変わるはずです。
クリックしてもグラフィカルな画面ではなく、ソースが表示される場合は
下記画像の赤枠の部分をクリックすることで表示できます。
スクリーンショット 2013-12-22 12.22.28

エディタエリアの下記画像の赤枠部分をクリックするとstoryboardに含まれているコンポーネントの階層構造が表示できます。
スクリーンショット 2013-12-22 12.24.06

storyboardに含まれているUIViewの階層構造表示後の画面
スクリーンショット 2013-12-22 12.26.48

見ていただいて分かる通りですが、View Controllerの配下にViewが1つ存在しています。

View Controllerに画面コンポーネントを追加

View Controllerにボタンとラベルを追加

プロジェクト作成時点から存在しているView(以降ではルートViewと記載)
にボタンとラベルを追加します。
スクリーンショット 2013-12-22 12.35.10

スクリーンショット 2013-12-22 12.37.36

追加後に各コンポーネントをダプルクリックし表示しているテキストを
「Viewの順番を変更」、「ルートView」に変更します。
スクリーンショット 2013-12-22 12.41.35

ボタンとラベルをOutlet接続

ボタンとラベルをコードから参照できるようにするためにOutlet接続します。

Xcodeでは画面にコンポーネントを配置しただけではプログラムからコンポーネントの各種プロパティ
を参照できません。Visual Studioとは考え方が違いますね。

Main.storyboardを開いた状態で、以下の画像の赤枠部分をクリックします。
スクリーンショット 2013-12-22 14.52.53

すると画面が以下のように変わります。
スクリーンショット 2013-12-22 14.55.19

Outlet接続するためにViewController.hをエディタエリアの右側に表示します。
下記画像の赤枠の部分をクリックします。
スクリーンショット 2013-12-22 14.59.01

すると以下のメニューが表示されるので、ViewController.hをクリックします。
スクリーンショット 2013-12-22 15.03.33

このメニューにViewController.hが表示されない場合は、ナビゲーションエリアでViewController.hを選択し
エディタエリアにViewController.hを表示し、
Main.storyboardをクリック後に再度上述のメニューを表示してください。

「Viewの順番を変更」ボタンを選択後に「control」ボタンを押しながら
@interface ViewController ()と@endの間にドラッグします。
スクリーンショット 2013-12-22 16.17.01

すると以下の画像の赤枠の画面が表示されるので、Nameに任意の値を指定し、Name以外は変更せずに「Connect」ボタンをクリックします。
スクリーンショット 2013-12-22 16.17.40

これで「Viewの順番を変更」ボタンへのOutlet接続ができました。

同様に「ルートView」もOutletしておきます。
Outlet接続後のViewController.hは以下のようになりました。

「Viewの順番を変更」ボタンのクリックイベントの追加

「Viewの順番を変更」ボタンをクリックした時のイベント処理を追加します。
Outlet接続時と同様に「Viewの順番を変更」ボタンを選択後に「control」ボタンを押しながら
@interface ViewController ()と@endの間にドラッグします。
スクリーンショット 2013-12-22 16.17.01

今度は、
ConnectionにAction
NameにclickButton
TypeにUIButton
EventにTouchUp Inside
を選択し「Connect」ボタンをクリックします。
スクリーンショット 2013-12-22 16.32.41

この操作でViewController.hとViewController.mに
– (IBAction)clickButton:(UIButton *)sender
が追加されます。当然実装内容は空です。

とりあえずclickButtonが正しく動作するかを確認するためにアラートを表示してみます。
ViewController.mのclickButtonメソッドを以下のように変更しました。

アプリケーションをエミューレータで実行します。
するとまず以下の画面が表示されますので「Viewの順番を変更」ボタンをクリックします。
スクリーンショット 2013-12-22 16.49.21

するとアラート画面が表示されます。
スクリーンショット 2013-12-22 16.50.22

ボタンクリック時にラベルのテキストを変更する処理を追加

最後に「Viewの順番を変更」ボタンクリック時にラベルのテキストにクリック回数が表示されるようにしてみます。

ボタンがクリックされた回数を保持するプロパティをViewController.hに追加します。
追加の後のViewController.h

ViewController.mのclickButtonメソッド内でcounterを利用して
rootViewLabelのテキストを変更します。
変更後の内容は”ボタンが押された回数=” + counter
となります。

変更後のViewController.mのclickButtonメソッドは以下のようになりました。

早速実行してみると、なんでやねん!、…が表示されて全ての文字列が表示されません。
スクリーンショット 2013-12-22 17.24.51

まあ当然ですね・・・
ラベルのサイズが可変な訳ないですよね、.Netでもそうです。
設定されているテキストが表示できるようにサイズを変更する
メソッドsizeToFitの呼び出しを追加しました。

うまく動作するようになりました。
スクリーンショット 2013-12-22 17.28.53

「Xcode5で画面コンポーネントを利用するための基本」のエントリーは以上です。

Xcode6とSwift環境での同じ内容の
「Xcode6とSwiftで画面コンポーネント(UIコンポーネント)を配置して利用するための基本」
もございますので是非ごらんください。

他にもXcode5に関するエントリーがございますので、
Xcode5&Objective-Cのまとめエントリー
をご覧いただければ幸いです。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

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

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

記事を読む

Xcode5のナビゲーションエリア[プロジェクト、シンボル、検索]の使い方

Objective-Cでコーディングを行うための統合開発環境のXcodeの利用方法のエントリーです。

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

Xcode5&Objective-Cでセグエを利用して画面遷移を実現する。[前編:モックの作成]

iPhoneアプリの画面遷移と言えば、真っ先に挙がるのが「ナビゲーションコントローラ」なのですが

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

前回は、NSStringの定義、分割、検索の各処理を確認しました。 二回目は、NSStringの比

記事を読む

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 ↑