iOS-如何使用模糊背景创建Facebook反应栏？

Question

尽管现在不是复制Facebook某些设计的一周，但我希望能够设计自己的以下版本的反应指标视图。

我UIImageView在上面的相同位置排了三个s。问题在于，与Facebook不同，背景颜色可能会发生变化（即位于顶部UIBlurEffect），因此我无法将边框颜色设置为白色。

我认为这样设置是有意义的borderColor：

imageViewOne.layer.borderColor = UIColor.clear.cgColor
imageViewOne.layer.borderWidth = 2

但是，底层imageViewTwo显示在边框中，而不是背景色。

到目前为止，我有这个：

将不胜感激如何使这项工作的一些帮助/想法-我正在考虑口罩，但不确定是否可以。这是正确的解决方案，并且b。如何达到预期的效果。为了明确起见，我无法将边框颜色设置为常数，因为它将随改变UIBlurEffect。

Answer 1

我认为，有两种方法可以解决您的问题。

• 创建和使用裁剪图像Wow和Love像下面Love的图像。

  

• 另一种方法是使用的mask属性UIView。创建遮罩图像并将其应用于mask属性。

  蒙版图像看起来像。

  

  申请代码mask。

  let imvLoveMask = UIImageView.init(image: UIImage.init(named: "MASK_IMAGE_NAME"));
  imvLoveMask.frame = CGRect.init(x: 0, y: 0, width: imvLove.frame.size.width, height: imvLove.frame.size.height);
  imvLove.mask = imvLoveMask;
  

以上两种方式都可以帮助您实现问题中想要的。下图中的图标背景是UIVisualEffectView。

在我看来，剪切图像的第一种方法会更好，更快，因为您不需要为imageView应用蒙版。但是，如果由于某种原因不想创建裁剪的图像，则可以使用第二种方法。

有关更多详细信息，您可以看一下我的演示仓库