テキストフィールドとは、ユーザがテキストを入力するためのコンポーネント（部品）になります。ボタンは、ユーザがクリックするとなんらかのアクションを起こすコンポーネント（部品）になります。
今回は、ボタンを押したときのなんらかのアクションのところをコーディングしていきます。
今回の目標としては、前回作成した"Hello Xcode!!"というラベルの文字をテキストフィールドに入力された文字に変換するというアプリを作成したいと思います。
まずは、前回作成した"Hello Xcode"のプロジェクトを開きます。
Xcodeを立ち上げると、右側の”最近使ったプロジェクト一覧エリア”に前回作成した"Hello Xode"のプロジェクトが表示されていますので、そちらを選択します。
※前回の記事をご覧になられていない方は、こちらを参照し、"Hello Xcode"というラベルを作成してください。
User Interface(見た目)の設定
はじめに”見た目”の設定をしていきたいと思います。Main.Storyboardを開いて、前回同様ユーティリティエリアから、テキストフィールドとボタンをドラッグ＆ドロップで配置します。テキストフィールドはサイズを変更（横延ばし）します。
はい！これで見た目は完成です。では、早速コーディングをしていきたいと思います。
コンポーネント（部品）のコード化
では、先ほど追加したテキストフィールドと前回作成したラベルをコーディングする際の変数として扱えるように設定します。
まず、Xcodeのツールバーのボタンよりエディタエリアを２画面表示にし、左側にMain.Storyboard、右側にViewController.swiftを表示させます。
次に、Hello Xcode!!のラベルをcontrolを押しながら右側のViewController.swift、つまりコードが書かれているエリアへドラッグ＆ドロップします。この変数は、class ViewController内にて使用したいため、overrride func viewDidLoad()の上あたりに持ってくるようにしましょう。
すると、名前を定義する画面が出てきますので、connectionがoutletになっていることを確認し、Name欄に適当な変数名を入力します（今回は"label"という名前をつけたいと思います）。これは、コード内で使用するコンポーネントの名前がlabelで、外部定数として扱うということを意味します。そして、右下のConnectボタンを押すことにより、右側の欄に変数としての定義が追加されます。
次は、テキストフィールドの設定です。ラベルと同じようにドラッグ＆ドロップします。
名前を定義する画面が出てきましたら、同じくconnectionがoutletになっていることを確認し、Nameを入力後、Connectボタンを押します。今回は、"textField"と名前をつけました。
【重要】ボタンを押したときの動作の設定
最後にボタンの設定です。ラベルやテキストフィールドと同様にボタンをドラッグ＆ドロップでViewController.swiftに持っていきます。名前を定義する画面が出てきましたら、”connectionのoutletをActionに変更"します。つまり、今までは変数として、部品の設定をしていたのですが、今回は"Action（ボタンが押されたときの動作）"として設定することを意味しています。その後、Name欄を入力し、Connectを押します。
そうすると右側のコード欄に以下のような定義が生成されます。
public class MainActivity extends Activity {
@IBAction func button(sender: AnyObject) {
//ボタンが押された際のアクション（動作）を
//ここに記載していく
}
このコードの{}内に記載されたコードが、ボタンが押されたときに動作するコードになります。では、この{}内に以下のように記載してみます。
@IBAction func button(sender: AnyObject) {
//ラベルにテキストフィールドの文字を代入（表示）する
label.text = textField.text
}
これは、ボタンが押されたら、テキストフィールドに記載された文字（textField.text）をラベルに表示（label.text）するということを記載したコードになります。
シミュレータでの動作確認
ここまでできたら、iPhoneシミュレータを起動してみます。
するとまずは、下記のようにHello Xcode!!という文字が表示されます。
では、試しにテキストフィールドに"Hello World!!"と入力し、ボタンを押してみましょう。
はい！上記の通り、ラベルがテキストフィールドに記載した文字に変わりました。
では次回は、テキストフィールド、ボタンを使って、簡単な四則演算つまり簡易電卓を作ってみたいと思います。
0 件のコメント:
コメントを投稿