iOS-如何创建具有模糊背景的Facebook反应栏? [英] IOS - How to create Facebook reaction bar with blur background?

问题描述

虽然可能不是复制Facebook设计的一周，但我希望能够设计自己的以下版本的反应指标视图.

Although it may not be the week to replicate some design of Facebook, I would like to be able to design my own version of the reaction indicator view below.

我有三个UIImageView排列在与上述相同的位置.问题在于，与Facebook不同，背景颜色可能会发生变化(即位于UIBlurEffect的顶部)，因此我无法将边框颜色设置为白色.

I have three UIImageViews lined in the same positions as above. The problem is that, unlike Facebook, the background color may change (i.e is on top of a UIBlurEffect) and therefore I am unable to set the border color to white.

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

I thought it would make sense to set the borderColor like so:

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

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

However, the underlying imageViewTwo is displayed in the border instead of the background color.

到目前为止，我有这个:

So far, I have this:

将感谢您提供一些有关如何进行此工作的帮助/想法-我在考虑口罩，但不确定是否可以.这是正确的解决方案，并且b.如何达到预期的效果.为了澄清，我无法将边框颜色设置为常量，因为它将随UIBlurEffect改变.

Would appreciate some help/ideas on how to make this work - I'm thinking of masks but not sure whether a. this is the correct solution and b. how to achieve the desired effect. To clarify, I am not able to set the border color as a constant as it will change with the UIBlurEffect.

推荐答案

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

In my opinion, there are 2 way to resolve your problem.

• 为Wow和Love创建并使用裁剪后的图像，如下图Love所示.

• Create and use clipped image for Wow and Love like below Love image.

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

Another way is using mask property of UIView. Creating a mask image and apply it for mask property.

蒙版图像看起来像.

应用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.

Both of 2 above way can help you achieve what you want in the question. Background of icons in below image is an UIVisualEffectView.

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

In my opinion, the first way with clipped image is better and faster because you don't need to apply mask for your imageView. But if you don't want to create a clipped image for some reason, you can use the second way.

有关更多详细信息，您可以查看我的演示存储库

For more detail, you can take a look at my demo repo

这篇关于iOS-如何创建具有模糊背景的Facebook反应栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！