change width of tableviewcell swift

Question

I have a tableView using IB with custom cells and prototype cells.

I'm trying to make the cells a little shorter in width than the tableView.frame to leave a little space between the left and right corners.

var cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as TableViewCell
        cell.bounds = CGRectMake(10, self.tableView.frame.origin.y, 30, self.tableView.frame.size.height)
        cell.layer.bounds = CGRectMake(10, self.tableView.frame.origin.y, 30, self.tableView.frame.size.height)
        cell.textLabel?.bounds = CGRectMake(10, self.tableView.frame.origin.y, 30, self.tableView.frame.size.height)

Update: here is a good example explaining how to add a subView to your tableView. http://natashatherobot.com/ios-frame-vs-bounds-resize-basic-uitableview-cell/

Update 2: Looks like there isn't an easy way to do this. There are 3 ways of achieving this as far as I know:

1. Add a rounded and a shorter image to your cell that has the same exact color and matches your background.
2. You could subclass tableViewCell and then play with the layoutSubviews, this way you can make it shorter before it draws the cell. I've done it but the scrolling performance sucks.
3. The best way is to ditch the tableView altogether and re-do it with a collectionView.

Alphabetic

Answer 1

The cells in the tableview are supposed to be as wide as their container.

If you need your cells to have a different width than the table view, I would suggest adding a view as subview to cell.contentView and make that view as wide as you need while making sure the contentView has clear background and no separator and all (so that it appears it is not there).

Another solution would be to have the tableView not as wide as it's superview by adding the left/right padding to it. But the you would have the issue that on the left and right side, where the padding is, you won't be able to scroll the tableView

I consider the cleanest solution to use a collectionView. It is not that much different than a tableView and you can configure the entire size of the cell, not just the height.

Hope this helps you fix your problem. Let me know if you need more help.

Hadsall

Multumesc Catalina, looks like you are right. I'll have to add a subview. I updated my question with a good example I found. – Alphabetic

Answer 2

Swift 3:

For people still looking for a good solution, there's an easier and more effective alternative to using layoutSubviews or re-doing the whole thing with collectionView.

If you have already subclassed the tableViewCell, then in your TableViewController class you can add this to add a plain white border to each side of the table view cell.

public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

          // make sure in storyboard that your cell has the identifier "cell" and that your cell is subclassed in "TableViewCell.swift"
          let cell = tableView.dequeueReusableCell(withIdentifier: "Cell") as! TableViewCell

          // the following code increases cell border on all sides of the cell
          cell.layer.borderWidth = 15.0
          cell.layer.borderColor = UIColor.white.cgColor

          return cell;

}

If you want to add different sized borders to each side of the cell, you can also do this:

public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

          let cell = tableView.dequeueReusableCell(withIdentifier: "Cell") as! TableViewCell


        // the following code increases cell border only on specified borders
        let bottom_border = CALayer()
        let bottom_padding = CGFloat(10.0)
        bottom_border.borderColor = UIColor.white.cgColor
        bottom_border.frame = CGRect(x: 0, y: cell.frame.size.height - bottom_padding, width:  cell.frame.size.width, height: cell.frame.size.height)
        bottom_border.borderWidth = bottom_padding

        let right_border = CALayer()
        let right_padding = CGFloat(15.0)
        right_border.borderColor = UIColor.white.cgColor
        right_border.frame = CGRect(x: cell.frame.size.width - right_padding, y: 0, width: right_padding, height: cell.frame.size.height)
        right_border.borderWidth = right_padding

        let left_border = CALayer()
        let left_padding = CGFloat(15.0)
        left_border.borderColor = UIColor.white.cgColor
        left_border.frame = CGRect(x: 0, y: 0, width: left_padding, height: cell.frame.size.height)
        left_border.borderWidth = left_padding

        let top_border = CALayer()
        let top_padding = CGFloat(10.0)
        top_border.borderColor = UIColor.white.cgColor
        top_border.frame = CGRect(x: 0, y: 0, width: cell.frame.size.width, height: top_padding)
        top_border.borderWidth = top_padding


        cell.layer.addSublayer(bottom_border)
        cell.layer.addSublayer(right_border)
        cell.layer.addSublayer(left_border)
        cell.layer.addSublayer(top_border)


        return cell;

}

Hope this helps.

Unglue

Thx, but this is not change cell width! – Aspiration

@SAt :Are you able to change the cell width? – Torrlow

Answer 3

I found the other answers unhelpful/incorrect, but found what I needed in one of the answers here:

How to set the width of a cell in a UITableView in grouped style

The key is, if you have a custom cell (which OP has, and most apps would have anyway), then you can override the setFrame method to whatever width you need. No need to redesign your app or do anything tricky.

Viaduct