[快速学会Swift第三方库] Eureka篇

Eureka可以帮你简单优雅的实现动态table-view表单。它由rows,sections和forms组成。如果你的app包含大量表单，Eureka可以真正帮你节省时间。

目录

编码之前

导入 Eureka

推荐使用CocoaPods进行导入，CocoaPods是一个负责管理iOS项目中第三方开源库的工具，安装CocoaPods之后使用命令行就能轻松地对所有第三方开源库进行安装和更新，而不需要每次上GitHub去下载。
CocoaPods的安装过程传送门：iOS 9 导入类库全面详尽过程（Ruby安装->CocoaPods安装->导入类库）
手动安装：GitHub-Eureka主页

装好CocoaPods后，修改Podfile文件内容为如下：

source 'https://github.com/CocoaPods/Specs.git'platform :ios, '9.0'use_frameworks!target 'Web' dopod 'Eureka', '~> 1.6'endxcodeproj 'Desktop/Web/Web.xcodeproj'

target后面为工程名，最后一行为工程路径(这里的Web是我的工程名)

再执行命令：

$ pod install

其他操作

另外还需要在Target->工程名->Build Settings->Search Paths->User Header Search Paths处添加Eureka所在的目录：

最后在你需要用到Eureka的类中加上：

import Eureka

创建表单

下面来创建一个最简单的表单，表单只包含一个区域和一行，点击该行可以切换到其它页面

import UIKitimport Eureka//ViewController继承于FormViewControllerclass MyViewController: FormViewController {    override func viewDidLoad() {        super.viewDidLoad()        //表单form增加一个Section区域，区域名为First form        form +++ Section("First form")            //在区域中添加一个ButtonRow（ButtonRow为点击直接触发事件的行），行tag为Rows            <<< ButtonRow("Rows"){                //设置行标题为行tag                $0.title = $0.tag                //设置点击事件，执行名为"Main"的Segue（需在Interface Builder中自定义）                $0.presentationMode = .SegueName(segueName: "Main", completionCallback: nil)        }              //自定义Row，在后面会讲到//            <<< WeekDayRow(){//                $0.value = [.Monday, .Wednesday, .Friday]//        }    }    override func didReceiveMemoryWarning() {        super.didReceiveMemoryWarning()    }}

效果如下图所示，与UITableview实现的界面大体一致，点击该行后会进入名为”Main”的Segue所指向的界面

基础表单

下面来创建一个包含标签，日期选择器，勾选，开关，滑动条，增减器等我们常用功能的表单。

        //设置标签行的默认内容颜色为橙色        LabelRow.defaultCellUpdate = { cell, row in cell.detailTextLabel?.textColor = .orangeColor() }        //设置勾选行中勾颜色为橙色        CheckRow.defaultCellUpdate = { cell, row in cell.tintColor = .orangeColor() }        //为表单添加一个区域        form +++ Section("Row examples")            //为区域添加一个标签行            <<< LabelRow("LabelRow"){                $0.title = $0.tag                $0.value = "tap the row"                }//选中标签行会在tittle后面加上" Summer "                .onCellSelection{cell, row in                    row.title = (row.title ?? "") + " Summer "                    row.reload()            }            //为区域添加一个日期行。点击日期行会在屏幕底部弹出一个日期选择器            <<< DateRow(){                $0.value = NSDate()                $0.title = "DateRow"            }            //为区域添加一个勾选行，默认为选中            <<< CheckRow(){                $0.title = "CheckRow"                $0.value = true            }            //为区域添加一个开关行，默认为开            <<< SwitchRow(){                $0.title = "SwitchRow"                $0.value = true            }            //为区域添加一个滑动条行，默认值为5            <<< SliderRow(){                $0.title = "SliderRow"                $0.value = 5.0            }            //为区域添加一个增减器行，每次增减的大小为1            <<< StepperRow(){                $0.title = "StepperRow"                $0.value = 1.0        }

效果如下区域Row examples 中所示

点击DateRow弹出日期选择器效果

选择类型表单

Segment风格选择器

            +++ Section("SegmentedRow examples")            //只包含3个选择项            <<< SegmentedRow<String>(){                $0.options = ["One","Two","Three"]            }            //包含标题和3个选择项            <<< SegmentedRow<String>(){                $0.title = "Who are you?"                $0.options = ["Summer", "Seven", "Leg", "Cannon Fly", "another one"]                //默认选中"Leg"                $0.value = "Leg"            }            //包含图片和3个选择项            <<< SegmentedRow<String>(){                $0.options = ["One", "Two", "Three", "Four"]                $0.value = "Three"                }.cellSetup{ cell, row in                    cell.imageView?.image = UIImage(named: "sps.png")        }

