[ライブラリ] Eurekaの導入と利用〜その3　入力欄を作成する

はじめに

前回までの記事では、Eurekaを使用するための前準備を行いました。

今回からは、いよいよ設定画面の作成方法を見ていきます。

過去記事は以下を参照してください。

• [ライブラリ] Eurekaの導入と利用〜その1（ライブラリのインストール）
• [ライブラリ] Eurekaの導入と利用〜その2（設定画面の下準備）

入力欄を作成しよう

Eurekaを使用して作成できる設定画面はTableViewで作られていますが、View ControllerにTableViewを貼り付けたりdataSourceやdelegateの設定をする必要はありません。

前回説明したように、Eurekaのライブラリをインポートし、継承元のクラスをFormViewControllerに設定すれば、設定画面作成の準備は完了となります。

import UIKit 
import Eureka // 追加 
class EurekaViewController: FormViewController { // 継承元を変更

}

設定画面の初期化コードは、View Controllerが読み込まれたときに行いますので、viewDidLoad()メソッドの中に書くとよいでしょう。

設定画面を作成する

1.フォームの準備

はじめにフォームを1つ準備してあげる必要があります。フォームを準備するには「form」と記述するだけです。

form

2.セクションの作成

フォームができたらセクションを作成します。

1つの設定画面には、複数のセクションを持たせることができます。セクションを作成するには、Eureka専用の演算子「+++」を使用します。以下のようにすると、先ほど作成したformに、タイトルが「セクション1」というセクションを追加することができます。

form
+++ Section("セクション1")

3.入力欄の作成

セクションが作成できたら、今度は入力欄を作成してみましょう。Eurekaは様々な入力欄を簡単に作成できるようになっていますが、ここでは1行入力欄と複数行の入力欄を作成することとします。

入力欄を作成するにはEureka専用の演算子「<<<」を使用します。

1行の入力欄を作成するにはEurekaが持つTextRowというクラスを用します。また入力欄の行にはタイトルとプレースホルダを設定することができるようになっています。

コード例は以下の通りです。先ほど作成したセクション1の下に1行入力欄を追加しています。row.titleは行の先頭に表示するタイトル設定用のプロパティで、row.placehoderがプレースホルダ（透かし文字）用のプロパティです。

form
 +++ Section("セクション1")
 <<< TextRow { row in
 row.title = "タイトル"
 row.placeholder = "タイトルを入力"
}

次に複数行の入力欄を作成してみましょう。こちらはTextAreaRowというクラスを使用します。複数行の入力欄はタイトルを付けることができないようでが、1行入力欄同様にプレースホルダの設定をすることは可能です。

form
 +++ Section("セクション1")
 <<< TextRow { row in
   row.title = "タイトル"
   row.placeholder = "タイトルを入力"
 }
 <<< TextAreaRow { row in
   row.placeholder = "メモを入力"
 }

さらにセクションと１行入力欄を追加するには、以下のようにします。

form
    +++ Section("セクション1")
    <<< TextRow { row in
        row.title = "タイトル"
        row.placeholder = "タイトルを入力"
    }
    <<< TextAreaRow { row in
        row.placeholder = "メモを入力"
    }
    // ここからセクション2のコード
    +++ Section("セクション2")
    <<< TextRow { row in
        row.title = "1行メモ"
        row.placeholder = "1行メモを入力"
    }

実行してみよう

実行すると、以下のようにセクションが2つとその下に入力欄がある設定画面が表示されます。

今回作成したコード全体を以下に示します。

import UIKit
import Eureka   // 追加

class EurekaViewController: FormViewController { // 継承元を変更

    override func viewDidLoad() {
        super.viewDidLoad()

        form
            +++ Section("セクション1")
            <<< TextRow { row in
                row.title = "タイトル"
                row.placeholder = "タイトルを入力"
            }
            <<< TextAreaRow { row in
                row.placeholder = "メモを入力"
            }
            // ここからセクション2のコード
            +++ Section("セクション2")
            <<< TextRow { row in
                row.title = "1行メモ"
                row.placeholder = "1行メモを入力"
            }

    }

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

    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
    }
    */

}