UIView 上的渐变蒙版

Posted 2023-03-10

【中文标题】UIView 上的渐变蒙版

【英文标题】：Gradient mask on UIView

【发布时间】：2011-09-21 21:24:09

【问题描述】：

我有一个 UIView，希望它的底部淡出为 0 不透明度。

是否可以对 UIView (CALayer) 执行此操作以影响整个 UIView 及其内容？

【问题讨论】：

对于其他使用渐变蒙版的人来说，如果应用于UIStackView，它将不起作用。

【参考方案1】：

是的，您可以通过将CAGradientLayer 设置为视图的图层蒙版来实现：

#import <QuartzCore/QuartzCore.h>

...

CAGradientLayer *maskLayer = [CAGradientLayer layer];

maskLayer.frame = view.bounds;
maskLayer.colors = @[(id)[UIColor whiteColor].CGColor, (id)[UIColor clearColor].CGColor];
maskLayer.startPoint = CGPointMake(0.5, 0);
maskLayer.endPoint = CGPointMake(0.5, 1.0);

view.layer.mask = maskLayer;

附注您还需要将QuartzCore.framework 链接到您的应用程序才能正常工作。

【讨论】：

我知道这是旧的，但是获取 cgcolor 然后将它们桥接到指针有什么关系？ colors 属性表示它是一个 UIColors 数组。

abstract from docs - colors - CGColorRef 对象数组，定义每个渐变色标的颜色。为了将它们存储在 NSArray 中，我们将它们转换为 id。坦率地说，我认为我们在使用 ARC 时需要桥接转换，但是现在编译的代码很好

【参考方案2】：

使用图像作为掩码来防止布局问题。

虽然弗拉基米尔的回答是正确的，但问题是在视图更改后同步渐变层。例如，当您旋转手机或调整视图大小时。因此，您可以使用图像来代替图层：

@IBDesignable
class MaskableLabel: UILabel 
    var maskImageView = UIImageView()

    @IBInspectable
    var maskImage: UIImage? 
        didSet 
            maskImageView.image = maskImage
            updateView()
        
    

    override func layoutSubviews() 
        super.layoutSubviews()
        updateView()
    

    func updateView() 
        if maskImageView.image != nil 
            maskImageView.frame = bounds
            mask = maskImageView
        
    

然后使用简单的渐变蒙版like this，您甚至可以在故事板中看到它。

注意：

您可以使用此class 并将UILabel 替换为您喜欢子类化的任何其他视图。

? 骨头：

您可以使用任何其他形状的图像作为蒙版。