[快速学会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'@H_404_61@
platform@H_404_61@ :ios,'9.0'@H_404_61@
use_frameworks!

target 'Web'@H_404_61@ do@H_404_61@
pod 'Eureka'@H_404_61@,'~> 1.6'@H_404_61@
end@H_404_61@@H_404_61@
xcodeproj 'Desktop/Web/Web.xcodeproj'@H_404_61@

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

再执行命令：

$ @H_404_61@pod install

其他操作

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

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

import@H_404_61@ Eureka

创建表单

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

import@H_404_61@ UIKit
import@H_404_61@ Eureka

//ViewController继承于FormViewController@H_404_61@
class@H_404_61@ MyViewController: FormViewController {

    override@H_404_61@ func viewDidLoad() {
        super@H_404_61@.viewDidLoad()

        //表单form增加一个Section区域，区域名为First form@H_404_61@
        form +++ Section("First form"@H_404_61@)

            //在区域中添加一个ButtonRow（ButtonRow为点击直接触发事件的行），行tag为Rows@H_404_61@
            <<< ButtonRow("Rows"@H_404_61@){
                //设置行标题为行tag@H_404_61@
                $0.@H_404_61@title = $0.@H_404_61@tag
                //设置点击事件，执行名为"Main"的Segue（需在Interface Builder中自定义）@H_404_61@
                $0.@H_404_61@presentationMode = .SegueName(segueName: "Main"@H_404_61@,completionCallback: nil)
        }
              //自定义Row，在后面会讲到@H_404_61@
// <<< WeekDayRow(){@H_404_61@
// $0.value = [.Monday,.Wednesday,.Friday]@H_404_61@
// }@H_404_61@
    }

    override@H_404_61@ func didReceiveMemoryWarning() {
        super@H_404_61@.didReceiveMemoryWarning()
    }
}

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

基础表单

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

//设置标签行的默认内容颜色为橙色@H_404_61@
        LabelRow.defaultCellUpdate = { cell,row in@H_404_61@ cell.detailTextLabel?.textColor = .orangeColor() }
        //设置勾选行中勾颜色为橙色@H_404_61@
        CheckRow.defaultCellUpdate = { cell,row in@H_404_61@ cell.tintColor = .orangeColor() }

        //为表单添加一个区域@H_404_61@
        form +++ Section("Row examples"@H_404_61@)

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

效果如下区域Row examples 中所示

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

选择类型表单

Segment风格选择器

+++ Section("SegmentedRow examples"@H_404_61@)

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

标准选择器

+++ Section("Selectors Rows Examples"@H_404_61@)

            //选择框以对话框的形式弹出@H_404_61@
            <<< ActionSheetRow<String>(){
                $0@H_404_61@.title = "ActionSheetRow"@H_404_61@
                $0@H_404_61@.selectorTitle = "Your favorite player?"@H_404_61@
                $0@H_404_61@.options = ["Diego Forlán"@H_404_61@,"Edinson Cavani"@H_404_61@,"Diego Lugano"@H_404_61@,"Luis Suarez"@H_404_61@]
                $0@H_404_61@.value = "Luis Suarez"@H_404_61@
            }
            //选择框以Alert的形式弹出@H_404_61@
            <<< AlertRow<String>(){
                $0@H_404_61@.title = "AlertRow"@H_404_61@
                $0@H_404_61@.selectorTitle = "Who is there"@H_404_61@
                $0@H_404_61@.options = ["Summer"@H_404_61@,"another one"@H_404_61@]
                $0@H_404_61@.value = "Summer"@H_404_61@
                //选中非当前值时打印新的值@H_404_61@
                }.onChange{ (row) in@H_404_61@
                    print@H_404_61@(row.value)
                //选择框出现时，设置字体颜色为紫色@H_404_61@
                }.onPresent({ (_,to) in@H_404_61@
                    to.view.tintColor = .purpleColor()
                })
            //以navigation的形式进入到一个新界面，其中每行为选择内容@H_404_61@
            <<< PushRow<String>(){
                $0@H_404_61@.title = "PushRow"@H_404_61@
                $0@H_404_61@.options = ["Summer"@H_404_61@,"another one"@H_404_61@]
                $0@H_404_61@.value = "Cannon Fly"@H_404_61@
                $0@H_404_61@.selectorTitle = "Choose an Emoji!"@H_404_61@
        }

        //ipad特有的弹出框显示方式@H_404_61@
        if@H_404_61@ UIDevice.currentDevice().userInterfaceIdiom == .Pad {
            //获取section为当前表单最后一个区域@H_404_61@
            let section = form.last!

            section <<< PopoverSelectorRow<String>(){
                $0@H_404_61@.title = "PopoverSelectorRow"@H_404_61@
                $0@H_404_61@.options = ["Summer"@H_404_61@,"another one"@H_404_61@]
                $0@H_404_61@.value = "Seven"@H_404_61@
                $0@H_404_61@.selectorTitle = "Choose an Emoji!"@H_404_61@
            }
        }

        let section = form.last!

        section
            //图片选择器，点击从本地图片库选择@H_404_61@
            <<< ImageRow(){
                $0@H_404_61@.title = "ImageRow"@H_404_61@
            }
            //多选器，以navigation的形式进入到一个新界面，其中每行为选择内容@H_404_61@
            <<< MultipleSelectorRow<String>(){
                $0@H_404_61@.title = "MultipleSelectorRow"@H_404_61@
                $0@H_404_61@.options = ["Summer"@H_404_61@,"another one"@H_404_61@]
                $0@H_404_61@.value = ["Summer"@H_404_61@,"Leg"@H_404_61@]
                }
                .onPresent{ from,to in@H_404_61@
                    to.navigationItem.rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .Done,target: from,action: #selector(ViewController.multipleSelectorDone(_:)))
            }

pickerView风格选择器

form +++ Section("Generic picker"@H_404_61@)

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

三种风格选择器效果对比

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

PushRow效果展示：

PopoverSelectorRow效果展示：

带输入框的表单

+++ Section("FieldRow examples"@H_404_61@)
            //文本输入框@H_404_61@
            <<< TextRow(){
                $0@H_404_61@.title = "TextRow"@H_404_61@
                $0@H_404_61@.placeholder = "Placeholder"@H_404_61@
            }
            //数字输入框@H_404_61@
            <<< DecimalRow(){
                $0@H_404_61@.title = "DecimalRow"@H_404_61@
                $0@H_404_61@.value = 5@H_404_61@
                $0@H_404_61@.formatter = DecimalFormatter()
                $0@H_404_61@.useFormatterDuringInput = true
                //设置输入键盘为数字键盘@H_404_61@
                }.cellSetup{cell,_ in@H_404_61@
                    cell.textField@H_404_61@.keyboardType = .NumberPad
            }
            //url输入框@H_404_61@
            <<< URLRow(){
                $0@H_404_61@.title = "URLRow"@H_404_61@
                $0@H_404_61@.value = NSURL(string@H_404_61@: "http://blog.csdn.net/sps900608"@H_404_61@)
            }
            //电话输入框@H_404_61@
            <<< PhoneRow() {
                $0@H_404_61@.title = "PhoneRow (disabled)"@H_404_61@
                $0@H_404_61@.value = "+598 9898983510"@H_404_61@
                $0@H_404_61@.disabled = true
            }
            //姓名输入框@H_404_61@
            <<< NameRow() {
                $0@H_404_61@.title =  "NameRow"@H_404_61@
            }
            //密码输入框@H_404_61@
            <<< PasswordRow() {
                $0@H_404_61@.title = "PasswordRow"@H_404_61@
                $0@H_404_61@.value = "password"@H_404_61@
            }
            //整数输入框@H_404_61@
            <<< IntRow() {
                $0@H_404_61@.title = "IntRow"@H_404_61@
                $0@H_404_61@.value = 2016@H_404_61@
            }
            //电子邮箱输入框@H_404_61@
            <<< EmailRow() {
                $0@H_404_61@.title = "EmailRow"@H_404_61@
                $0@H_404_61@.value = "scuxiatian@foxmail.com"@H_404_61@
            }
            //推特地址输入框@H_404_61@
            <<< TwitterRow() {
                $0@H_404_61@.title = "TwitterRow"@H_404_61@
                $0@H_404_61@.value = "@xmartlabs"@H_404_61@
            }
            //账户输入框@H_404_61@
            <<< AccountRow() {
                $0@H_404_61@.title = "AccountRow"@H_404_61@
                $0@H_404_61@.placeholder = "Placeholder"@H_404_61@
            }
            //zip码输入框@H_404_61@
            <<< ZipCodeRow{
                $0@H_404_61@.title = "ZipCodeRow"@H_404_61@
                $0@H_404_61@.placeholder = "90210"@H_404_61@
            }

            +++ Section("PostalAddressRow example"@H_404_61@)

            //邮政地址输入框@H_404_61@
            <<< PostalAddressRow(){
                $0@H_404_61@.title = "Address"@H_404_61@
                $0@H_404_61@.streetPlaceholder = "Street"@H_404_61@
                $0@H_404_61@.statePlaceholder = "State"@H_404_61@
                $0@H_404_61@.postalCodePlaceholder = "ZipCode"@H_404_61@
                $0@H_404_61@.cityPlaceholder = "City"@H_404_61@
                $0@H_404_61@.countryPlaceholder = "Country"@H_404_61@

                //设置邮政地址的街道，邮编，城市，国家@H_404_61@
                $0@H_404_61@.value = PostalAddress(
                    street: "Dr. Mario Cassinoni 1011"@H_404_61@,state: nil,postalCode: "11200"@H_404_61@,city: "Montevideo"@H_404_61@,country: "Uruguay"@H_404_61@
                )
        }

效果如下所示：

自定义Row

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

import Foundation
import UIKit
import MapKit
import Eureka


//MARK: WeeklyDayCell@H_404_61@

public@H_404_61@ enum@H_404_61@ WeekDay{
    case@H_404_61@ Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday
}

public@H_404_61@ class@H_404_61@ WeekDayCell : Cell<Set<WeekDay>>,CellType{

    //与nib中的7个按钮建立链接@H_404_61@
    @IBOutlet var@H_404_61@ sundayButton: UIButton!
    @IBOutlet var@H_404_61@ mondayButton: UIButton!
    @IBOutlet var@H_404_61@ tuesdayButton: UIButton!
    @IBOutlet var@H_404_61@ wednesdayButton: UIButton!
    @IBOutlet var@H_404_61@ thursdayButton: UIButton!
    @IBOutlet var@H_404_61@ fridayButton: UIButton!
    @IBOutlet var@H_404_61@ saturdayButton: UIButton!

    //重写cell创建方法@H_404_61@
    public@H_404_61@ override@H_404_61@ func setup@H_404_61@() {
        height = {60@H_404_61@}
        row.title = nil
        super.setup()
        selectionStyle = .None

        for@H_404_61@ subviews in@H_404_61@ contentView.subviews{
            if@H_404_61@ let@H_404_61@ button = subviews as@H_404_61@? UIButton{
                //为每个按钮设置选中和未选中时的图片@H_404_61@
                button.setImage(UIImage(named: "check.png"@H_404_61@),forState: .Selected)
                button.setImage(UIImage(named: "uncheck.png"@H_404_61@),forState: .Normal)
                //默认情况下，按钮在被禁用时，图像会被画的颜色淡一些，设置为false是禁止此功能@H_404_61@
                button.adjustsImageWhenDisabled = false@H_404_61@
                //自定义函数，设置按钮标签与图片的位置@H_404_61@
                imageTopTittle(button)
            }
        }
    }

    //重写cell更新方法@H_404_61@
    public@H_404_61@ override@H_404_61@ func update@H_404_61@() {
        row.title = nil
        super.update()
        let@H_404_61@ value@H_404_61@ = row.value@H_404_61@
        //根据value是否包含某枚举值来设置对应按钮的选中状态@H_404_61@
        mondayButton.selected = value@H_404_61@?.contains(.Monday) ?? false@H_404_61@
        tuesdayButton.selected = value@H_404_61@?.contains(.Tuesday) ?? false@H_404_61@
        wednesdayButton.selected = value@H_404_61@?.contains(.Wednesday) ?? false@H_404_61@
        thursdayButton.selected = value@H_404_61@?.contains(.Thursday) ?? false@H_404_61@
        fridayButton.selected = value@H_404_61@?.contains(.Friday) ?? false@H_404_61@
        saturdayButton.selected = value@H_404_61@?.contains(.Saturday) ?? false@H_404_61@
        sundayButton.selected = value@H_404_61@?.contains(.Sunday) ?? false@H_404_61@

        //设置按钮在不同状态下的透明度@H_404_61@
        mondayButton.alpha = row.isDisabled ? 0.6@H_404_61@ : 1.0@H_404_61@
        tuesdayButton.alpha = mondayButton.alpha
        wednesdayButton.alpha = mondayButton.alpha
        thursdayButton.alpha = mondayButton.alpha
        fridayButton.alpha = mondayButton.alpha
        saturdayButton.alpha = mondayButton.alpha
        sundayButton.alpha = mondayButton.alpha
    }

    //每个按钮的点击事件@H_404_61@
    @IBAction func dayTapped(sender : UIButton){
        dayTapped(sender,day: getDayFromButton(sender))
    }

    //根据点击的按钮返回对应的枚举值@H_404_61@
    private@H_404_61@ func getDayFromButton@H_404_61@(button : UIButton) -> WeekDay{
        switch@H_404_61@ button{
        case@H_404_61@ sundayButton:
            return@H_404_61@ .Sunday
        case@H_404_61@ mondayButton:
            return@H_404_61@ .Monday
        case@H_404_61@ tuesdayButton:
            return@H_404_61@ .Tuesday
        case@H_404_61@ wednesdayButton:
            return@H_404_61@ .Wednesday
        case@H_404_61@ thursdayButton:
            return@H_404_61@ .Thursday
        case@H_404_61@ fridayButton:
            return@H_404_61@ .Friday
        default@H_404_61@:
            return@H_404_61@ .Saturday
        }
    }

    //点击改变按钮的选中状态，并从value中插入或删除对应的枚举值@H_404_61@
    private@H_404_61@ func dayTapped@H_404_61@(button : UIButton,day:WeekDay){
        button.selected = !button.selected
        if@H_404_61@ button.selected {
            row.value@H_404_61@?.insert(day)
        }
        else@H_404_61@{
            row.value@H_404_61@?.remove(day)
        }
    }

    //设置按钮标题和图片的位置@H_404_61@
    private@H_404_61@ func imageTopTittle@H_404_61@(button : UIButton){
        guard let@H_404_61@ imageSize = button.imageView?.image?.size else@H_404_61@{ return@H_404_61@ }
        let@H_404_61@ spacing : CGFloat = 3.0@H_404_61@
        button.titleEdgeInsets = UIEdgeInsetsMake(0.0@H_404_61@,-imageSize.width,-(imageSize.height + spacing),0.0@H_404_61@)
        guard let@H_404_61@ titleLabel = button.titleLabel,let@H_404_61@ title = titleLabel.text else@H_404_61@{ return@H_404_61@ }
        let@H_404_61@ titleSize = title.sizeWithAttributes([NSFontAttributeName: titleLabel.font])
        button.imageEdgeInsets = UIEdgeInsetsMake(-(titleSize.height + spacing),0@H_404_61@,-titleSize.width)
    }
}

//MARK: WeekDayRow@H_404_61@

public@H_404_61@ final class@H_404_61@ WeekDayRow: Row<Set<WeekDay>,WeekDayCell>,RowType{
    //重写init方法@H_404_61@
    required public@H_404_61@ init@H_404_61@(tag: String?) {
        super.init(tag: tag)
        displayValueFor = nil
        cellProvider = CellProvider<WeekDayCell>(nibName: "WeekDaysCell"@H_404_61@)
    }
}

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

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

运行效果如图所示：

深入学习

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