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

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

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

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

iPhoneアプリ開発

今回はテキストフィールドを使ってみましょう。

テキストフィールドとは、アプリの利用者に文字を入力してもらうための枠です。

目次

  • 完成イメージ
  • プロジェクトを新規作成
  • ストーリーボードでテキストフィールドを配置
  • オートレイアウトを設定
  • プレースホルダーを設定
  • 実機で確認

 

 

完成イメージ

f:id:bettychang:20160111155551p:plain

完成イメージ絵です。例によってひどいイメージですね。

画面の中央にテキストフィールドを配置します。タップすると枠内に名前が入力できます。枠の中にはグレーで「名前を入力」とユーザーへのメッセージを表示します。

ではやってみましょう。

 

 

プロジェクトを新規作成する

まずはプロジェクトを作りましょう。手順はこちらを参照ください。

swift-bettychang.hatenadiary.jp

名前はなんでもよいです。私は「 textField」としました。

 

ストーリーボードでテキストフィールドを配置する

ストーリーボードを使ってテキストフィールドを用意しましょう。

f:id:bettychang:20160111160338p:plain

  1. 画面左のナビゲータエリアでMain.storyboardを選択
  2. 画面右下のパーツ群からTextというアイコンを選択して中央の画面にドラッグアンドドロップ

 

オートレイアウトを設定

続いてオートレイアウトを設定します。オートレイアウトではパーツの配置位置とサイズを定義します。考え方については、詳しくはこちらの「ボタンを使う」で説明していますのでご参照ください。

swift-bettychang.hatenadiary.jp

 

配置位置の定義

テキストフィールドを配置する場所を定義します。今回は画面の中央に配置します。f:id:bettychang:20160111161156p:plain

  1. 画面中央左のツリーでRound Style Text Fieldを選択
  2. 画面中央右下の|呂アイコンをクリック
  3. Horizontally in ContainerとVertically in Containerにチェック
  4. Add 2 Constraintsを実行

これでテキストフィールドのX軸Y軸の配置場所が定まりました。

 

サイズを定義する

次にテキストフィールドのサイズ(横幅と高さ)を決めます。

f:id:bettychang:20160111162631p:plain

  1. Round Style Text FieldとViewを両方選択(commandキーで)
  2. |-◻︎-|をクリック
  3. Equal WidthとEqual Heightsにチェック
  4. Add 2 Constraintsを実行

これで、テキストフィールドとView(画面全体)のサイズが等しくなりましたので、次にちょうどよいサイズに調整します。

 

横幅の調整

テキストフィールドの横幅を調整します。

f:id:bettychang:20160111163209p:plain

テキストフィールドを選択した状態でXcode画面右側のエリアをみてください。物差しのようなアイコンがあると思いますが、それを選択すると、下のほうにConstraintsというエリアがあります。ここに先ほど設定した制約(サイズ定義、つまり「テキストフィールドとViewのサイズが等しいという設定」)がありますので、値を調整します。

  1. Equal Width to : のEditをクリック
  2. Multiplierの値を0.6に変更し、エンター

これで、テキストフィールドの横幅が画面に対して1:0.6に設定されました。次に高さ(縦幅)も調整します。

 

高さの調整

高さの調整方法は、先ほど実施した横幅の調整と同じですね。

f:id:bettychang:20160111164028p:plain

  1. Equal Hight to: の Editをクリック
  2. Multiplierを0.2に設定しエンター

Multiplierとは倍率のことです。つま画面の縦幅に対して0.2倍に設定したことになります。

これで、テキストフィールドのオートレイアウト定義が整いました。

 

プレースホルダーの設定

プレースホルダーとは、テキストフィールドに薄く書かれたユーザへの案内文です。「名前を入力してください」という文字を設定してみましょう。

f:id:bettychang:20160111165241p:plain

  1. テキストフィールドを選択
  2. 画面右エリアの下矢印アイコンを選択
  3. Placeholderという箇所に、「名前を入力してください」と書きエンター

 

では実機で確認してみましょう。

 

実機で確認

iPhoneかiPadをMacに接続して、端末が認識されたらXcode左上の再生ボタンを押してください。

 

実行画面

f:id:bettychang:20160111165705p:plain

ちょっと縦幅のサイズが大きすぎましたね。

タッチしてみると、キーボードが表示されますので、名前を入力してみましょう。

 

名前を入力してみる

f:id:bettychang:20160111165840p:plain

 

できましたね。タッチしたらキーボードが表示されて文字が入力できるのはTextfieldがもともともっている機能なので、いちいち作る必要はないわけですね。

しかし、今の所、入力して改行を押してもなにも起こりませんし、特になんの役に立たないですね。次回にもう少し続きを作ってみましょう。

次回はユーザが入力した名前を変数に代入して、それをラベルに表示してみましょう。

今回はここまでです。ご覧いただきありがとうございました。