Swiftで入力フォームが簡単に作れる「Eureka」の使い方

概要

iOSアプリを作るときによく使う入力フォームを簡単に実装できるライブラリ「Eureka」の使い方をまとめました。

Eurekaとは

XMARTLABSという企業がもともと「XLForm」というフォーム作成用ライブラリを提供しており、それをSwiftで作り直したものらしいです。

どんな感じ？

Eurekaを使えば

こんな感じや、

こんな感じの入力フォームが簡単に作れます。

(gif画像はEurekaのGitHubからお借りしました。)

導入

Cocoapodsを使用し、Podfileに

pod 'Eureka'

と記述、pod installするだけです。

(Carthageでも可能です。)

画面の作成

ViewController作成

FormViewControllerのサブクラスを作成します。

class MyFormViewController: FormViewController {

    //...

}

SectionとRowの追加

以下のようにすることでSectionとRowを追加できます。
Rowのタグは値の取得で使用します。

override func viewDidLoad() {
    super.viewDidLoad()
    form +++ Section("セクション名")
        <<< TextRow("Rowのタグ"){ row in
            row.title = "Rowのタイトル"
            row.placeholder = "プレースホルダー"
        }
        <<< PhoneRow("Rowのタグ"){
            $0.title = "Rowのタイトル"
            $0.placeholder = "プレースホルダー"
        }
    +++ Section("セクション名")
        <<< DateRow("Rowのタグ"){
            $0.title = "Rowのタイトル"
            $0.value = Date(timeIntervalSinceReferenceDate: 0)
        }
}

appendメソッドを使うことでもSectionとRowの追加が可能です。

override func viewDidLoad() {
    //...

    let row = NameRow("Rowのタグ") { 
        $0.title = "タイトル"
    }
    let section = Section()
    section.append(row)
    form.append(section)
}

Rowの一覧はこちら。

Section HeaderとFooterのタイトル設定

セクションヘッダだけでなく、フッタのタイトル設定も行えます

// ヘッダのタイトルのみ
Section("Title")

// ヘッダとフッタのタイトル
Section(header: "Title", footer: "Footer Title")

// フッタのタイトルのみ
Section(footer: "Footer Title")

値の取得

値の取得にはSectionとRowの追加で設定したRowのタグを用います。

rowBy(tag:)

rowBy(tag:)メソッドを用いて値を取得します。

let textRow = form.rowBy(tag: "Rowのタグ") as! TextRow
let text = textRow.value!

values()

values()メソッドを用いれば、タグが設定されている全てのRowの値が取得できます。

// タグ設定済みの全てのRowの値を取得
let values = form.values()

// Rowの値を取得する
let text = values["Rowのタグ"] as! String

コールバック関数

コールバック一覧はこちらです。

例えばフォームの内容が変更されたときにprintを行うコードは以下のようになります

form
    +++ Section()
    <<< TextRow() {
        // ...
    }.onChange {
        print("Text changed:", $0.value ?? "");
    }

バリデーション

Eurekaでは入力値のバリデーションを行うこともできます。(詳細はこちら)

例えばRowの値が空の時になにかしらの処理を行う場合、

form
    +++ Section()
    <<< TextRow("Rowのタグ") {
        //...

        $0.add(rule: RuleRequired())
        $0.validationOptions = .validatesOnChange
    }.cellUpdate { cell, row in
        if !row.isValid {
            // 何らかの処理
        }
    }

というようになります。