*

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アドセンス




関連記事

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

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

記事を読む

Xcode5のEmpty Application templateでStoryboardを利用する。

Xcode5のEmpty Application templateでStoryboardを利用する方

記事を読む

Xcodeのナビゲーションコントローラの使い方[「Single View Application」テンプレートからナビゲーションコントローラを利用する方法]

「Master-Detail Application」テンプレートを利用すれば、始めから「ナビゲーシ

記事を読む

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

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

記事を読む

no image

Xcode5のナビゲーションエリア[問題ナビゲータ]の使い方

Xcode5のナビゲーションエリアの使い方では、アプリ開発に最も不可欠は、プロジェクトとシンボルナビ

記事を読む

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

本エントリーではGCD(Grand Central Dispatch)を利用したiOSのマルチスレッ

記事を読む

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

ではXcodeが既に用意しているデリゲートを利用した実装例について説明させていただきました。

記事を読む

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

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

記事を読む

Xcodeの使い方

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

記事を読む

Xcode5でUnitTest(XCTestフレームワーク)を利用してみる。

Xcode5(iOS7対応バージョンの統合開発)を利用するので、当然言語はObjective-Cです

記事を読む

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 ↑