[ライブラリ]Eurekaの行にタグを付けてRow値を取得するには?

はじめに

Eurekaで作成する行には、タグを付けることができます。

今回はタグを付けて、あとからRow値を取得する方法を紹介します。

Eurekaについては、本ブログのメニューから[ライブラリ]-[Eureka]を選択して参照ください。

環境

Xcode:9.4.1
Swift:4.1.2

タグを設定する方法

行にタグを設定するのは簡単です。

tagプロパティに、任意のタグ名を付けるだけです。

以下の例では、tagプロパティに”team”を設定しています。

form
    +++ Section("チーム設定")
    <<< TextRow { row in
        row.tag = "team"
        row.title = "チーム名"
        row.placeholder = "チーム名を入力"
        }

タグを使用して、行に入力された値を取得する方法

タグを使用して値を取得するには、はじめに form.rowBy(tag: タグ名) を使用して行全体の情報を取得します。次にvalueプロパティを使用して値を取得します。

例えば、保存ボタンをタップした時に行の値を取得したい場合は、以下の様にします。

この例では、タグ名「team」を使用して値を取得しています。

// 保存ボタンをタップしたときのアクション
@objc func tappedSaveButton() {
    let teamRow = form.rowBy(tag: "team") as! TextRow
    let name = teamRow.value!
    
    print(name)
}

values()メソッドを使用して値を取得する方法

Formのvaluesメソッドを使用すると、タグが設定されている行の値を全て取得することができます。

以下に例を示します。

この例では、valuesメソッドで全ての行を取得後に、タグ名を指定して任意の行の値を取得しています。

// 全てのRowの値を取得
let values = form.values()
 
// 「team」というタグが設定された行の値を取得する
let name = values["team"] as! String

 

 

 

[ライブラリ] EurekaのPickerRowとPickerInlineRowを使用する方法

はじめに

今回はEurekaのPickerRowとPickerInlineRowの使用方法について説明します。

EurekaのPickerRowやPickerInlineRowは、UIPickerViewに相当するUI部品です。任意の選択肢を表示して、ユーザーに選択させることができます。

Eurekaについては、本ブログのメニューから[ライブラリ]-[Eureka]を選択して参照ください。

作成するサンプルは以下の通りです。

 

環境

Xcode:9.4.1
Swift:4.1.2

PickerRowを使用するには?

PickerRowは、設定画面の中に直接選択肢を表示させることができます。よって選択肢は常に表示されたままとなります。

たとえば、曜日を選択できるようにPickerRowを作成するには、以下のようなコードを記述します。

class EurekaViewController: FormViewController {

    var selectedGender : String = ""
    
    override func viewDidLoad() {
        super.viewDidLoad()

        form
            +++ Section("設定")
            <<< PickerRow<String>() { row in
                row.title = "曜日"
                row.options = ["日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日"]
                row.value = row.options.first
            }.onChange {[unowned self] row in
                self.selectedGender = row.value!
                print(self.selectedGender )
            }
    }

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

PickerRowの基本書式

<<< PickerRow<表示項目(選択肢)のデータ型>() { row in
    row.options = 選択肢を表す配列
    row.value = row.options.first
}.onChange {[unowned self] row in
    // 値変更時の処理
}

1行目の<>の中には、表示項目のデータ型を指定します。一般的には文字列を表示しますのでStringとします。

2行目のrow.optionsには、文字配列を代入します。ここで代入した値が、選択肢となって表示されます。

3行目のrow.valueは、初期値として選択しておく項目を指定します。

4行目のonChangeには、選択肢が変更された場合の処理を記述します。

※PickerRowはタイトルを設定できないようです。row.titleプロパティを使用してみましたが表示できないことを確認しています。

PickerRowの実行例

上記コードの実行例を以下に示します。

PickerInlineRowを使用するには?

PickerInlineRowは、初期表示時は選択肢が表示されません。タップした時に初めて選択肢が表示されます。

使い方はPickerRowと同じです。コードもPickerRowをPickerInlineRowに変更するだけで同様に使用することができます。参考までに以下にコード例を示します。

class EurekaViewController: FormViewController {

    var selectedGender : String = ""
    
