iphone - 向 UIView 添加褪色和透明度

Question

我知道如何创建和动画视图，如 iOS 6+ 附带的新应用商店应用程序的共享子视图中的视图（见附件截图），但我不知道如何添加具有透明度的漂亮着色效果在这个观点上。任何人都可以提供代码示例以使UIView外观与屏幕截图中的完全相同？

PS alphaUIView 单独的属性不会做这样的事情。

Answer 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。

Answer 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)
}

Answer 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您的视图层在哪里。

Answer 4

您可以简单地使用半透明的 png 作为背景来获得这样的效果。确保将 UIView 设置opaque为NO，你会没事的。

Answer 5

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

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

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

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

这是一个类似的图像进行测试。

希望能帮助到你。

Answer 6

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

见附件邮政编码。转到 AlphaViewController 的 nib 文件并在那里查看

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

Answer 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)