向 UIView 添加褪色和透明度答案

【问题标题】：adding fading color & transparency to UIView向 UIView 添加褪色和透明度
【发布时间】：2013-02-13 13:29:00
【问题描述】：

我知道如何创建一个类似于 iOS 6+ 附带的新应用商店应用程序的 Share 子视图中的视图并为其设置动画（请参阅随附的屏幕截图），但我不知道如何添加该视图在此视图上具有透明度的着色效果。任何人都可以提供代码示例以使UIView 看起来与屏幕截图中的完全相同？

附： UIView 单独的alpha 属性不会做这样的事情。

【问题讨论】：

标签： iphone ios objective-c uiview quartz-core

【解决方案1】：

您可以将此方法添加到 UIView 类别并根据需要重用。它对给定视图应用从“theColor”到透明的线性黑色渐变。

为了使用 CAGradientLayer 对象，您的项目中应该有 QuartzCore.framework。

+ (void)addLinearGradientToView:(UIView *)theView withColor:(UIColor *)theColor transparentToOpaque:(BOOL)transparentToOpaque
{
    CAGradientLayer *gradient = [CAGradientLayer layer];

    //the gradient layer must be positioned at the origin of the view
    CGRect gradientFrame = theView.frame;
    gradientFrame.origin.x = 0;
    gradientFrame.origin.y = 0;
    gradient.frame = gradientFrame;

    //build the colors array for the gradient
    NSArray *colors = [NSArray arrayWithObjects:
                       (id)[theColor CGColor],
                       (id)[[theColor colorWithAlphaComponent:0.9f] CGColor],
                       (id)[[theColor colorWithAlphaComponent:0.6f] CGColor],
                       (id)[[theColor colorWithAlphaComponent:0.4f] CGColor],
                       (id)[[theColor colorWithAlphaComponent:0.3f] CGColor],
                       (id)[[theColor colorWithAlphaComponent:0.1f] CGColor],
                       (id)[[UIColor clearColor] CGColor],
                       nil];

    //reverse the color array if needed
    if(transparentToOpaque)
    {
       colors = [[colors reverseObjectEnumerator] allObjects];
    }

    //apply the colors and the gradient to the view
    gradient.colors = colors;

    [theView.layer insertSublayer:gradient atIndex:0];
}

请注意，您应该将 view 的 backgroundColor 设置为 clearColor，这样它就不会干扰渐变。此外，对于屏幕截图中显示的结果，transparentToOpaque 标志应为 YES。

【讨论】：

我已经按照你说的做了，但是代码没有效果，我在viewDidLoad中调用了这样的方法：[UIView addLinearGradientToView:self.testView withColor:[UIColor redColor] transparentToOpaque:YES];当然，我创建了没有问题的类别。我正在 iOS 6 模拟器上进行测试，并且 QuartzCore 框架也被添加并导入到这个 View 的页面中。
我忘记将图层的原点设置为 (0,0)。我已经编辑了帖子以反映更改。如果需要，您可以使用颜色数组中的 alpha 分量来提供“非线性”渐变。
温馨提示：请注意，您应该将视图的 backgroundColor 设置为 clearColor！

【解决方案2】：

如果有人需要，这里是 PedroSilva 的解决方案翻译成 Swift（也添加了垂直选项）

class func addLinearGradientToView(view: UIView, colour: UIColor, transparntToOpaque: Bool, vertical: Bool)
{
    let gradient = CAGradientLayer()
    let gradientFrame = CGRectMake(0, 0, view.frame.size.width, view.frame.size.height)
    gradient.frame = gradientFrame

    var colours = [
        colour.CGColor,
        colour.colorWithAlphaComponent(0.9).CGColor,
        colour.colorWithAlphaComponent(0.8).CGColor,
        colour.colorWithAlphaComponent(0.7).CGColor,
        colour.colorWithAlphaComponent(0.6).CGColor,
        colour.colorWithAlphaComponent(0.5).CGColor,
        colour.colorWithAlphaComponent(0.4).CGColor,
        colour.colorWithAlphaComponent(0.3).CGColor,
        colour.colorWithAlphaComponent(0.2).CGColor,
        colour.colorWithAlphaComponent(0.1).CGColor,
        UIColor.clearColor().CGColor
    ]