    override func viewDidLoad() {
        super.viewDidLoad()

        form
            +++ Section("設定")
            <<< PickerInlineRow<String>() { row in
                row.title = "曜日"
                row.options = ["日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日"]
                row.value = row.options.first
            }.onChange {[unowned self] row in
                self.selectedGender = row.value!
                print(self.selectedGender )
            }
    }

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

PickerInlineRowの基本書式

<<< PickerInlineRow<表示項目(選択肢)のデータ型>() { row in
    row.title = タイトルを表す文字列
    row.options = 選択肢を表す配列
    row.value = row.options.first
}.onChange {[unowned self] row in
        // 値変更時の処理
}

PickerInlineRowは、row.titleでタイトルを設定することができます。

PickerInlineRowの実行例

上記コードの実行例を以下に示します。

 

 

 

[ライブラリ] EurekaのSwitchRowを使用する方法

はじめに

今回は、EurekaライブラリのSwitchRowを使用する方法を説明します。作成するサンプルは以下の通りです。SwitchRowはOn/Offを選択できるようにするUI部品です。

Eurekaについては、本ブログのメニューから[ライブラリ]-[Eureka]を選択して参照ください。

環境

Xcode:9.4.1
Swift:4.1.2

サンプルコード

はじめに、サンプルコードを示します。このサンプルコードは、Wi-FiのOn/Offを選択できるようにするものです(実際にWi-FiのOn/Offをするコードではありません)。

import Eureka
import UIKit

class EurekaViewController: FormViewController {

    var onWiFi : Bool = false
    
    override func viewDidLoad() {
        super.viewDidLoad()

        form
            +++ Section("ネットワーク設定")
            <<< SwitchRow(){ row in
                row.title = "Wi-Fi"
                row.value = true
                }.onChange{[unowned self] row in
                    self.onWiFi = row.value!
                    print(self.onWiFi)
                }
    }

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

}

SwitchRowの基本書式

SwitchRowの基本書式を以下に示します。

<<< SwitchRow() { row in
    row.title = 行タイトルを表す文字列
    row.value = 初期値(Bool型)
}

row.titleは行のタイトルです。必要ない場合は書かなくても構いません。

row.valueは、はじめて表示されたときにOnにしておくかOffにしておくかをBool値で指定します。Onにしたい場合はtrueを設定します。

選択肢を取得する

選択肢が変更された場合は、onChangeのイベントが発生します。onChange関数の中で、最新の選択状態をクラスプロパティに格納しておくようにするとよいです。

選択された値は、row.valueで取得することができます。

実行例

以下に実行例を示します。

[ライブラリ] EurekaのSegmentedRowを使用する方法

はじめに

今回は、EurekaライブラリのSegmentedRowを使用する方法を説明します。作成するサンプルは以下の通りです。SegmentedRowは複数の選択項目の中から1つの項目を選択できるようにするUI部品です。

Eurekaについては、本ブログのメニューから[ライブラリ]-[Eureka]を選択して参照ください。

環境

Xcode:9.4.1
Swift:4.1.2

サンプルコード

はじめに、サンプルコードを示します。このサンプルコードは、好きなくだものを3つ表示して、その中から1つを選ばせるためのSegmentedRowを作成しています。

import Eureka
import UIKit

class EurekaViewController: FormViewController {

    var fruit : String = ""
    
    override func viewDidLoad() {
        super.viewDidLoad()

        form
            +++ Section("くだもの")
            <<< SegmentedRow<String>() { row in
                row.title = "好きなくだもの"
                row.options = ["スイカ","メロン","モモ"]
                row.value = "メロン"
                }.onChange{[unowned self] row in
                    self.fruit = row.value ?? "選択なし"
                    print(self.fruit)
                }
    }

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

SegmentedRowの基本書式

SegmentedRowの基本書式を以下に示します。

<<< SegmentedRow<表示する値のデータ型>() { row in
    row.title = 行タイトルを表す文字列
    row.options = SegmentedRowに表示する選択肢の配列
    row.value = 初期値
}

書式ですが、「表示する値のデータ型」は基本的にStringを指定します。

row.titleは行のタイトルです。必要ない場合は書かなくても構いません。

row.optionsは、表示する選択肢を配列で記述します。

row.valueは、はじめて表示されたときに選択状態にしたい項目を指定します。指定しない場合は、いずれの項目も選択されていない状態になります。

選択肢を取得する

選択肢が変更されるために、onChangeのイベントが発生します。onChange関数の中で、最新の選択項目をクラスプロパティに格納しておくようにするとよいです。

サンプルコードに示しましたが[unowned self]と記述して、クラスメンバーをselfで参照できるようにしています。[unowned self]はメモリリーク防止のために記述しています。

選択された値は、row.valueで取得することができます。

実行例

以下に実行例を示します。

[ライブラリ] Eurekaの導入と利用〜その6 様々な行を追加する2

はじめに

前回はActionSheet行やAlert行を作成しました。今回は以下について見ていきます。

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

環境

Xcode:9.2
Swift:4.0.3

DateInlineRow

DateInlineRowを使用すると、行内で日付を選択して入力することが可能です。また日付が変更された場合は、OnChangeイベントが発生するので、valueプロパティで変更後の値を取得することができます。

以下にコード例を示します。

form
    +++ Section("セクション")
    <<< DateInlineRow("") {
        $0.title = "日付を選択"
        }.onChange() { row in
            // 選択された日を表示
            print(row.value!)
    }

DateTimelineRow

DateTimeInlineRowを使用すると、行内で日付と時間を選択して入力することが可能です。また日時が変更された場合は、OnChangeイベントが発生するので、valueプロパティで変更後の値を取得することができます。

