Table view Custom Cell Design issue - ios

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:

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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.