具有淡入淡出或模糊效果的 UIView 边框答案

【问题标题】：UIView border with fade or blur effect具有淡入淡出或模糊效果的 UIView 边框
【发布时间】：2011-01-19 08:20:27
【问题描述】：

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

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

谁能帮帮我？

【问题讨论】：

标签： objective-c iphone uitableview uikit uiview

【解决方案1】：

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

 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 带有渐变边框

【讨论】：

能否请您详细说明它是如何与 UITableView 实际结合的？谢谢！
我也想知道你具体是怎么使用这个的。您能否发布更完整的代码块？什么是遮罩层？什么是背层？
你好，2011 年的人们。我从 2012 年开始在这里，仍然想知道细节。所以，我想我会添加一个关于我想出的答案的答案。

【解决方案2】：

我先说这个，iKiR 的回答对我来说绰绰有余。我照原样复制了代码，在我这方面经验不足的情况下，我能够毫不费力地让它工作（在UITableView上）。

新建一个UIView子类，我叫它 MaskingView
导入QuartzCore 框架！
将下面的代码粘贴到 init 中。（initWithCoder: 和/或 initWithFrame: 视情况而定）
在MaskingView 中添加要应用不透明度羽化的视图。（在Interface Builder中，用户Editor -> Embed In -> View。然后，选择新superview的类为MaskingView）
感谢 iKiR，因为我不知道代码是如何工作的，但它确实有效！

注意事项：

我正在开发一个通用应用程序，下面的代码在两个设备上都可以正常工作！ (iPhone/iPad)
使用 Embed In -> UIView 时，新视图会比子视图大一点。您必须使其完全适合子视图。但是，在调整大小之前，请确保取消选中 autoresize subviews。

守则：

CALayer *viewLayer = [self layer];
CALayer* maskLayer = [CALayer layer];

maskLayer.bounds = viewLayer.bounds;

[maskLayer setPosition:CGPointMake(CGRectGetWidth(viewLayer.frame)/2.0, CGRectGetHeight(viewLayer.frame)/2.0)];     

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate (NULL, viewLayer.bounds.size.width, viewLayer.bounds.size.height, 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:(__bridge id)contextImage];

CGImageRelease (contextImage);

viewLayer.masksToBounds = YES;
viewLayer.mask = maskLayer;

【讨论】：

【解决方案3】：

您可以尝试在 UITableView 的底部放置一个半透明的 PNG 文件。

【讨论】：

是的，但在这种情况下，我必须为不同的背景设置不同的 PNG，我想找到一个通用的解决方案

【解决方案4】：

Cocoanetics 有一个教程可以做到这一点。

【讨论】：

这仅在您使用静态彩色背景时有效，不适用于图像背景，因为本教程在您想要“淡出”的视图顶部添加了彩色渐变

【解决方案5】：

这是 iKiR 和 Mazyod 的答案，翻译为 Xamarin.iOS (Monotouch)。请注意，如果您只需将正确的标志传递给 DrawLinearGradient 方法，则无需在渐变前后绘制矩形：

var vl = myView.Layer;
var l = new CALayer ();
l.Frame = new RectangleF(vl.Frame.Width/2, vl.Frame.Height/2,
            vl.Frame.Width, vl.Frame.Height) ;
var cs = CGColorSpace.CreateDeviceRGB ();
var g = new CGBitmapContext (null, 
            (int) vl.Bounds.Size.Width, (int)vl.Bounds.Size.Height, 
            8, 0, cs, CGImageAlphaInfo.PremultipliedLast);
var colors = new CGColor[] { UIColor.FromWhiteAlpha(1, 0).CGColor, 
            UIColor.FromWhiteAlpha(1, 1f).CGColor };
var grad = new CGGradient (cs, colors, new float[] { 0f, 1f });
int gradH = 20, gradHPos = 0;
g.DrawLinearGradient (grad, 
            new PointF (l.Frame.Width / 2, gradHPos), new PointF (l.Frame.Width / 2, gradHPos + gradH), 
            CGGradientDrawingOptions.DrawsBeforeStartLocation | CGGradientDrawingOptions.DrawsAfterEndLocation);
grad.Dispose ();

l.Contents = g.ToImage ();
g.Dispose ();

vl.Mask = l;
vl.MasksToBounds = true;

【讨论】：