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

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

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

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

 

 icon-check 下準備

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

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

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

 

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

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

 

 icon-check OutletとAction

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

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

 

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

 

 

 icon-check プロトコルの実装

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

class ViewController: UIViewController, UITextFieldDelegate {

    @IBOutlet weak var textView: UITextView!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        textView.text = ""
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func textFieldShouldReturn(textField: UITextField) -> Bool {
        textView.text = textField.text
        return true
    }
}

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

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

 

 icon-check 実行

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

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

 

ではまた。

TOP
TOP