Table view Custom Cell Design issue

Question

I am trying to create a custom table cell that will have rounded corners and a shadow. The end goal being to create a "card" look and feel. My storyboard setup is below. I created a separate view onto the content view of the cell so that I could manipulate that view to have the effects that I want. The problem is that the effects only seem to be affecting the top portion of the view. The bottom corners and not rounded and you can also see that the border is surrounding the entire view. I have included the custom cell class file as well. Any ideas on how to get the rest of the view to have the rounded corners and border?

class EventTableCell: UITableViewCell {

@IBOutlet weak var collectionView: UIView!
@IBOutlet weak var address: UILabel!
@IBOutlet weak var statusImage: UIImageView!
@IBOutlet weak var customerName: UILabel!
@IBOutlet weak var customerTime: UILabel!
override func awakeFromNib() {
    super.awakeFromNib()
    //collectionView.backgroundColor = UIColor.gray
    collectionView.clipsToBounds = false
    collectionView.layer.cornerRadius = 10
    collectionView.layer.borderWidth = 1
    collectionView.layer.borderColor = UIColor.gray.cgColor
    collectionView.layer.shadowColor = UIColor.lightGray.cgColor
    collectionView.layer.shadowOpacity = 1
    collectionView.layer.shadowOffset = CGSize.zero
    collectionView.layer.shadowRadius = 3
   }
 }

Screen Shot of UiTableview in Main Storyboard:

Screen Shot of output:

What is tableview's row height? and, what is collectionView's height? — McDonal_11, Dec 05 '18 at 05:41
try setting vertical spacing between your rows. e.g see [this answer](https://stackoverflow.com/a/33931591/7698092). — Awais Fayyaz, Dec 05 '18 at 06:35
Please checkout my answer and trying to implement suggested method — Anita Nagori, Dec 05 '18 at 10:07

score 1 · Answer 1 · answered Dec 05 '18 at 07:46

Use this method:

extension UIView {

func addShadow(offset: CGSize, color: UIColor, radius: CGFloat, opacity: Float) {
    layer.masksToBounds = false
    layer.shadowOffset = offset
    layer.shadowColor = color.cgColor
    layer.shadowRadius = radius
    layer.shadowOpacity = opacity

    let backgroundCGColor = backgroundColor?.cgColor
    backgroundColor = nil
    layer.backgroundColor =  backgroundCGColor
   }
}

Call this method like this:

view.addShadow(offset: CGSize(width: 5, height: 5), color: .lightGray, radius: 5, opacity: 0.5)

You can call this method in the method 'awakeFromNib' of tableCell.

Note: Give proper height of table row also.

I also had to manually set the table height to 113 in the tableview delegate. Thanks! — Kevin Gardenhire, Dec 06 '18 at 17:30
You can give row height from Storyboard if you using Storyboard. No need to use the method 'heightForRow' — nitin.agam, Dec 06 '18 at 18:41

score 0 · Answer 2 · answered Dec 05 '18 at 06:11

0

If your subviews of UICollectionView constraints are correct then set height automatic dimension in heightForRowAt and estimatedHeightForRowAt in UITableView delegate methods and reload the UICollectionView after start rendering.

answered Dec 05 '18 at 06:11

Abhishek Jadhav

706
5
12

score 0 · Answer 3 · answered Dec 05 '18 at 08:23

0

Maintain some padding to all sides between cell contentView and containerView (*from your attached image) to visible shadow in all sides.

answered Dec 05 '18 at 08:23

score 0 · Answer 4 · answered Dec 05 '18 at 10:07

You can add following method where size will be yours preference and set "UICollectionViewDelegateFlowLayout" delegate to your class

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
{
    let cellSize = CGSize(width: 100, height: 100)
    return cellSize
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat
{
    return 10
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets
{
    let sectionInset = UIEdgeInsetsMake(10, 10, 10, 10)
    return sectionInset
}

By applying these method you can able to display cell with proper way , currently your size of cell is exceeded then default size so this is happening , by implementing size method will remove default height and replace with your requested cell size.

Hope this will solve your problem.

Table view Custom Cell Design issue

4 Answers4