[ライブラリ] 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.
    }
    */

}

 

 

 

 

 

[ライブラリ] 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に対して今作成したクラスを割り当てます。

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

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

[ライブラリ] Eurekaの導入と利用〜その1(ライブラリのインストール)

はじめに

iOSアプリ用の設定画面を作成するには、TableViewを使用するのが一般的です。

しかし、TableViewを利用するには覚えることも多く、1ページ作成するだけでも結構大変です。

そこで、Eureka(ユーリカ)というライブラリを導入すると、簡単にTableViewのページデザインが可能ですので、今回はそのインストールについてみていきます。

環境

Xcode:9.2
Swift:4.0.3

インストール

EurekaのインストールはCocoa Podsを利用します。Cocoa Podsのインストールについては過去記事「CocoaPodsの導入」を参照ください。

はじめにSingle View Appのプロジェクトを作成します。

続いて、Teminalを起動して作成したプロエクト先に移動して以下のコマンドを実行し、podファイルを作成します。

pod init

作成されたpodファイルを開いて、以下のように編集します。

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'EurekaSample' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  source 'https://github.com/CocoaPods/Specs.git'
  platform :ios, '9.0'
  use_frameworks!

  # Pods for EurekaSample
  pod 'Eureka'
end

編集が完了したら、Terminalで以下のコマンドを実行してインストールします。

pod install

podファイルの作成からインストールを実行するまでのTerminalのスクショを参考までに載せておきます。

次回以降、実際にEurekaを使用する方法を見ていきます。