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

はじめに

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

  • ActionSheet行

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

環境

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 行の値を取得する

はじめに

前回はpartial void AnimalValue_Change(UISegmentedControl sender)
{
var index = segmentAnimals.SelectedSegment;
labelMsg.Text = segmentAnimals.TitleAt(index);
}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.
    }
    */

}