Eureka: How do I add margin/padding directly to an existing cell?

[sureshjoshi]

Hi, I have a custom form style, which looks like this:

I'd like all of my forms to have a similar look, so I'm not sure if this should be a custom Xib, or whether I can just override a cell format.

My thought was just to alter the text color, background color, and margins of existing cells.. However, I'm not sure how to alter the margin of a cell.

[mtnbarreto]

@sureshjoshi

It seems to me the easiest way to add padding/margin is changing the contentView.layoutMargins as is shown below.

Eureka allows you to customize the look a feel of a particular row type by just setting up defaultCellSetup or/and defaultCellUpdate properties.

let's say you want to change how TextRow looks like:

EmailRow.defaultCellSetup = { cell, row in
      cell.height = { 50 } // increase the height 6 pt
      ......
      cell.layoutMargins = UIEdgeInsetsZero // remove table cell separator margin
      cell.contentView.layoutMargins.left = 20 // set up left margin to 20
      .... . 
      cell.contentView.backgroundColor = .clearColor()
      cell.backgroundColor = .orangeColor()
      .... 
}

Even though cell, row parameters are strongly typed, I could not get Xcode intellisense work on them. Apparently is a Xcode 7.0.1 bug.

Look at this blogpost to know more about how to customize the cells: http://blog.xmartlabs.com/2015/09/29/Introducing-Eureka-iOS-form-library-written-in-pure-Swift/#fully-customizable.

If defaultCellSetup and defaultCellUpdate do not fit your needs, you would probably need to create a custom row: https://github.com/xmartlabs/Eureka#how-to-create-custom-rows-and-cells-- . Also take a look at Eureka example project which contains 2 custom row/cells.

[sureshjoshi]

@mtnbarreto Thanks Martin! That helps alot!

Is there a way to set similar visual defaults for a Section?

[bdrelling]

@sureshjoshi Were you ever able to customize the form the way you wanted? I'm having a lot of difficulty with this working.

[sureshjoshi]

Hey @bdrelling, no we actually ended up just making a new UI from scratch which matched what we needed. It's unfortunate, as we probably re-did about half the work that was in Eureka.

[bdrelling]

Was hoping you'd have better news, but unfortunately we're at the same place. Eureka is such a great framework but we really need to be able to change the look to make it more our own.

Thanks for the quick response.

[mtnbarreto]

These may be helpful.. http://stackoverflow.com/questions/25770119/ios-8-uitableview-separator-inset-0-not-working, http://stackoverflow.com/questions/10167266/how-to-set-cornerradius-for-only-top-left-and-top-right-corner-of-a-uiview.

I recommend you guys to play with layoutMargins and separatorInset properties of cell, cell content view and table view. Also set up table view using Interface Builder by connecting tableView outlet.
Notice that you may also have to deal with (preservesSuperviewLayoutMargins)[https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/#//apple_ref/occ/instp/UIView/preservesSuperviewLayoutMargins] property depending on your particular use case scenario.

We can add corner radius to section by adding custom section header/footer views and set up relevant view properties to draw the corners. Alternatively we can draw the corner on first and last section row in case we don't need to display any section header/footer.

[Coners]

after literally months of searching -- you do it like this -- YES this works!

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath)
{
    let verticalPadding: CGFloat = 8

    let maskLayer = CALayer()
    maskLayer.cornerRadius = 10    //if you want round edges
    maskLayer.backgroundColor = UIColor.black.cgColor
    maskLayer.frame = CGRect(x: cell.bounds.origin.x, y: cell.bounds.origin.y, width: cell.bounds.width, height: cell.bounds.height).insetBy(dx: 0, dy: verticalPadding/2)
    cell.layer.mask = maskLayer
}

[Le0nX]

@Coners, thx for your advice! Is it possible to set only one margin from the left?

[aluco100]

Hi there,

I put this and it's working:

$0.cell.layoutMargins = .zero
$0.cell.separatorInset = .zero
$0.cell.preservesSuperviewLayoutMargins = false
$0.cell.contentView.layoutMargins.left = 8.0

Happy coding