拖动UICollectionViewCell时如何实现透明背景或圆角 [英] 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.

我有一个支持拖放的集合视图.被拖动的单元格在 contentView 中有一个 UIImageView，并且图像视图的背层应用了一个圆角半径.单元格中所有视图的背景颜色都是清晰的.

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. 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?

更新

事实证明，解决方案非常简单(假设 UIBezierPaths 符合您对简单的定义):

It turns out the solution is embarrassingly simple (assuming UIBezierPaths fit your definition of simple):

你需要重写UICollectionViewDragDelegate协议的collectionView(_ collectionView: UICollectionView,dragPreviewParametersForItemAt indexPath:IndexPath)方法，并返回UIDragPreviewParameters使用适当的 UIBezierPath 设置:

You need to override the collectionView(_ collectionView: UICollectionView, dragPreviewParametersForItemAt indexPath: IndexPath) method of the UICollectionViewDragDelegate protocol, and return UIDragPreviewParameters with the appropriate UIBezierPath set:

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
}

这是一个简单的实现，它对派生贝塞尔路径的 CGRect 进行硬编码 - 这适用于我的场景，因为所有单元格的大小都相同.更复杂的集合视图需要在这里进行一些自定义计算.

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. A more complex collection view would need some custom calculations here.

推荐答案

我认为这比这更容易.如果您的单元格已经具有带有圆形 UIImageView 的清晰背景，则只需将 backgroundColor 设置为 .clear 为 UIDragPreviewParameters.

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.

func collectionView(_ collectionView: UICollectionView, dragPreviewParametersForItemAt indexPath: IndexPath) -> UIDragPreviewParameters? {
  let params = UIDragPreviewParameters()
  params.backgroundColor = .clear
  return params
}

根据要求，这里是单元格的精简版

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),
    ])
  }
}

这篇关于拖动UICollectionViewCell时如何实现透明背景或圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！