Swift言語で始めるiOSアプリ入門 – テキスト入力と表示

技術

どうも、松山事務所の石丸です。

先日、自宅のPCデスクのイスが壊れたので、ちょっと奮発してエルゴヒューマンのイスを買っちゃいました。
やっぱりいい椅子はすわり心地がいいっすね!

Swift言語で始めるiOSアプリ入門 - UITableViewを使ってみる

さて今回は前回の UITableView を使って簡易メモアプリを作ろうとしたのですが、肝心なメモの入力する部分をやってなかったので、さくっとテキスト入力とその表示をやってみましょう。

開発環境はOS X Yosemite(ver10.10.5)、Xcode(ver7.0)になります。

 

 icon-check 下準備

今回もいつもの iOSの Single View Applicationプロジェクトを作成したら、画面左の Project Navigator から Main.storyboard 選択し、テキストを入力する TextField、入力したテキストを表示する TextView を配置します。

Swift言語で始めるiOSアプリ入門 - UITableViewを使ってみる_画像1

前回までは実行時のコントロールの位置ずれに目をつぶっていましたが、今回はがんばってみます。

まずは配置した TextField を選択して InterfaceBuilder の右下にある Pinボタンを押下します。Pinボタンを押下すると隣接するコントロールとの間隔を設定するダイアログが表示されるので、上下左右の間隔を次のように入力し設定を適用します。

Swift言語で始めるiOSアプリ入門 - UITableViewを使ってみる_画像2

 

TextView も同じ手順で次のように間隔を設定します。

Swift言語で始めるiOSアプリ入門 - UITableViewを使ってみる_画像3

TextFieldと TextViewが上下に並び、画面幅いっぱいになりました。

 

 icon-check OutletとAction

入力されたテキストを TextView に表示するため、まずは TextView をソースコードに接続しましょう。

Main.storyboard を選択してアシスタントエディタに切り替え、controlキーを押しながら TextViewをソースコードエディタへドラッグ・アンド・ドロップします。

Swift言語で始めるiOSアプリ入門 - UITableViewを使ってみる_画像4

 

TextField で入力したテキストを TextViewへ表示するタイミングとしてはボタンをトリガーにしても良いのですが、今回は return(改行)されたタイミングにしたいと思います。このイベントで処理を行うために TextFieldのプロトコルを実装します。
controlキーを押しながら TextField を ViewController へドラッグ・アンド・ドロップして、delegate を接続します。

Swift言語で始めるiOSアプリ入門 - UITableViewを使ってみる_画像5

 

Swift言語で始めるiOSアプリ入門 - UITableViewを使ってみる_画像6

 

 icon-check プロトコルの実装

ViewController クラスを次のように修正します。

1行目:クラス定義に UITextFieldDelegate プロトコルを追加。
7行目:画面表示時に TextView の内容をクリア。
15行目〜18行目:TextFieldで return(改行)されたタイミングで実行するメソッドを実装。

return(改行)されたタイミングで、TextField から入力されたテキスト取得して TextViewに設定しています。

 

 icon-check 実行

画面上部の TextFieldで入力して return(改行)すると、すぐ下の TextViewに入力したテキストが表示されます。

Swift言語で始めるiOSアプリ入門 - UITableViewを使ってみる_画像7

次回は今までの内容を組み合わせて簡易なメモアプリを作ってみたいと思います。

 

ではまた。

 

̃Gg[͂ĂȃubN}[Nɒlj