*

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&Objective-Cのまとめエントリー

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

記事を読む

Xcode5&Objective-Cでセグエを利用して画面遷移を実現する。[後編:データのやり取り]

では、セグエを利用した画面遷移を実装しました。 後編では、各画面間でデータのやり取りを行えるよ

記事を読む

Xcode5で画面にナビゲーションバーを配置して利用する。

今回は「ナビゲーションバー」をiPhoneアプリの画面に配置して利用する方法を記載させていただきます

記事を読む

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

Xcodeでアプリ開発を行う時に、イメージ(画像)の表示とイメージ操作時のイベント処理は必須とまでは

記事を読む

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

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

記事を読む

Xcode5でSchemeを利用する。[前編]

Xcode5の「Scheme」の作成方法や使い方のエントリーとなります。 思った以上に内容が多くな

記事を読む

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

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

記事を読む

Xcodeの使い方[エディタエリアのテキストエディタ]

「Xcodeの使い方」に引き続き「 Xcode5のエディタエリアの使い方[テキストエディタの使い方]

記事を読む

Xcode5で画面にツールバーを配置して利用する。

「ナビゲーションバー」と同様に「ツールバー」もナビゲーションコントローラ(UINavigationC

記事を読む

Xcode5の「Auto Layout 」機能の使い方[基礎知識と制約(Align)の設定方法]

Xcode4から導入された「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 ↑