 form
    +++ Section("セクション")
    <<< DateTimeInlineRow("") {
        $0.title = "日時を選択"
        //$0.value = date
        }.onChange() { row in
            // 選択された日時を表示
            print(row.value!)
        }

TimeInlineRow

TimeInlineRowを使用すると、行内で時間を選択して入力することが可能です。また時間が変更された場合は、OnChangeイベントが発生するので、valueプロパティで変更後の値を取得することができます。

form
    +++ Section("セクション")
    <<< TimeInlineRow("") {
        $0.title = "時刻を選択"
        //$0.value = date
        }.onChange() { row in
            // 選択された時刻を表示
            print(row.value!)
        }

任意の日付を選択状態にするには?

DateInlineRow, DateTimeInlineRow, TimeInlineRowのいずれも初期値は現在日時です。任意の日時を選択したい場合は、DateFormatterで日付を作成し、$0.value = date のように作成した日付を設定してあげます。

以下にコード例を示します。

let formatter = DateFormatter()
let now = "2017/8/12"
formatter.dateFormat = "yyyy/MM/dd"
formatter.locale = Locale(identifier: "ja_JP")
let date = formatter.date(from: now)

form
    +++ Section("セクション")
    <<< DateTimeInlineRow("") {
        $0.title = "日時を選択"
        $0.value = date
        }.onChange() { row in
            // 選択された日時を表示
            print(row.value!)
        }

DateRow

DateInlineRowは、行内で選択することができましたが、DateRowの場合は下からPickerがニュルッと出てきます。使用方法はDateInlineRowと同じです。

form
    +++ Section("セクション")
    <<< DateRow("") {
        $0.title = "日付を選択"
        }.onChange() { row in
            // 現在のチェック状態を表示
            print(row.value!)
    }

DateTimeRow

DateTimeInlineRowは、行内で選択することができましたが、DateTimeRowの場合は下からPickerがニュルッと出てきます。使用方法はDateTimeInlineRowと同じです。

form
    +++ Section("セクション")
    <<< DateTimeRow("") {
        $0.title = "日時を選択"
        //$0.value = date
        }.onChange() { row in
            // 選択された日時を表示
            print(row.value!)
        }

TimeRow

TimeInlineRowは、行内で選択することができましたが、TimeRowの場合は下からPickerがニュルッと出てきます。使用方法はTimeInlineRowと同じです。

form
    +++ Section("セクション")
    <<< TimeRow("") {
        $0.title = "時刻を選択"
        //$0.value = date
        }.onChange() { row in
            // 選択された時刻を表示
            print(row.value!)
        }

[ライブラリ] Eurekaの導入と利用〜その5 様々な行を追加する1

はじめに

前回は1行入力欄や複数行入力欄を作成しました。今回は以下について見ていきます。

  • ActionSheet行
  • Alert行

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

環境

Xcode:9.2
Swift:4.0.3

ActionSheet行

ActionSheet行を追加すると、複数の選択肢の中から1項目を選択することができます。

例えば、「犬」「猫」「フェレット」の中からペットを1つ選択させたい場合は以下のようにします。

form
    +++ Section("セクション")
    <<< ActionSheetRow<String>("") {
        $0.title = "ペット"
        $0.selectorTitle = "ペットを選択"
        $0.options = ["犬","猫","フェレット"]
        $0.value = "フェレット"    // 初期選択項目
    }.onChange{row in
        print(row.value as Any)
    }
  • 4行目:titleプロパティは、行先頭に表示するタイトルです
  • 5行目:selectorTtitleプロパティは、行を選択した時に表示されるアクションシートのタイトルです
  • 6行目:optionsプロパティは、アクションシートに表示する選択項目です
  • 7行目:valueプロパティは、初期選択項目です
  • 8行目:onChangeは選択項目が変更されたときのアクションです。ここでは選択された項目を表示しています。

Alert行

Alert行を追加すると、複数の選択肢の中から1項目を選択することができます。Action行と使用方法は同じで、違いは表示される位置です。Action行はタップすると、選択肢が画面下からニュルッと出てきますが、Alert行は画面中央に表示されます。

Alert行のコード例を以下に示します。この例はAction行のコードをAlertに変更しただけのものです。

form
    +++ Section("セクション")
    <<< AlertRow<String>("") {
        $0.title = "アラート行"
        $0.selectorTitle = "ペットを選択"
        $0.options = ["犬","猫","フェレット"]
        $0.value = "フェレット"    // 初期選択項目
        }.onChange{row in
            print(row.value as Any)
	}
    }

実行例を以下に示します。

 

[ライブラリ] Eurekaの導入と利用〜その4 行の値を取得する

はじめに

前回は1行入力欄や複数行入力欄を作成しました。

今回は、行に入力された値を取得する方法を見ていきます。

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

