表视图自定义单元设计问题答案

【问题标题】：Table view Custom Cell Design issue表视图自定义单元设计问题
【发布时间】：2019-05-06 15:18:01
【问题描述】：

我正在尝试创建一个具有圆角和阴影的自定义表格单元格。最终目标是创建“卡片”的外观和感觉。我的故事板设置如下。我在单元格的内容视图上创建了一个单独的视图，以便我可以操纵该视图以获得我想要的效果。问题是效果似乎只影响视图的顶部。底角不是圆形的，您还可以看到边框围绕着整个视图。我也包含了自定义单元类文件。关于如何让视图的其余部分具有圆角和边框的任何想法？

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
   }
 }

主情节提要中 UiTableview 的屏幕截图：

输出截图：

【问题讨论】：

tableview 的行高是多少？还有，collectionView 的高度是多少？
尝试设置行之间的垂直间距。例如见this answer。
请查看我的答案并尝试实施建议的方法
单元格为113，集合视图为91

标签： ios swift uitableview uiview

【解决方案1】：

使用这个方法：

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
   }
}

像这样调用这个方法：

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

您可以在tableCell的方法'awakeFromNib'中调用该方法。

注意：也要给表格行适当的高度。

【讨论】：

我还必须在 tableview 委托中手动将表格高度设置为 113。谢谢！
如果你使用 Storyboard，你可以从 Storyboard 中给出行高。无需使用“heightForRow”方法

【解决方案2】：

如果您的 UICollectionView 约束的子视图正确，则在 UITableView 委托方法中的 heightForRowAt 和estimatedHeightForRowAt 中设置高度自动尺寸，并在开始渲染后重新加载 UICollectionView。

【讨论】：

【解决方案3】：

在单元格 contentView 和 containerView （*来自您附加的图像）之间的所有侧面保持一些填充以在所有侧面都可见阴影。

【讨论】：

【解决方案4】：

您可以添加以下方法，其中大小将是您的偏好并将“UICollectionViewDelegateFlowLayout”委托设置为您的类

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
}

通过应用这些方法，您可以以正确的方式显示单元格，当前您的单元格大小超过了默认大小，因此发生这种情况，通过实现 size 方法将删除默认高度并替换为您请求的单元格大小。

希望这能解决您的问题。

【讨论】：