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

时间:2018-12-05 05:36:15

标签: ios swift uitableview uiview

我正在尝试创建一个自定义表格单元,该单元具有圆角和阴影。最终目标是创建“卡片”外观。我的情节提要设置如下。我在单元的内容视图上创建了一个单独的视图,以便可以操纵该视图以具有所需的效果。问题在于效果似乎只影响视图的顶部。底角不是圆角,您还可以看到边框围绕整个视图。我也包括了自定义单元类文件。关于如何使其余视图具有圆角和边框的任何想法?

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 的屏幕截图:

Screen Shot

输出的屏幕截图:

Screen Shot

4 个答案:

答案 0 :(得分: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”方法中调用此方法。

注意:还请给表行适当的高度。

答案 1 :(得分:0)

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

答案 2 :(得分:0)

在单元格contentView和containerView之间的所有侧面(从附加的图像中*)到所有侧面的可见阴影之间保持一些填充。

答案 3 :(得分:0)

您可以添加以下方法,其中大小将是您的首选项,然后将“ 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方法将删除默认高度并替换为您请求的单元格大小。

希望这可以解决您的问题。