如何在 iOS 中屏蔽 UIViews

Posted 2023-03-12

【中文标题】如何在 iOS 中屏蔽 UIViews

【英文标题】：How to mask UIViews in iOS

【发布时间】：2011-06-01 09:04:57

【问题描述】：

我见过类似的问题，但没有找到可行的答案。

我想使用灰色图像屏蔽 UIView（需要转换为 alpha 比例以进行屏蔽）。 UIView 有背景。屏蔽图像应该很容易，但我想屏蔽任何 UIView。

任何线索将不胜感激。

【参考方案1】：

我不知道我脑海中的确切代码，但基本想法是拥有两个 UIView。一个 UIView 将其图像属性设置为灰度图像，而另一个 UIView 将照常设置，唯一的区别是您将初始 UIView 直接放置在包含“正常”图像的 UIView 之上。

我希望这足以让你的想法更进一步。

【讨论】：

感谢您的回答。我没有说清楚，但我想要的是将灰度图像转换为 alpha 图像（就像正常的遮罩一样），并将其应用于 UIView。

【参考方案2】：

我已经解决了这个问题几个小时，并且有一个我认为可以满足您需求的解决方案。首先，使用您认为合适的任何方式创建掩蔽图像。请注意，我们这里只需要 alpha 值，所有其他颜色都将被忽略，因此请确保您使用的方法支持 alpha 值。在此示例中，我从 .png 文件加载，但不要尝试使用 .jpg 文件，因为它们没有 alpha 值。

接下来，创建一个新层，将你的蒙版分配给它的内容，并将这个新层设置为你的 UIView 自己的层，如下所示：你应该会发现这掩盖了 UIView 及其所有附加的子视图：

UIImage *_maskingImage = [UIImage imageNamed:@"mask"];
CALayer *_maskingLayer = [CALayer layer];
_maskingLayer.frame = theView.bounds;
[_maskingLayer setContents:(id)[_maskingImage CGImage]];
[theView.layer setMask:_maskingLayer];

完成此操作后，您可以将 UIView 的背景颜色设置为您喜欢的任何颜色，并且蒙版将用于创建彩色滤镜。

编辑： 从 ios8 开始，您现在可以简单地通过将另一个视图分配给它的 maskView 属性来屏蔽视图。通用规则保持不变，因为 maskView 的 alpha 层用于确定应用它的视图的不透明度。

【讨论】：

感谢您的回答。问题是我只有灰度图像（所有点的 alpha==1）。我想将灰度图像转换为 alpha 图像。你有什么想法吗？

嗯，最好的方法是将其放入 Photoshop 之类的图像编辑套件中并在那里进行转换。另一种方法是通过创建新的图像上下文以编程方式执行此操作，然后在旧图像上逐个像素地读取灰色分量，并将其转换为新颜色的 alpha 分量，然后再将其绘制到新图像中.不过，这既费力又浪费时间，因为您可以在油漆包中使用更少的处理器时间。

在 Photoshop 中这很容易做到：(1) 创建一个新图层 (2) 用黑色填充其中的一部分 (3) 给它一个图层蒙版 (4) 通过您的灰度图像进入蒙版.黑色 = 透明，白色 = 不透明，灰色是不同程度的透明度。 (5) 应用图层蒙版（在图层面板中右键单击蒙版本身，然后单击“应用图层蒙版”） (6) 裁剪出您需要的图层部分。

我想说我意外投了反对票，现在它不会让我反对:(这是一个很好的答案！

【参考方案3】：

对于面向 iOS 8.0+ 的应用程序，这很有效（在这种情况下，使用渐变作为蒙版）它避免了调整蒙版大小或位置的任何需要。

// Add gradient mask to view
func addGradientMask(targetView: UIView)

    let gradientMask = CAGradientLayer()

    gradientMask.frame = targetView.bounds
    gradientMask.colors = [UIColor.blackColor().CGColor, UIColor.clearColor().CGColor]
    gradientMask.locations = [0.8, 1.0]

    let maskView: UIView = UIView()
    maskView.layer.addSublayer(gradientMask)

    targetView.maskView = maskView 

在我的例子中，我想在用户开始滚动后移除遮罩。这是通过以下方式完成的：

func scrollViewWillBeginDragging(scrollView: UIScrollView) 

    exerDetailsTableView.maskView = nil        

视图被定义为@IBOutlet：

@IBOutlet weak var exerDetailsTableView: UITableView!

结果：