标准选择器

            +++ Section("Selectors Rows Examples")            //选择框以对话框的形式弹出            <<< ActionSheetRow<String>(){                $0.title = "ActionSheetRow"                $0.selectorTitle = "Your favorite player?"                $0.options = ["Diego Forlán", "Edinson Cavani", "Diego Lugano", "Luis Suarez"]                $0.value = "Luis Suarez"            }            //选择框以Alert的形式弹出            <<< AlertRow<String>(){                $0.title = "AlertRow"                $0.selectorTitle = "Who is there"                $0.options = ["Summer", "Seven", "Leg", "Cannon Fly", "another one"]                $0.value = "Summer"                //选中非当前值时打印新的值                }.onChange{ (row) in                    print(row.value)                //选择框出现时，设置字体颜色为紫色                }.onPresent({ (_, to) in                    to.view.tintColor = .purpleColor()                })            //以navigation的形式进入到一个新界面，其中每行为选择内容            <<< PushRow<String>(){                $0.title = "PushRow"                $0.options = ["Summer", "Seven", "Leg", "Cannon Fly", "another one"]                $0.value = "Cannon Fly"                $0.selectorTitle = "Choose an Emoji!"        }        //ipad特有的弹出框显示方式        if UIDevice.currentDevice().userInterfaceIdiom == .Pad {            //获取section为当前表单最后一个区域            let section = form.last!            section <<< PopoverSelectorRow<String>(){                $0.title = "PopoverSelectorRow"                $0.options = ["Summer", "Seven", "Leg", "Cannon Fly", "another one"]                $0.value = "Seven"                $0.selectorTitle = "Choose an Emoji!"            }        }        let section = form.last!        section            //图片选择器，点击从本地图片库选择            <<< ImageRow(){                $0.title = "ImageRow"            }            //多选器，以navigation的形式进入到一个新界面，其中每行为选择内容            <<< MultipleSelectorRow<String>(){                $0.title = "MultipleSelectorRow"                $0.options = ["Summer", "Seven", "Leg", "Cannon Fly", "another one"]                $0.value = ["Summer", "Seven", "Leg"]                }                .onPresent{ from, to in                    to.navigationItem.rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .Done, target: from, action: #selector(ViewController.multipleSelectorDone(_:)))            }

pickerView风格选择器

            form +++ Section("Generic picker")            //普通picker选择器            <<< PickerRow<String>("PickerRow"){(row : PickerRow<String>) -> Void in                row.options = []                for i in 1...10{                    row.options.append("opition\(i)")                }            }            //内联picker选择器，可以通过点击展开或收起选择器            <<< PickerInlineRow("Inline picker"){(row : PickerInlineRow<String>) -> Void in                row.title = "Inline picker"                row.options = []                for i in 1...10{                    row.options.append("opition\(i)")                }            }

三种风格选择器效果对比

由于博客上的编译器不支持上面截图中的图片型的字符串，所以以下都替换为普通字符串

PushRow效果展示：

PopoverSelectorRow效果展示：

带输入框的表单

+++ Section("FieldRow examples")            //文本输入框            <<< TextRow(){                $0.title = "TextRow"                $0.placeholder = "Placeholder"            }            //数字输入框            <<< DecimalRow(){                $0.title = "DecimalRow"                $0.value = 5                $0.formatter = DecimalFormatter()                $0.useFormatterDuringInput = true                //设置输入键盘为数字键盘                }.cellSetup{cell, _ in                    cell.textField.keyboardType = .NumberPad            }            //url输入框            <<< URLRow(){                $0.title = "URLRow"                $0.value = NSURL(string: "http://blog.csdn.net/sps900608")            }            //电话输入框            <<< PhoneRow() {                $0.title = "PhoneRow (disabled)"                $0.value = "[phone]"                $0.disabled = true            }            //姓名输入框            <<< NameRow() {                $0.title =  "NameRow"            }            //密码输入框            <<< PasswordRow() {                $0.title = "PasswordRow"                $0.value = "password"            }            //整数输入框            <<< IntRow() {                $0.title = "IntRow"                $0.value = 2016            }            //电子邮箱输入框            <<< EmailRow() {                $0.title = "EmailRow"                $0.value = "[e-mail]"            }            //推特地址输入框            <<< TwitterRow() {                $0.title = "TwitterRow"                $0.value = "@xmartlabs"            }            //账户输入框            <<< AccountRow() {                $0.title = "AccountRow"                $0.placeholder = "Placeholder"            }            //zip码输入框            <<< ZipCodeRow{                $0.title = "ZipCodeRow"                $0.placeholder = "90210"            }            +++ Section("PostalAddressRow example")            //邮政地址输入框            <<< PostalAddressRow(){                $0.title = "Address"                $0.streetPlaceholder = "Street"                $0.statePlaceholder = "State"                $0.postalCodePlaceholder = "ZipCode"                $0.cityPlaceholder = "City"                $0.countryPlaceholder = "Country"                //设置邮政地址的街道，邮编，城市，国家                $0.value = PostalAddress(                    street: "Dr. Mario Cassinoni 1011",                    state: nil,                    postalCode: "11200",                    city: "Montevideo",                    country: "Uruguay"                )        }

效果如下所示：

自定义Row