 環境

Xcode:9.2
Swift:4.0.3

Eurekaのコールバック関数

Eurekaには、行の値を取得したり外観を変更するためのコールバック関数があります。

以下に使用可能なコールバック関数を示します。

コールバック関数 説明
onChange 行の値が変更されたときに呼び出されます。
onSellSelection ユーザーが行をタップして選択されたときに呼び出されます。
cellSetup セルが最初に設定されたときに一度だけ呼び出されます。
cellUpdate セルが画面に表示されるたびに呼び出されます。
onCellHighlightChanged セルまたはサブビューが最初のレスポンダになるときに呼び出されます。
onRowValidationChanged 行に関連付けられた検証エラーが変更されたときに呼び出されます。
onExpandInlineRow インライン行を展開する前に呼び出されます。I
onCollapseInlineRow インライン行を折りたたむ前に呼び出されます。
onPresent  別のView Controllerを表示する直前に行によって呼び出されます。

行の値を取得する

行の値を取得するには、コールバック関数onChangeを使用します。

コード例を以下に示します。

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

上記は1行テキストの入力欄を作成し、onChangeの中でテキストを取得しています。

様々なコールバック関数がありますが、作成する行によっては使用不可能なものもあります。

今後機会があれば、そのほかのコールバック関数も取り上げる予定です。

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

はじめに

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

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

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

入力欄を作成しよう

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 = "メモを入力"
 }

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

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.
    }
    */

}

 

 

 

 

 

[ライブラリ] Eurekaの導入と利用〜その2(設定画面の下準備)

はじめに

前回はEurekaをプロジェクトにインストールするところまでの説明をしました。

今回は、Storyboardに設定画面用のView Controllerの追加方法と、設定画面用のクラスファイルを作成する方法を見ていきます。

環境

Xcode:9.2
Swift:4.0.3

Navigation Controllerを追加する

Eurekaは設定画面を簡単に作成することができるライブラリです。ここでは、設定画面を作ることを想定して、サンプルアプリを作成していきます。

そこで、View Controllerの上部にはNavigation Barを表示し、「+」ボタンがタップされた時に設定画面が開かれるようにします。

はじめに、前回作成したプロジェクトを開いてください。EurekaSample1という名前でプロジェクトを作成している場合は、EurekaSample1.xcworkspaceという名前のファイルをダブルクリックして開きます。

続いてMain.storyboardを開きましょう。View Controllerを選択をしたら、メニューから[Editor]-[Embeded in]-[Navigation Controller]を選択します。

Navigation Controllerが追加され、Main.storyboardは以下のようになります。

続いて、View Controllerに配置されたNavigation Barの上にBar Button Itemを1つ配置します。

次に、今配置したBar Button Itemを+アイコンに変更します。配置したBar Button Itemを選択したら、Attributes InspectorのSystem Itemを「Add」に変更します。

これで、「+」アイコンに変更されます。

続いて設定ページ用のView Controllerを追加します。オブジェクトライブラリからMain.storyboardにView Controllerを1つ追加してください。

最後に、先ほどの「+」ボタンをタップした時に設定用ページが開かれるようにします。

「+」ボタンを[control]キーを押しながらドラッグし、追加したView Controllerの上にドロップします。メニューが表示されるので「show」を選択してください。

以上でMain.storyboardの設定は完了です。

完成したMain.storyboardは以下のようになります。

Eurekaを使って設定画面を作成する

ここからは、Eurekaを使用して設定画面を作成していきます。

はじめに、設定画面用のView Controllerクラスを作成します。

メニューから新規ファイルの作成で「Cocoa Touch Class」を作成します。

次にClass名を入力(ここではEurekaViewControllerとしました)してSubclass ofでUIViewControllerを選択して[Next]を選択します。

最後に保存先を選択して、[create]ボタンをクリックします。

今作成したファイルをダブルクリックして開き、「import Eureka」を追加し、継承元を「ViewController」から「FormViewController」に変更してください。

import UIKit
import Eureka   // 追加

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

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    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.
    }
    */

}

ここまでできたら[command]+[B]を押して一度ビルドしましょう。

ビルドができたらMain.storyboardを開いて、一番最後のView Controllerに対して今作成したクラスを割り当てます。

以上で下準備は完了です。

次回から設定画面を作成していきます。