[IOS] Eureka using basic and custom Cell

Foreword

EurekaIs a pure Swiftlibrary, it can help you create a fast gracefully TableView. The library itself offers a number of different functions built Cell, use is also very simple. If the built-in Cellstyle or function can not meet the need, you can also customize Cell.

Eureka is set using TableViewcode something like the following:

form +++ Section()
         <<< LabelRow() {
            $0.title = "LabelRow"
            $0.value = "Default Value"
            }.cellSetup({ (cell, row) in
                cell.accessoryType = .disclosureIndicator
            }).onCellSelection({ (cell, row) in
                print("cell selection")
            })

This article describes the Eurekabasic usage and custom Cellsteps. You can here see the Demo of this article.

Basic use

EurekaThe basic use of mainly three steps

1. Create ViewControllerand ViewControllerset FormViewControllersubclass
2. AddSection
3. AddRow

New`ViewController`

Display tableViewfirst have a controller, where we create and set it to a controller FormViewControllersubclasses, as follows:

class ViewController: FormViewController {
   override func viewDidLoad() {
       super.viewDidLoad()
   }
}

FormViewControllerItself is a UIViewControllersubclass, and Eurekaframe has been added and set up tableView, so we do not have to worry about the layout of the development, focus only on the interaction logic on it.

Add to`Section`

FormViewControllerIn tableViewthe styleproperty value .grouped, here we add the number Sectionwill automatically generate the number of groups, add the following syntax:

form +++ Section()

Some people see here perhaps a bit strange, +++is what grammar, like never seen ah. In fact, this is Eurekathe use of Swift custom operator characteristics, define +++the infix operator that the source file is so defined:

infix operator +++ : FormPrecedence

Add on top of this Sectionsyntax is defined like this:

@discardableResult
public func +++ (left: Form, right: Section) -> Form {
    left.append(right)
    return left
}

Here Formcomply with RangeReplaceableCollectionthis agreement, rewrite appendthis method realization are interested can go to the source.

Add to`Row`

RowCreate and set up the core of all the steps, all the interaction logic are done here. EurekaBuilt dozens of commonly used Row, here we add the three most common Row:

form +++ Section()
            <<< LabelRow() {
            $0.title = "LabelRow"
            $0.value = "Default Value"
            }.cellSetup({ (cell, row) in
                cell.accessoryType = .disclosureIndicator
            }).onCellSelection({ (cell, row) in
                print("cell selection")
            })
            <<< TextRow(tag: "TextRow")
                .cellSetup({ (cell, row) in
                    row.tag = "TextRow"
                    row.title = "TextRow"
                    row.placeholder = "Input your message"
                })
                .cellUpdate({ (cell, row) in
                    print("cell update")
                })
            <<< SwitchRow() {
                $0.tag = "SwitchValue"
                $0.title = "SwitchRow"
                $0.value = true
                }.onChange({ (row) in
                    print("value changed: \(row.value ?? false)")
                })

<<<Also is Eurekathe custom infix operator, the role is Rowadded to the corresponding Sectionin. In the above code, I was in Rowthe closure of a method for generating titleand valueassignment, this operation can also be placed cellSetup(this operation will only method Rowis called when created), the effect is the same. Dynamically refreshed values need to cellUpdateset the process. EurekaAlso provided onCellSelectionand onChangethis response method, in fact, which defines the logic to respond.

At this point, Eurekathe basic use it all done. If the Eurekaframe comes with Rowhas been able to fully meet your needs, you do not look down. But if you are not satisfied with the built-in Row, so we continue to look at how to customize CellandRow

customize`Cell`

Here we define a simulation software update Cell, the effect is as follows:

Renderings

Definition of the structure

First, we need a structure Softwareto facilitate the Cellassignment:

enum UpdateState: Int {
    case toUpdate = 0
    case updating
    case alreadyNewest
}

struct Software: Equatable {
    var name: String
    var updateState: UpdateState
}

func == (lhs: Software, rhs: Software) -> Bool {
    return lhs.name == rhs.name
}

One thing to note here is that class or structure definition must comply with Equatablethe agreement, or in the custom Cellwhen in use error.

definition`Cell`

Defined the structure, the next step is to realize Cellpart.

Custom Eureka's Celland common custom UITableViewof Cellthe same, we must first choose to use pure code created or xibcreated. Here we use the xibmethod. New Custom Cell, as shown below:

Adding Cell

Custom layout, Cellwiring, UpdateCellthe code is as follows:

final class UpdateCell: Cell<Software>, CellType {

    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var updateButton: UIButton!
    @IBOutlet weak var aniContainerView: UIView!
    @IBOutlet weak var noNeedUpdateLabel: UILabel!
    
    private var shapeLayer = CAShapeLayer()
    
    override func setup() {
        
        selectionStyle = .none
        height = { return 44 }
        
        //这里省略布局代码

    }
    
    override func update() {
        guard let software = row.value else {
            return
        }
        titleLabel.text = software.name
        updateUI(software.updateState)
    }
    
}

Creating a UpdateCellclass, there are several points to note:

Designated as Cellthe assignment using class
Compliance CellTypeAgreement
Specified Cellheight

In the above code, the Setupmethod will only be Cellinvoked when you create once, where you can write the code layout, and Updatethe method will be called each time refresh, where you can give Cellthe subViewsassignment.

definition`Row`

Next also need to customize Row, subordinate to the above, we have just defined Cell, and loaded inside xib:

final class UpdateRow: Row<UpdateCell>, RowType {
    
    required init(tag: String?) {
        super.init(tag: tag)
        cellProvider = CellProvider<UpdateCell>(nibName: "UpdateCell")
    }
    
}

Add custom `Cell`to `Section`the

Custom CellOnce created, you can use the framework as that comes Row, like to use our custom Row:

<<< UpdateRow() {
                $0.value = Software(name: "My Software", updateState: .toUpdate)
            }

to sum up

In fact, Eurekathe use of relatively simple, the proficiency will be to quickly build UITableViewa weapon. Demo herein can in here to see.