除了使用框架自带的Row，还可以根据自己的需求自定义Row，下面以一个星期选择行为例。首先创建类WeekDayRow.Swift和nib文件WeekDaysCell.xib。nib文件中只有一个TableViewCell，cell里并排有7个按钮分别对应周日~周一，按钮tittle为周日~周一英文的第一个字母，例如Monday对应的按钮，tittle为M。这个nib文件可以在GitHub上下载，也可以自己创建，另外需要用到选中和未选中的两张图片也都可以在GitHub上下载（选中时的图片，未选中时的图片）或者用自己的，这里我用的是自己的。

import Foundationimport UIKitimport MapKitimport Eureka//MARK: WeeklyDayCellpublic enum WeekDay{    case Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday}public class WeekDayCell : Cell<Set<WeekDay>>, CellType{    //与nib中的7个按钮建立链接    @IBOutlet var sundayButton: UIButton!    @IBOutlet var mondayButton: UIButton!    @IBOutlet var tuesdayButton: UIButton!    @IBOutlet var wednesdayButton: UIButton!    @IBOutlet var thursdayButton: UIButton!    @IBOutlet var fridayButton: UIButton!    @IBOutlet var saturdayButton: UIButton!    //重写cell创建方法    public override func setup() {        height = {60}        row.title = nil        super.setup()        selectionStyle = .None        for subviews in contentView.subviews{            if let button = subviews as? UIButton{                //为每个按钮设置选中和未选中时的图片                button.setImage(UIImage(named: "check.png"), forState: .Selected)                button.setImage(UIImage(named: "uncheck.png"), forState: .Normal)                //默认情况下，按钮在被禁用时，图像会被画的颜色淡一些，设置为false是禁止此功能                button.adjustsImageWhenDisabled = false                //自定义函数，设置按钮标签与图片的位置                imageTopTittle(button)            }        }    }    //重写cell更新方法    public override func update() {        row.title = nil        super.update()        let value = row.value        //根据value是否包含某枚举值来设置对应按钮的选中状态        mondayButton.selected = value?.contains(.Monday) ?? false        tuesdayButton.selected = value?.contains(.Tuesday) ?? false        wednesdayButton.selected = value?.contains(.Wednesday) ?? false        thursdayButton.selected = value?.contains(.Thursday) ?? false        fridayButton.selected = value?.contains(.Friday) ?? false        saturdayButton.selected = value?.contains(.Saturday) ?? false        sundayButton.selected = value?.contains(.Sunday) ?? false        //设置按钮在不同状态下的透明度        mondayButton.alpha = row.isDisabled ? 0.6 : 1.0        tuesdayButton.alpha = mondayButton.alpha        wednesdayButton.alpha = mondayButton.alpha        thursdayButton.alpha = mondayButton.alpha        fridayButton.alpha = mondayButton.alpha        saturdayButton.alpha = mondayButton.alpha        sundayButton.alpha = mondayButton.alpha    }    //每个按钮的点击事件    @IBAction func dayTapped(sender : UIButton){        dayTapped(sender, day: getDayFromButton(sender))    }    //根据点击的按钮返回对应的枚举值    private func getDayFromButton(button : UIButton) -> WeekDay{        switch button{        case sundayButton:            return .Sunday        case mondayButton:            return .Monday        case tuesdayButton:            return .Tuesday        case wednesdayButton:            return .Wednesday        case thursdayButton:            return .Thursday        case fridayButton:            return .Friday        default:            return .Saturday        }    }    //点击改变按钮的选中状态，并从value中插入或删除对应的枚举值    private func dayTapped(button : UIButton, day:WeekDay){        button.selected = !button.selected        if button.selected {            row.value?.insert(day)        }        else{            row.value?.remove(day)        }    }    //设置按钮标题和图片的位置    private func imageTopTittle(button : UIButton){        guard let imageSize = button.imageView?.image?.size else{ return }        let spacing : CGFloat = 3.0        button.titleEdgeInsets = UIEdgeInsetsMake(0.0, -imageSize.width, -(imageSize.height + spacing), 0.0)        guard let titleLabel = button.titleLabel, let title = titleLabel.text else{ return }        let titleSize = title.sizeWithAttributes([NSFontAttributeName: titleLabel.font])        button.imageEdgeInsets = UIEdgeInsetsMake(-(titleSize.height + spacing), 0, 0, -titleSize.width)    }}//MARK: WeekDayRowpublic final class WeekDayRow: Row<Set<WeekDay>, WeekDayCell>, RowType{    //重写init方法    required public init(tag: String?) {        super.init(tag: tag)        displayValueFor = nil        cellProvider = CellProvider<WeekDayCell>(nibName: "WeekDaysCell")    }}

完成之后就可以用与其他Row一样的方法来使用WeekDayRow了

            <<< WeekDayRow(){                $0.value = [.Monday, .Wednesday, .Friday]        }

运行效果如图所示：

深入学习

这里列出了Eureka最基本的操作，Eureka还有更多丰富的功能，如果想要深入学习Eureka，可以前往GitHub-Eureka主页！