如何在IOS中创建Box-Shadow

Question

我想设计一个像

这样的登录页面

在此页面中使用ios中的框阴影我尝试了图层阴影 like this 但这一个没有显示像上面的图像PLZ指南。

我试过

imageView.layer.shadowColor = [UIColor purpleColor].CGColor;
imageView.layer.shadowOffset = CGSizeMake(0, 1);
imageView.layer.shadowOpacity = 1;
imageView.layer.shadowRadius = 1.0;
imageView.clipsToBounds = NO;

但它显示

提前致谢

更新

使用holex代码：

UIImageView *imag = (UIImageView*)[self.view viewWithTag:1];
    imag = [[UIImageView alloc] initWithFrame:CGRectMake((screenWidth/100)*12, (screenHeight/100)*10, (screenWidth/100)*75, (screenHeight/100)*61)];
    [imag setBackgroundColor:[UIColor whiteColor]];
    [imag.layer setOpacity:0.4];
    [imag.layer setShadowOpacity:1.0];
    [imag.layer setShadowColor:[[UIColor blackColor] CGColor]];
    [imag.layer setShadowOffset:CGSizeMake(0.0, 0.0)];
    [imag.layer setShadowRadius:8.0];
    [imag setClipsToBounds:FALSE];
    [imag.layer setMasksToBounds:FALSE];
    [self.view addSubview:imag];

ios 6它显示如下图像，但它适用于ios 7

Answer 1

我的屏幕上有这个：

使用此代码段：

[_backgroundBoxWithShadow.layer setOpacity:0.4];
[_backgroundBoxWithShadow setBackgroundColor:[UIColor whiteColor]];
[_backgroundBoxWithShadow.layer setShadowOpacity:1.0];
[_backgroundBoxWithShadow.layer setShadowColor:[[UIColor blackColor] CGColor]];
[_backgroundBoxWithShadow.layer setShadowOffset:CGSizeMake(0.0, 0.0)];
[_backgroundBoxWithShadow.layer setShadowRadius:8.0];

[_imaginaryTextBoxWithShadow.layer setShadowColor:[[UIColor blackColor] CGColor]];
[_imaginaryTextBoxWithShadow.layer setShadowOffset:CGSizeMake(-4.0, 4.0)];
[_imaginaryTextBoxWithShadow.layer setShadowRadius:4.75];
[_imaginaryTextBoxWithShadow.layer setShadowOpacity:0.4];

---

注意：没有一个视图包含另一个视图，它们是同一个superview中的兄弟。但是结果看起来与我视图中的原始屏幕截图相同 - 您仍然可以使用值来优化结果以满足您的最终愿望。

---

更新

您根据我的回答发布了代码片段，并说“not working”：

CGFloat screenWidth = self.view.bounds.size.width;
CGFloat screenHeight = self.view.bounds.size.height;

// BEGIN - your code
UIImageView *imag = (UIImageView *)[self.view viewWithTag:1]; // the line is pointless here, anyway...
imag = [[UIImageView alloc] initWithFrame:CGRectMake((screenWidth/100)*12, (screenHeight/100)*10, (screenWidth/100)*75, (screenHeight/100)*61)];
[imag setBackgroundColor:[UIColor whiteColor]];
[imag.layer setOpacity:0.4];
[imag.layer setShadowOpacity:1.0];
[imag.layer setShadowColor:[[UIColor blackColor] CGColor]];
[imag.layer setShadowOffset:CGSizeMake(0.0, 0.0)];
[imag.layer setShadowRadius:8.0];
// END - your code

[self.view addSubview:imag];

它在我身边的真正 iPhone5上看起来如何，看起来效果很好：

如果您不同，请发布截图（！）。

---

注意：您必须同时保留视图clipsToBounds和图层masksToBounds FALSE，否则阴影将被切断。

---

在 Interface Builder 中看起来正确无误：

或者你可以明确地将它添加到你的代码中：

[imag setClipsToBounds:FALSE];
[imag.layer setMasksToBounds:FALSE];

---

更新iOS6.1

最终结果发现，你需要iOS6的解决方案，我发现该解决方案在我的iOS6.1设备上运行良好：

