4
3

More than 3 years have passed since last update.

[Swift]Eurekaライブラリの応用カスタマイズ集

Last updated at Posted at 2020-09-06

はじめに

Eurekaライブラリとは

Eurekaライブラリとは、iOSの入力フォームなどを、高速かつ簡単に作成するためのライブラリである。
https://github.com/xmartlabs/Eureka

背景

このライブラリの基本的な使い方は様々な記事で紹介されている。しかし、応用的な使い方や、マイナーなカスタマイズは中々載っていなかったため、私自身カスタマイズに苦労した。
私この経験を記事にすることで、皆様のお役に立てるのではないかと思い投稿させて頂いた。

この記事の主なターゲット

  • Eurekaライブラリの基本的な使用方法を知っている方
  • Swift初心者の方
  • Eurekaを使用して間も無く、もっと活用できるようになりたいと感じている方

編集履歴

  • 2020年9月6日(日):本記事を投稿

カスタマイズ集

LabelRowにDisclosure Indicatorを表示

EurekaSample.swift
class EurekaSample: FormViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        form.append(Section() {
            $0.append(LabelRow() {
                $0.cell.accessoryType = .disclosureIndicator
            })
        })
    }

}

LabelRowにSub Titleを追加

EurekaSample.swift
import Eureka

class EurekaSample: FormViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        form.append(Section() {
            $0.append(LabelRow() {
                $0.title = "title"
                $0.cellStyle = UITableViewCell.CellStyle.subtitle
            }.cellUpdate { cell, _ in
                cell.detailTextLabel?.text = "sub title"
                cell.detailTextLabel?.textColor = UIColor.systemGray
            }.onCellSelection { cell, row in
                self.navigationController?.pushViewController(UIViewController(), animated: true)
            })
        })
    }

}

PushRowの選択先のVCのSectionを複数にする

無理やりです。

EurekaSample.swift
import Eureka

class EurekaSample: FormViewController {

    private let dataList = [String]()

    override func viewDidLoad() {
        super.viewDidLoad()
        form.append(Section() {
            $0.append(PushRow<String>("tag") {
                $0.title = "title"

                // オプションで追加はしない
                //$0.options
            }.onPresent { from, to in

                // デフォルトのセクションタイトルを消す
                to.form.allSections.first?.header = nil

                // セクション追加
                let section1 = Section("section1")
                section1.tag = "section1"
                let section2 = Section("section2")
                section2.tag = "section2"
                for data: String in self.dataList {
                        section1.append(LabelRow() {
                            $0.title = data
                        }.onCellSelection { cell, row in

                            // デフォルトのPushRowを同じ挙動をさせる
                            self.navigationController?.popViewController(animated: true)
                            (self.form.rowBy(tag: "tag") as! PushRow<String>).value = data
                        })
                }
                to.form.append(section1)
                to.form.append(section2)
            })
        })
    }

}

文字入力系RowのUIToolbarをカスタマイズ

EurekaSample.swift
import Eureka

class EurekaSample: FormViewController, UITextFieldDelegate {

    private var activeTextField: UITextField? = nil

    // TextFieldが選択された時
    func textFieldDidBeginEditing(_ textField: UITextField) {

        // textFieldの参照先をメンバ変数で保持しておく
        self.activeTextField = textField
    }

    // Keyboardの上のUIToolbarの完了ボタン押下時の処理
    @objc private func focusDelete() {

        // 参照先を保持しているTextFieldのFocusを外す
        activeTextField?.resignFirstResponder()
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        form.append(Section() {
            $0.append(TextRow() {
                $0.title = "title"
            }.cellUpdate { cell, row in

                // ここでこのRowのTextFieldのDelegateをセットさせる
                cell.textField.delegate = self
            })
        })
    }

    // カスタマイズUIToolbar(右側にDone buttonのみを配置)
    override func inputAccessoryView(for row: BaseRow) -> UIView? {
        let toolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width, height: 0))
        toolbar.sizeToFit()
        var items = [UIBarButtonItem]()
        items.append(UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil))

        // DoneのActionを設定
        let doneButton = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(focusDelete))
        items.append(doneButton)
        toolbar.items = items
        return toolbar
    }

}

SectionのHeader、Footerをカスタマイズ

EurekaSample.swift
import Eureka

class EurekaSample: FormViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let section = Section()
        section.footer = { var footer = HeaderFooterView<UIView>(.callback({
            let view = UIView(frame: CGRect(x: 10, y: 0, width: self.view.bounds.width - 20, height: 100))
            return view
        }))
            footer.height = { 180 }
            footer.onSetupView = { view, _ in
                view.preservesSuperviewLayoutMargins = false
                let label = UILabel(frame: CGRect(x: 10, y: 0, width: self.view.bounds.width - 20, height: 100))
                label.font = UIFont.systemFont(ofSize: 13)
                label.numberOfLines = 0
                label.textAlignment = .left
                label.text = "footer description"
                label.sizeToFit()
                view.addSubview(label)
            }
          return footer
        }()
        form.append(section)
    }

}

曜日のPickerInlineRow

EurekaSample.swift
import Eureka

class EurekaSample: FormViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        form.append(Section() {
            $0.append(PickerInlineRow<Weekday>() {
                $0.options = [.sunday, .monday, .tuesday, .wednesday, .thursday, .friday, .saturday]
                $0.displayValueFor = {
                    guard let weekday = $0 else { return nil }
                    return weekday.rawValue + "曜日"
                }
            })
        })
    }

}

enum Weekday: String {
    case sunday = "日"
    case monday = "月"
    case tuesday = "火"
    case wednesday = "水"
    case thursday = "木"
    case friday  = "金"
    case saturday = "土"
}

月と日のみのPickerInlineRow

EurekaSample.swift
import Eureka

class EurekaSample: FormViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        form.append(Section() {
            $0.append(DoublePickerInlineRow<String, String>() {
                $0.firstOptions = { return (1...12).map { String($0) + "月" } }
                $0.secondOptions = { month in
                    var days = [String]()
                    switch month {
                    case "4月", "6月", "9月", "11月":
                        days = (1...30).map { String($0) + "日" }
                    case "2月":
                        days = (1...29).map { String($0) + "日" }
                    default:
                        days = (1...31).map { String($0) + "日" }
                    }
                    return days
                }
                $0.displayValueFor = {
                    guard let monthDay = $0 else { return nil }
                    return monthDay.a + monthDay.b
                }
            })
        })
    }

}

おわりに

以上になります。万が一ミスなどをお気づきになりましたら、お手数をおかけしてしまい申し訳ありませんが、コメントなどでお知らせして頂けると助かります。

今後も他のカスタマイズが気付き次第更新したいと思います。

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3