[英]How to achieve transparent background or rounded corners when dragging a UICollectionViewCell
I'm sure there must be a simple way of doing this, but I've spent a long time down various rabbit holes without success so far.我确信一定有一种简单的方法可以做到这一点,但是到目前为止,我已经花了很长时间在各种兔子洞中没有成功。
I have a collection view which supports drag and drop.我有一个支持拖放的集合视图。 The cells being dragged have a
UIImageView
in the contentView
, and the image view's backing layer has a corner radius applied.被拖动的单元格在
contentView
中有一个UIImageView
,并且图像视图的支持层应用了角半径。 The background color for all views in the cell is clear.单元格中所有视图的背景颜色清晰。
When dragging, the cell has a white background which shows up around the corners of the image view:拖动时,单元格具有白色背景,显示在图像视图的角落周围:
Is there a way of rounding the entire draggable view;有没有办法将整个可拖动视图四舍五入? or setting its background to clear so the annoying white border isn't visible?
或将其背景设置为清除以使烦人的白色边框不可见?
UPDATE更新
It turns out the solution is embarrassingly simple (assuming UIBezierPaths
fit your definition of simple):事实证明,解决方案非常简单(假设
UIBezierPaths
符合您对简单的定义):
You need to override the collectionView(_ collectionView: UICollectionView, dragPreviewParametersForItemAt indexPath: IndexPath)
method of the UICollectionViewDragDelegate
protocol, and return UIDragPreviewParameters
with the appropriate UIBezierPath set:您需要覆盖
UICollectionViewDragDelegate
协议的collectionView(_ collectionView: UICollectionView, dragPreviewParametersForItemAt indexPath: IndexPath)
方法,并返回带有相应UIDragPreviewParameters
集的 UIDragPreviewParameters:
func collectionView(_ collectionView: UICollectionView, dragPreviewParametersForItemAt indexPath: IndexPath) -> UIDragPreviewParameters? {
let previewParams = UIDragPreviewParameters()
let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 140, height: 140), cornerRadius: 20)
previewParams.visiblePath = path
return previewParams
}
This is a naive implementation which hard-codes the CGRect
from which the bezier path is derived - that works for my scenario because all cells are the same size.这是一个幼稚的实现,它对派生贝塞尔路径的
CGRect
进行硬编码 - 这适用于我的场景,因为所有单元格的大小都相同。 A more complex collection view would need some custom calculations here.更复杂的集合视图需要在这里进行一些自定义计算。
I think it's even easier than that.我认为这甚至比这更容易。 If your cell already has a clear background with a rounded UIImageView, you only need to set
backgroundColor
as .clear
for UIDragPreviewParameters
.如果你的单元格已经有一个清晰的背景和一个圆角 UIImageView,你只需要为
UIDragPreviewParameters
设置backgroundColor
为.clear
。
func collectionView(_ collectionView: UICollectionView, dragPreviewParametersForItemAt indexPath: IndexPath) -> UIDragPreviewParameters? {
let params = UIDragPreviewParameters()
params.backgroundColor = .clear
return params
}
Edit: as requested, here is a pared-down version of the cell编辑:根据要求,这是单元格的精简版本
final class MyCell: UICollectionViewCell {
// MARK: Constants
private enum Constants {
static let cornerRadius = CGFloat(8)
}
// MARK: Views
private let imageView: UIImageView = {
let imageView = UIImageView()
imageView.contentMode = .scaleAspectFill
imageView.layer.masksToBounds = true
imageView.layer.cornerRadius = Constants.cornerRadius
imageView.translatesAutoresizingMaskIntoConstraints = false
return imageView
}()
// MARK: Lifecycle
override init(frame: CGRect) {
super.init(frame: frame)
setup()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
setup()
}
override func prepareForReuse() {
super.prepareForReuse()
imageView.image = nil
}
// MARK: Public
func update(with image: UIImage) {
imageView.image = image
}
// MARK: Private
private func setup() {
contentView.backgroundColor = .clear
contentView.addSubview(imageView)
NSLayoutConstraint.activate([
imageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
imageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
imageView.topAnchor.constraint(equalTo: contentView.topAnchor),
imageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
])
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.