[_backgroundBoxWithShadow.layer setOpacity:0.4];
[_backgroundBoxWithShadow setBackgroundColor:[UIColor whiteColor]];
[_backgroundBoxWithShadow.layer setShouldRasterize:TRUE];
[_backgroundBoxWithShadow.layer setRasterizationScale:[[UIScreen mainScreen] scale]];
[_backgroundBoxWithShadow.layer setShadowOpacity:1.0];
[_backgroundBoxWithShadow.layer setShadowColor:[[UIColor blackColor] CGColor]];
[_backgroundBoxWithShadow.layer setShadowOffset:CGSizeMake(0.0, 0.0)];
[_backgroundBoxWithShadow.layer setShadowRadius:8.0];

正如您可能会看到的那样，最终结果在iOS6.1上看起来像这样：

Answer 2

由于iOS 6合成不透明度的方式，您将很难使用CALayer的阴影属性来使其工作。

iOS 6并不是复合整个事物并且在iOS 7的最后应用不透明度，而是似乎将它应用于所有底层视图，这意味着您可以透过半透明白色前景视图看到它下面的阴影。

如果您确实需要iOS 6支持，我建议使用预先合成的9个补丁图像，该图像被拉伸以构成带阴影的半透明背景。

UIImage* image = [self resizableBackgroundImageWithShadowRadius:20
                                                    shadowColor:[UIColor blackColor]
                                                      fillColor:[UIColor colorWithWhite:1 alpha:0.5]];

UIImageView* imageView = [[UIImageView alloc] initWithFrame:CGRectMake(50, 50, 100, 200)];
[imageView setImage:image];
[self.window addSubview:imageView];

- (UIImage*) resizableBackgroundImageWithShadowRadius:(CGFloat) shadowRadius shadowColor:(UIColor*) shadowColor fillColor:(UIColor*) fillColor
{
    const CGFloat stretchExcess = shadowRadius / 2.0;
    const CGFloat stretchDimension = shadowRadius + stretchExcess;
    const CGFloat shadowDimension = shadowRadius * 2.0;
    const CGFloat imageDimension = shadowDimension + stretchDimension;
    const CGSize imageSize = CGSizeMake(imageDimension, imageDimension);

    UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0);

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    //  Inner fill path
    UIBezierPath* path = [UIBezierPath bezierPathWithRect:CGRectMake(shadowRadius, shadowRadius, imageSize.width - shadowDimension, imageSize.height - shadowDimension)];

    //  Draw the shadow
    CGContextSaveGState(ctx);
    CGContextSetShadowWithColor(ctx, CGSizeZero, shadowRadius / 2.0, shadowColor.CGColor);
    [[fillColor colorWithAlphaComponent:1] set];
    [path fill];
    CGContextRestoreGState(ctx);

    //  Clear the middle
    [path fillWithBlendMode:kCGBlendModeClear alpha:0];

    //  Draw our fill color
    [fillColor set];
    [path fill];

    const CGFloat inset = shadowRadius + stretchExcess;
    UIImage* image = [UIGraphicsGetImageFromCurrentImageContext() resizableImageWithCapInsets:UIEdgeInsetsMake(inset, inset, inset, inset)];

    UIGraphicsEndImageContext();

    return image;
}

结果（iOS 6）：

Answer 3

为什么不显示？您链接的代码应该正常工作：

imageView.layer.shadowColor = [UIColor purpleColor].CGColor;
imageView.layer.shadowOffset = CGSizeMake(0, 1);
imageView.layer.shadowOpacity = 1;
imageView.layer.shadowRadius = 1.0;
imageView.clipsToBounds = NO;

仔细检查您的插座连接（如果您使用的是Interface Builder）并确保imageView在调用此方法时不是nil（您可以在此方法的某处放置断点）。另外，请确保导入#import "QuartzCore/CALayer.h"并将clipsToBounds属性设置为NO（否则，它不会显示）。

另一个警告可能是框架尺寸不正确 - 它实际上可能与它看起来不同，所以这可能是你的阴影没有出现在你想象的地方的原因之一。

您可能需要调整阴影偏移，不透明度和其他选项才能达到预期效果。

UPD：看起来您正在尝试为视图添加阴影。查看此StackOverflow question中描述的其他方法。