如何将自定义视图的框架与TableViewCell框架正确匹配?

时间:2019-04-23 18:25:56

标签: swift uitableview uiview

我有一个TableView,其中包含拉伸到单元格中的图像,并且添加了用于使图像变暗的视图。因为我只想在开始时绘制此视图,而不是每次在表中滚动时才绘制此视图,所以我将代码添加到TableViewCell的awakeFromNib中。

TableViewCell.swift

@IBOutlet weak var equipmentImageView: UIImageView!
let darkFilter = UIView()

override func awakeFromNib() {
    super.awakeFromNib()

    darkFilter.backgroundColor = .black
    darkFilter.layer.opacity = 0.6
    darkFilter.frame = self.equipmentImageView.frame
    equipmentImageView.addSubview(darkFilter)
}

我的问题是该视图的宽度与ImageView的宽度不同,所以我尝试实现的效果占据了屏幕的一半。 The dark view only applies half of the screen

我遵循了this解决方案,但问题是该解决方案仅在单元格通过上下滚动来重新创建自身之后才适用。

TableViewCell.swift

override func layoutSubviews() {
    super.layoutSubviews()
    darkFilter.backgroundColor = .black
    darkFilter.layer.opacity = 0.6
    darkFilter.frame = self.equipmentImageView.frame
    equipmentImageView.addSubview(darkFilter)

}

With LayoutSubView  function

如何在创建单元格之前应用此解决方案,并且在滚动时不会重绘?

2 个答案:

答案 0 :(得分:2)

您可以将单元格的.background的颜色设置为.black,然后降低alpha的{​​{1}},而无需添加即可达到相同的变暗效果一个新的UIView。

编辑

为了说明我的观点:这是我在Playground中绘制的一个非常草率而又快速的示例,其标题为“ Untitled.jpg”的图像证明了使用黑色单元格背景使图像褪色的效果与在顶部添加褪色的黑色层的效果相同带有图像的单元格:

结果图片:

Picture of result

代码:

equipmentImageView

答案 1 :(得分:0)

2条建议:

1)由于您正在处理单元格的IBOutlets,因此您还可以在IB图像视图顶部的IB上添加视图,然后向其添加约束以匹配图像视图的大小。 / p>

2)如果您打算以编程方式添加它,则可能需要根据单元格内容视图设置其约束。例如:

darkFilter.backgroundColor = .black
darkFilter.layer.opacity = 0.6

contentView.addSubview(darkFilter)
darkFilter.translatesAutoresizingMaskIntoConstraints = false
darkFilter.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true
darkFilter.leftAnchor.constraint(equalTo: contentView.leftAnchor).isActive = true
darkFilter.rightAnchor.constraint(equalTo: contentView.rightAnchor).isActive = true
darkFilter.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true