読者です 読者をやめる 読者になる 読者になる

ベティーのブログ / 作曲、ボカロ、主に結月ゆかり

ベティーです。歌を作っています。Vocaloid、主に結月ゆかり。

テキストフィールド(textfield)を使う その2

iPhoneアプリ開発

テキストフィールドを使ってみる、その2です。

前回はテキストフィールドを画面に設定するところまでやってみました。こんな状態です。

 

f:id:bettychang:20160113201107p:plain

テキスト入力欄には文字を入力できますが、改行ボタンを押してもなにも反応しません。

 ***前回の記事はこちら***

swift-bettychang.hatenadiary.jp

 

 

では続きをやっていきましょう。やることはこちらです。

ユーザが名前を入力してエンターを押したら、画面下にその名前を表示する

 

完成イメージ

まず中央のテキストフィールドに名前を入れ、改行ボタンを押します。

f:id:bettychang:20160113182131p:plain

ちなみに、右下の赤いのがキーボードの改行ボタンです。

 

改行を押すと、中央に入力した名前が表示されます。

f:id:bettychang:20160113182334p:plain

 

しかし、これだけだと、ちょっと作業レベルまでイメージがつかないため、もうすこし具体的に考えてみましょう。

  • ユーザーがテキストフィールドに入力した名前を、変数に代入する
  • その変数の値をさらにラベルに代入して、名前を表示する

これでやることが具体化されましたね。では目次です。

 

目次

  • このアプリに必要な物
  • 処理の流れ
  • ラベルの用意と制約の設定
  • テキストフィールドとラベルのアウトレットを設定
  • 変数の用意(宣言)
  • ユーザーがエンターを押したときの処理
  • 実機で確認

 

 

 

まず、このアプリに必要なものはなんでしょうか。整理してみましょう。

このアプリに必要なもの

  • ユーザが名前を入力するテキストフィールド 済み
  • 名前を格納する変数 
  • 名前の入った変数を画面に表示するラベル

こんなところですね。ちょっとくどいですが、同様にアプリを動かしたときの処理の動き、流れを順番に書いてみましょう。

処理の流れ

  1. ユーザがテキストフィールドに名前を入力してエンターを押す
  2. エンターを押したら、入力された名前を変数に代入
  3. その変数の値をラベルに代入(ラベル表示)

 

ではやります。前回までのプロジェクトを開いてください。

f:id:bettychang:20160113183340p:plain

テキストフィールドが画面中央にある状態です。以降の作業用に画面下にアシスタントエディターを開いてください(option + command + EnterもしくはメニューからView -> Assistant Editor -> Show Assistant Editor)

 

ラベルの用意と制約の設定

 

ラベルを用意する

まずは名前を表示するためのラベルを用意しましょう。

f:id:bettychang:20160113183836p:plain

  1. 右下のパーツ群からLabelを選択
  2. 中央の画面にドラッグアンドドロップ

次にラベルに制約を設定します。

 

ラベルの制約を設定

ラベルの配置場所とサイズを定義します。今回は下記の設定にします。

  • 配置場所X軸(横軸):中央
  • 配置場所Y軸(縦軸):テキストフィールドの下30の位置
  • サイズWidth(横幅):指定なし
  • サイズHeight(高さ):指定なし

*ラベルの場合、サイズを定義しなくても文字の幅にちょうどよく設定してくれますので、WidthとHeightは定義しなくてもエラーになりません

 

では、上から順に定義していきます。まず配置場所X軸です。画面中央に配置するには、Horizontally in Containerを設定します。

f:id:bettychang:20160113184718p:plain

  • ツリーでLabelを選択
  • |呂をクリック
  • Horizontally in Containerにチェック
  • Add 1 Constraintを実行

次に配置場所Y軸(縦軸)ですが、テキストフィールドの下30の位置に定義します。

*ここで、注意です。30という数字は実数値ですので、例えばiPhoneとiPadでは見え方が変わります。iPhoneの場合は広く、iPadなどのように画面サイズが大きくなるほど、画面全体の幅に対してその割合は小さくなります。見た目的に違和感のない範囲でなら、設定が楽ですし、使っています。

f:id:bettychang:20160113185541p:plain

  • Labelを選択
  • |-◻︎-|をクリック
  • Add New Constraintsの一番上の▼を選択
  • textFieldを選択

f:id:bettychang:20160113185839p:plain

  • 30と入れる
  • Add 1 Constraintを実行

これでラベルの配置場所がきまりました。今回はラベルなので前述のとおり、サイズは定義しません(設定してもいい)

 

ラベルの名前を設定

わかりやすいようにラベルの名前を変更しましょう。私は「nameLabel」としました。

f:id:bettychang:20160113190207p:plain

 

テキストフィールドとラベルのアウトレットを設定

プログラムからラベルやテキストフィールドを操作するためには、アウトレットというものを設定する必要があります。

まずテキストフィールドからやってみましょう。

テキストフィールドのアウトレット設定

f:id:bettychang:20160113190737p:plain

