[ライブラリ] Eurekaでヘッダーやフッターを非表示にするには?

はじめに

Eurekaで入力欄を作成するときに、Sectionを作成します。

このSectionを作成すると、自動でヘッダー欄が作成されてしまいます。

今回は、このヘッダーやフッターを非表示にする方法を紹介します。

環境

Xcode:9.4.1
Swift:4.1.2

ヘッダーやフッターを非表示にするには?

ヘッダーやフッターを非表示にするのは簡単で以下のようにコードを記述するだけです。

form
    +++ Section() {
        // ヘッダーを非表示にする
        $0.header?.height = { CGFloat.leastNormalMagnitude }
        // フッターを非表示にする
        $0.footer?.height = { CGFloat.leastNormalMagnitude }
    }
    <<< TextRow() {
        $0.title = "テキスト入力"
        $0.value = "テスト"
}

上記を実行すると、以下のようにヘッダーは非表示になります。

 

[ライブラリ] Eurekaでヘッダーにイメージを表示するには?

はじめに

本ブログに「Eurekaのリストの開始位置の変更方法を知りたい」とのコメントをいただきましたので調査しました。

Eurekaのリストの開始位置(行の表示位置)を変更するには、ヘッダーのサイズで調整することができますので、その方法を説明します。

環境

Xcode:9.4.1
Swift:4.1.2

目次

“[ライブラリ] Eurekaでヘッダーにイメージを表示するには?” の続きを読む

[ライブラリ] EurekaでImageRowを使用するには?

はじめに

Eurekaは、標準では ImageRow という行はありません。

そこで、EurekaCommunity にあるImageRowをインストールして画像の選択をできるようにする方法を紹介します。

環境

Xcode:9.4.1
Swift:4.1.2

目次

“[ライブラリ] EurekaでImageRowを使用するには?” の続きを読む

[ライブラリ]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の中でテキストを取得しています。

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

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