Ios-development-with-swift2-making-app-interactive
アプリをインタラクティブにする
この章では、iOSがユーザーとの対話に提供するいくつかの新しいものとUI機能を紹介します。 私たちは追加されます-
- テキストフィールド
- ラベル
- ボタンとそのアクション
さらに、動的ラベルのコードを迅速に記述し、ユーザーが入力した入力の計算結果を表示します。
「アプリをインタラクティブにする」というタイトルは、アプリケーションをユーザーと対話させることを意味します。 そのため、ここではユーザーがアプリケーションを操作および制御できるようにします。
テキストフィールドを追加する
ここで、再び新しいプロジェクトを作成します。 Xcodeで新しいプロジェクトを作成する方法について既に説明したように、簡単に管理できるはずです。
さて、「My Dog’s Age」という新しいプロジェクトを作成します。このプロジェクトを作成したら、「Main.storyboard」ファイルをクリックして、以下の手順に従います。
- ユーティリティペインの検索バー（Xcodeの右下隅にあります）で、ラベルを検索します。 そのラベルをクリックして、main.storyboard/（表示）にドラッグします。 次に、ラベルをダブルクリックして、名前を「My Dog’s Age」に変更します。
- 「テキストフィールド」を検索し、そのテキストフィールドをクリックしてビューにドラッグします。 このテキストフィールドが選択されている間に、属性インスペクターに移動し、キーボードタイプを数字パッドに変更して、下のスクリーンショットに示すように数字のみを入力できるようにします。
ビューにボタンを追加する
検索バーでボタンを検索します。 それをビューにドラッグし、ダブルクリックして、名前を「Calculate」に変更します。
ビューにラベルを追加する
ラベルを検索し、ボタンの下に追加して、年齢の出力を表示します。 ダブルクリックしてラベルを空にし、少し広げて、完全な出力が見えるようにします。
ヒント-ダブルクリックで名前を変更できない場合は、アイテムを選択し、ユーティリティペインで-属性インスペクター、そのアイテムのタイトルがあり、そこに変更して、次のスクリーンショットに示すようにReturnキーを押します。
これで、Main.storyboardは次のスクリーンショットのようになります。
ここで終わりではありません。今、main.storyboardに画像を追加する方法について説明します。
ビューに画像を追加する
まず、プロジェクトに追加する画像を検索する必要があります。 以下の画像をダウンロードできます-
この画像をプロジェクトにコピーするか、この画像をプロジェクトにドラッグすると、次のウィンドウが表示されます。
必ず選択し、必要に応じてアイテムをコピーし、グループを作成してください。 [完了]ボタンをクリックします。
次に、ユーティリティペイン→オブジェクトライブラリに移動し、画像ビューを検索します。 画像ビューをビューにドラッグします。 これで、ビューは次のスクリーンショットのようになります。
次に、この画像ビューをクリックして、ビューにドラッグするだけで、ユーティリティ領域に画像を選択するための「画像」という名前のオプションがあることがわかります。 その矢印をクリックすると、利用可能なすべての画像が表示されます。 この新しく追加された画像ビューを選択したことを確認してください。
画像ビューの画像を選択したので、最終的なビューは次のスクリーンショットのようになります。 これが、このアプリケーションのmain.storyboardで行う唯一のことです。
これは、すべてのUI要素を追加した後のビューです。
この後、コードの論理的な実装があり、このステップまで完了すると続行します。
次に、右上隅にあるアシスタントエディターボタンをクリックして、View Controllerを選択し、アシスタントエディターを開きます（下のスクリーンショットを参照）。
これで、ビューは次のスクリーンショットのようになります。
アプリケーションに機能を追加する
これまで、私たちのアプリケーションは単なる静的アプリケーションであり、何にも応答せず、ユーザーとの対話で変化しません。
UI要素をコードに接続する主要な部分が登場し、ユーザーの入力に応じてUIが変更されます。 *“ ViewController.swift” *ファイルは、現在のビューのコードを記述するメインファイルです。
注-現在、単一のビューを使用していますが、後で複数のビューについて説明します。 さまざまなファイルがさまざまなビューを制御する方法について説明します。
テキストフィールドをクリックし、Ctrlキーを押しながらカーソルを画面の2番目の部分にドラッグします。 viewcontroller.swiftファイル。 ビューと迅速なファイルを結ぶ青い線が表示されます。 マウスを放すと、入力を求めるポップアップが表示されます。
ヒント-入力フィールドに似た名前を名前フィールドに入力します。 重要な点の1つは、名前にスペースを含めることはできないため、前のイメージに示すように名前を書くことができることです 名前に複数の単語がある場合、最初の単語は小文字で記述する必要があり、次のすべての単語の最初のアルファベットは大文字になります。
同じ手順に従い、残りの要素を接続します。 テキストフィールドとラベルのタイプはOutletであることに注意してください。 ただし、ボタンを追加する際、タイプは以下のスクリーンショットに示すようにアクションでなければなりません。
この段階で、viewcontroller.swiftは次のようになります-
さて、あなたのボタンアクションの中に、次の行を追加します-
var age = Int(enteredAge.text!)! * 8
yearsLabel.text = String(age);ヒント-swiftで行を終了するためにセミコロンを追加する必要はありませんが、セミコロンを挿入しても、コンパイラはエラーを報告しません。
上記のコードでは、最初の行で変数「年齢」を宣言しています。これについては次の章で説明します。 次に、ユーザーが入力した値を整数に変換し、8を掛けて割り当てます。
2行目では、出力ラベルに「年齢」の値を割り当てます。 この段階で、View Controllerは次のようになります-
次に、アプリケーションを実行します。これが表示されます。
ヒント-最初の実行時にキーボードが表示されない場合は、シミュレーターを開き、ハードウェアをクリックしてキーボードに移動し、ソフトウェアキーボードの切り替えをクリックします。
次の章では、 Playground という新しいツールについて説明します。 また、変数、辞書、配列ループ、クラス、オブジェクトなど、より迅速な概念も学習します。