アウトレットの設定方法は画面中央左からパーツを→クリックして、ドラッグアンドドロップでしたね。

  1. textFieldを選択
  2. 右クリックして画面したのプログラムにドラッグ(青い線が伸びる)し、下記にドロップする

class ViewController: UIViewController {

*****ここにドロップする*******

    override func viewDidLoad() {

 

アウトレットに名前をつけます。

f:id:bettychang:20160113191321p:plain

  1.  Name欄に名前を入力
  2. Connect(もしくはエンター)を押す

 

ラベルのアウトレット設定

テキストフィールドと同様に設定します(説明は割愛します)

アウトレットを2つとも設定した状態がこちらです。

f:id:bettychang:20160113191854p:plain

これで、テキストフィールドとラベルの2つをプログラム上から操作できるようになりました。

 

変数の用意(宣言)

次に、変数を用意します。

f:id:bettychang:20160113192244p:plain

アウトレットと同じエリアに、変数を宣言しましょう。

書く内容はこちらです。

var name:String!

 

ここで、Stringの後ろに!マークが付いていますが、とりあえずこの場合必要らしい、くらいの意識で、意味はまたあとで確認しましょう。

 

ユーザが名前を入力してエンターを押したときの処理

ようやくメインの処理まできましたね。

では、名前を入力してエンターを押したときの動作を設定します。まずはユーザがエンターを押したとき、という入れ物を用意します。あたりまえかもしれませんが、利用者が名前を入力してエンターを押すタイミングは人によって違います。アプリを起動してすぐ入れてくれる方もいれば、起動の10分後かもしれません。よって、ユーザが改行(エンター)のボタンを押したら、それを検知する仕組みが用意されています。

ではその仕組みを設定してみましょう。

 

f:id:bettychang:20160113193513p:plain

  1. textFieldを右クリック
  2. プログラムの一番下の「}」の手前にドラッグアンドドロップする

 

下記のポップアップが表示されるので設定していきます。

f:id:bettychang:20160113193801p:plain

  1. Connection : Action
  2. Name: textFieldDidEndOnExit(わかりやすい名前を自分で決める)
  3. Type: UITextField
  4. Arguments : DidEnd On Exit
  5. Connectを実行

 

Connect実行後、下記の文がプログラムに記載されましたか?

f:id:bettychang:20160113194136p:plain

 

ポイントは、Did End On Exitです。これが、テキストフィールドでエンター(改行)を押したとき、というタイミングを意味します。つまり、ユーザが名前を入力し、エンターボタンを押すとこの文が実行される、というわけです。 といってもまだなにも書いてないので、エンターを押してもなにも起こりません。では中身を書いていきましょう。

記述する場所は{}の間です。

 

エンター押した後の動作を設定する

動作させたい内容を再確認しましょう。

  • テキストフィールドのもじを変数に代入する
  • ラベルに変数の値を代入する

これをプログラムの文法で書いてみましょう。

 

テキストフィールドの文字を変数に代入する 

f:id:bettychang:20160113194716p:plain

まず、テキストフィールドを操作するには、用意したアウトレットを使います。textFieldという名前をつけたものです。操作するには、アウトレットの名前を書きます。ここでは、テキストフィールドに書かれた文字を取得したいわけですが、その場合プログラムでは「テキストフィールドのアウトレット名.text」と書きます。

次に、その文字を変数nameに代入するので、「 name = textField.text」となります。イコールの前後には半角スペースが必要ですので注意してください。代入は、イコール記号をつかい、「右のものが左」に入る仕組みですね。

  

ラベルに変数の値を代入する

では、今度はラベルに変数の値を代入しましょう。

f:id:bettychang:20160113195144p:plain

nameLabel.text = name

 

nameがイコールの右側になっていますね。ラベルのもじは、「ラベルのアウトレット名.text」で表します。

 

実機で確認

では動かしてみましょう。私のiPhone5sで確認してみました。

 

テキストフィールドに名前を入力してエンター

f:id:bettychang:20160113195849p:plain

 

結果画面

f:id:bettychang:20160113195956p:plain

 

無事表示されました。

しかし、このままではなにか虚しいですね。名前を入れてもらったら、やはりようこそ!と言いたいところです。変更してみました。

 

ようこそメッセージ

f:id:bettychang:20160113200134p:plain

これは、作業の一番最後のラベルに変数を設定するところを少しいじっています。

こちらです。

 

nameLabel.text = "\(name)様 ようこそ!"

 

ポイントは2つです。

  • ""は文字を直接入力するときに使う
  • \(変数名)で、文字のなかに変数を入れ込むことができる

 

なお、\はバックスラッシュといいます。

システム環境設定 -> キーボード -> 入力設定で下記のチェックをオンにすると¥でなく\を入力できるようになります。

f:id:bettychang:20160113210501p:plain

よく使うので変更しておきましょう。

 

いかがでしたか?このやり方だと、利用者ごとに別々に挨拶をすることができますね。だいぶ変数の利用価値が見えてきましたと思います。

今回はここまでです、お疲れさまでした!ご覧いただきありがとうございました。