具有淡入淡出或模糊效果的 UIView 边框 [英] UIView border with fade or blur effect

问题描述

我正在寻找向任意 UIView 添加逐渐褪色或模糊边框(我不完全知道如何命名此效果)的方法.我不需要动画效果，我需要静态效果，例如我的 UITableView 边框是部分透明的.我做了一个例子:

I'm looking for method to add gradually fading or maybe blured border (I don't exactly know how to name this effect) to arbitrary UIView. I don't need animated effect, I need static effect, for example I my UITableView border being partially transparent. I've made the example:

所以你可以看到我在做什么.

So you can see what I'm trying to do.

谁能帮帮我?

推荐答案

我找到了解决方案 - 我使用了 CALayer 的属性掩码:

I've found a solution - I've useed CALayer's property mask:

 CALayer *viewLayer = [back layer];
 CALayer* maskCompoudLayer = [CALayer layer];

 maskLayer.bounds = viewLayer.bounds;

 [maskLayer setPosition:CGPointMake(160, CGRectGetHeight(maskCompoudLayer.frame)/2.0)];     

 CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
 CGContextRef context = CGBitmapContextCreate (NULL, 320, 480, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);     

 CGFloat colors[] = {
      0.5, 0.5, 0.5, 0.0, //BLACK
      0.0, 0.0, 0.0, 1.0, //BLACK
 };     

 CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4));     
 CGColorSpaceRelease(colorSpace);     

 NSUInteger gradientH = 20;
 NSUInteger gradientHPos = 0;

 CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:1.0].CGColor);
 CGContextFillRect(context, CGRectMake(0, gradientHPos + gradientH, CGRectGetWidth(maskLayer.frame), CGRectGetHeight(maskLayer.frame)));     

 CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0.5 green:0.5 blue:0.5 alpha:0.0].CGColor);
 CGContextFillRect(context, CGRectMake(0, 0, 320, gradientHPos));

 CGContextDrawLinearGradient(context, gradient, CGPointMake(160, gradientHPos), CGPointMake(160, gradientHPos + gradientH), 0);     
 CGGradientRelease(gradient);     

 CGImageRef contextImage = CGBitmapContextCreateImage(context);
 CGContextRelease(context);     

 [maskLayer setContents:(id)contextImage];

 CGImageRelease (contextImage);

 viewLayer.masksToBounds = YES;
 viewLayer.mask = maskCompoudLayer;

使用此代码，我的 UITableView 带有渐变边框

Using this code I have UITableView with fading border

这篇关于具有淡入淡出或模糊效果的 UIView 边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！