Eureka: Any documentation for creating a custom row/cell programmatically?

Created on 29 Feb 2016  路  4Comments  路  Source: xmartlabs/Eureka

There's documentation on the SwitchRow in the Readme for changing various options within a cell. There's also an init for the SwitchRow that shows how to load a .nib as the view for the SwitchRow. I can even see better examples of this within the Example project for FloatLabelTextField and WeekdayRow. However, I can't find any documentation on just laying out some new views programmatically and I've been searching for a long time now.

I'd like to know:

  • Where is the best place for a custom row / cell to add new views _and_ constraints?
  • Where is the best place / what is the best way to programmatically load .nib files _within_ a row, without the .nib being the entire row? (ie. if I wanted only one part of the custom row to have a .nib file that changed, but the rest of the row had the same format.)

I've included some sample code I've been working with below. It's a mess because I've just been trying to get it to display a bolded titleLabel with some margin around the contentView and the textLabel with some margin right below that.

public class TitledCell : Cell<String>, CellType {

    private var titleLabel: UILabel!

    public required init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
    }

    public override func setup() {
        super.setup()

        self.selectionStyle = .None

        self.textLabel?.numberOfLines = 0

        self.titleLabel = UILabel()
        self.titleLabel.font = UIFont.boldSystemFontOfSize(14)

        self.contentView.addSubview(titleLabel)

        NSLayoutConstraint.activateConstraints([
            self.titleLabel.topAnchor.constraintEqualToAnchor(self.contentView.topAnchor, constant: 12),
            self.titleLabel.leadingAnchor.constraintEqualToAnchor(self.contentView.leadingAnchor, constant: 12),
            self.titleLabel.trailingAnchor.constraintEqualToAnchor(self.contentView.trailingAnchor, constant: 12),
        ])

        if let textLabel = self.textLabel {
            NSLayoutConstraint.activateConstraints([
                textLabel.topAnchor.constraintEqualToAnchor(self.titleLabel.bottomAnchor, constant: 12),
                textLabel.leadingAnchor.constraintEqualToAnchor(self.contentView.leadingAnchor, constant: 12),
                textLabel.trailingAnchor.constraintEqualToAnchor(self.contentView.trailingAnchor, constant: 12),
            ])
        }
    }

    public override func update() {
        super.update()

        self.titleLabel?.text = self.row?.title
        self.titleLabel?.sizeToFit()

        self.textLabel?.text = self.row?.value
        self.textLabel?.sizeToFit()
    }
}

public final class TitledRow: Row<String, TitledCell>, RowType {
     required public init(tag: String?) {
         super.init(tag: tag)
         displayValueFor = nil
     }
}
custom row documentation

Most helpful comment

We have just published a blog post tutorial on how to create a custom row for Eureka.

All 4 comments

Saw this was assigned, but just curious if this is a thing in any way yet?

Hi @bdrelling

Where is the best place for a custom row / cell to add new views and constraints?

If the constraints and views are fixed and set only once then you should do that in the setup method. If your constraints depend on the value of your row then you will have to update the constraints in every time update gets called.

Where is the best place / what is the best way to programmatically load .nib files within a row, without the .nib being the entire row? (ie. if I wanted only one part of the custom row to have a .nib file that changed, but the rest of the row had the same format.)

This should be done in the setup method as you will not want to change this after initialization.

EDIT: Constraints should be updated in updateConstraints, not update.

We have just published a blog post tutorial on how to create a custom row for Eureka.

We have added a lot of documentation about how to create custom rows such as blogposts (https://blog.xmartlabs.com/2016/09/06/Eureka-custom-row-tutorial/, https://blog.xmartlabs.com/2016/09/23/Eureka-custom-row-tutorial-2/) and repository readme.
Every Eureka build-in row is like a custom row so you can take a look at native rows as well as Example project rows.
Also EurekaCommunity github organization provides several complex custom rows that might be helpful to create a custom row from scratch.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Tomas1405 picture Tomas1405  路  3Comments

tc picture tc  路  3Comments

thlbaut picture thlbaut  路  3Comments

smileatom picture smileatom  路  3Comments

s1rc picture s1rc  路  3Comments