    if transparntToOpaque == true
    {
        colours = colours.reverse()
    }

    if vertical == true
    {
        gradient.startPoint = CGPointMake(0, 0.5)
        gradient.endPoint = CGPointMake(1, 0.5)
    }
    gradient.colors = colours
    view.layer.insertSublayer(gradient, atIndex: 0)
}

【讨论】：

【解决方案3】：

CAGradientLayer *layer = [CAGradientLayer layer];
layer.frame = yourView.bounds;
UIColor *blackColor = [UIColor colorWithWhite:0.42f alpha:1.0f];
UIColor *clearColor = [UIColor colorWithWhite:0.42f alpha:0.0f];
layer.colors = [NSArray arrayWithObjects:(id)clearColor.CGColor, (id)blackColor.CGColor, nil];
[myView.layer insertSublayer:layer atIndex:0];

layer 是您的视图层。

【讨论】：

这个示例产生了这个崩溃：[CALayer setColors:]: unrecognized selector sent to instance
你的视图对象的类是什么？
我的视图只是 UIView 的子类
和@Bird 建议使用myView.opaque = NO;
尝试使用颜色。例如，使用： UIColor *blackColor = [UIColor colorWithWhite:0.3f alpha:0.7f]; UIColor *clearColor = [UIColor colorWithWhite:0.0f alpha:0.7f];

【解决方案4】：

你可以简单地使用一个半透明的 png 作为背景来获得这样的效果。确保将 UIView 的 opaque 设置为 NO 就可以了。

【讨论】：

答案很好，很简单。此外，PNG 可以很小，例如 10x10（甚至 1x1），然后平铺以使其不重。

【解决方案5】：

实现这种效果不需要魔法。你应该像苹果那样做。带有小型拉伸图像的 UIImageViews。

此视图（包含图标的下半部分）使用拉伸并产生此效果的图像。

你也应该遵循这个方法。您的视图会很轻，只需在 Photoshop 中进行几次测试即可获得正确的效果。

正如我所注意到的，Apple 从未在 iPhone 上使用渐变层。它必须消耗更多的 GPU，因为它会为他们节省很多图像......

这里有一张类似的图片可供测试。

希望对你有帮助。

【讨论】：

【解决方案6】：

您只需将视图背景颜色的 alpha 值设置为您想要的值。

See attached zip code. Go to AlphaViewController's nib file and see it there

我只将子视图的 alpha 值设置为 70%。你可以根据自己的要求去做。

【讨论】：

【解决方案7】：

如果有人需要 Swift 3.X

func addLinearGradientToView(view: UIView, colour: UIColor, transparntToOpaque: Bool, vertical: Bool)
    {
        let gradient = CAGradientLayer()
        let gradientFrame = CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height)
        gradient.frame = gradientFrame

        var colours = [
            colour.cgColor,
            colour.withAlphaComponent(0.9).cgColor,
            colour.withAlphaComponent(0.8).cgColor,
            colour.withAlphaComponent(0.7).cgColor,
            colour.withAlphaComponent(0.6).cgColor,
            colour.withAlphaComponent(0.5).cgColor,
            colour.withAlphaComponent(0.4).cgColor,
            colour.withAlphaComponent(0.3).cgColor,
            colour.withAlphaComponent(0.2).cgColor,
            colour.withAlphaComponent(0.1).cgColor,
            UIColor.clear.cgColor
        ]

        if transparntToOpaque == true
        {
            colours = colours.reversed()
        }

        if vertical == true
        {
            gradient.startPoint =  CGPoint(x: 0, y: 0.5)
            gradient.endPoint = CGPoint(x: 0, y: 0.5)
        }
        gradient.colors = colours
        view.layer.insertSublayer(gradient, at: 0)
    }

Swift 3.x

中的其他方式

let gradient = CAGradientLayer()
gradient.frame = view.bounds
gradient.colors = [UIColor.blue.cgColor, UIColor.white.cgColor]
view.layer.insertSublayer(gradient, at: 0)

【讨论】：