带有圆角和阴影的 UIView?

Posted

技术标签:

【中文标题】带有圆角和阴影的 UIView?【英文标题】:UIView with rounded corners and drop shadow? 【发布时间】:2011-06-12 20:50:07 【问题描述】:

我已经在一个应用程序上工作了几年,并收到了一个简单的设计请求:在 UIView 上圆角并添加阴影。如下所示。

我想要一个自定义的UIView...:我只想要一个带有圆角和浅色阴影的空白白色视图(没有灯光效果)。我可以一一做,但会发生通常的clipToBounds/maskToBounds 冲突。

【问题讨论】:

既然您在下面的评论中说您使用 CoreGraphics 完成了这项工作,您是否介意与社区分享答案,以便您可以帮助处于相同情况的其他人,因为他们试图帮助您? 对不起,这是很久以前的事了,我已经没有来源了。我所做的是覆盖 -drawRect: 并使用 UIBezierPath 绘制一个矩形,并将阴影应用于支持视图的图层......如果我没记错的话。 :) 接受的答案无效! Giving UIView rounded corners的可能重复 @Sachavijay 您应该在发表评论之前验证两个帖子的日期。 【参考方案1】:

斯威夫特

// corner radius
blueView.layer.cornerRadius = 10

// border
blueView.layer.borderWidth = 1.0
blueView.layer.borderColor = UIColor.black.cgColor

// shadow
blueView.layer.shadowColor = UIColor.black.cgColor
blueView.layer.shadowOffset = CGSize(width: 3, height: 3)
blueView.layer.shadowOpacity = 0.7
blueView.layer.shadowRadius = 4.0

探索选项

问题 1:阴影被剪掉

如果有子图层或子视图(如图像)我们想要将其内容剪辑到视图边界怎么办?

我们可以用

blueView.layer.masksToBounds = true

(或者,blueView.clipsToBounds = true 给出same result。)

但是,哦不!阴影也被剪掉了,因为它超出了边界!该怎么办?怎么办?

解决方案

对阴影和边框使用单独的视图。基础视图是透明的并且有阴影。边框视图将其拥有的任何其他子内容剪辑到其边框。

// add the shadow to the base view
baseView.backgroundColor = UIColor.clear
baseView.layer.shadowColor = UIColor.black.cgColor
baseView.layer.shadowOffset = CGSize(width: 3, height: 3)
baseView.layer.shadowOpacity = 0.7
baseView.layer.shadowRadius = 4.0

// add the border to subview
let borderView = UIView()
borderView.frame = baseView.bounds
borderView.layer.cornerRadius = 10
borderView.layer.borderColor = UIColor.black.cgColor
borderView.layer.borderWidth = 1.0
borderView.layer.masksToBounds = true
baseView.addSubview(borderView)

// add any other subcontent that you want clipped
let otherSubContent = UIImageView()
otherSubContent.image = UIImage(named: "lion")
otherSubContent.frame = borderView.bounds
borderView.addSubview(otherSubContent)

这给出了以下结果:

问题 2:性能不佳

添加圆角和阴影可能会影响性能。您可以通过为阴影使用预定义的路径并指定对其进行光栅化来提高性能。下面的代码可以添加到上面的例子中。

baseView.layer.shadowPath = UIBezierPath(roundedRect: baseView.bounds, cornerRadius: 10).cgPath
baseView.layer.shouldRasterize = true
baseView.layer.rasterizationScale = UIScreen.main.scale

有关详细信息,请参阅this post。另见here 和here。

这个答案已经用 Swift 4 和 Xcode 9 测试过。

【讨论】:

@EICaptainv2.0,如果您只想要一个边框(和/或角半径),那么您不需要单独的视图。单独的视图适用于需要圆角和 shadow 的情况。 这对我不起作用。当我在 baseView 上设置背景颜色以清除时,不再出现阴影。我做错了什么? 不工作,设置baseView.backgroundColor = UIColor.clear 会移除阴影。只有设置了背景颜色才会看到。 仅供参考,我最初看到的问题与其他评论者看到的 baseView 的阴影在其背景颜色清晰时未显示的位置相同。问题是我只运行了代码的第一部分(baseView 的东西)。一旦我将borderView 添加为子视图,阴影就开始显示。似乎要显示阴影,其视图层次结构中必须至少有一个可见边框(或背景)。所以一定要让borderView.layer.borderWidth >= 0 不透明的borderView.layer.borderColor(或不透明的背景颜色) 如果您使用自动布局,在绘制阴影路径之前可能需要layoutIfNeeded()【参考方案2】:

下面的代码sn-p给v添加一个边框、边框半径和投影,一个UIView

// border radius
[v.layer setCornerRadius:30.0f];

// border
[v.layer setBorderColor:[UIColor lightGrayColor].CGColor];
[v.layer setBorderWidth:1.5f];

// drop shadow
[v.layer setShadowColor:[UIColor blackColor].CGColor];
[v.layer setShadowOpacity:0.8];
[v.layer setShadowRadius:3.0];
[v.layer setShadowOffset:CGSizeMake(2.0, 2.0)];

Swift 5 版本:

// border radius
v.layer.cornerRadius = 30.0

// border
v.layer.borderColor = UIColor.lightGray.cgColor
v.layer.borderWidth = 1.5

// drop shadow
v.layer.shadowColor = UIColor.black.cgColor
v.layer.shadowOpacity = 0.8
v.layer.shadowRadius = 3.0
v.layer.shadowOffset = CGSize(width: 2.0, height: 2.0)

您可以根据需要调整设置。

另外,将 QuartzCore 框架添加到您的项目中,然后:

#import <QuartzCore/QuartzCore.h>

关于masksToBounds,请参阅my other answer。


注意

这可能不适用于所有情况。如果您发现此方法会干扰您正在执行的其他绘图操作,请参阅this answer。

【讨论】:

问题在于,当我设置角半径时,它设置 maskToBounds: YES,而阴影需要 clipToBounds: NO(其中 clipToBounds 与 maskToBounds 相同) 这里有同样的问题。如果我有背景颜色,我希望将其剪裁到圆角。为此,我必须使用 maskToBounds=TRUE,但随后阴影消失.. 对于像我这样的新手:我必须将 QuartzCore 框架导入到我的项目中才能调用层对象上的方法。 实现这个正确的方法的方法是使用内部容器视图,它将包含您的边框和背景颜色,两者都具有圆角半径。这个视图将被裁剪到边界!第二个,外部容器视图将容纳第一个,具有相同的框架,只有一个阴影。我已经做了很多次来组合边框、阴影和圆角半径。这真的很烦人,但效果很好。 不起作用。不知道为什么有这么多赞成票。这适用于旧版本吗?【参考方案3】:

查看example project on GitHub 以确保您正确使用该组件。

简单的 Swift 5 解决方案,没有任何额外的子视图或子类化:

extension UIView 

    func addShadow(offset: CGSize, color: UIColor, radius: CGFloat, opacity: Float) 
        layer.masksToBounds = false
        layer.shadowOffset = offset
        layer.shadowColor = color.cgColor
        layer.shadowRadius = radius
        layer.shadowOpacity = opacity

        let backgroundCGColor = backgroundColor?.cgColor
        backgroundColor = nil
        layer.backgroundColor =  backgroundCGColor
    

请注意,在调用addShadow之前,您应该使用圆角半径和其他属性设置视图。

之后,只需像这样从viewDidLoad 调用它:

button.addShadow(offset: CGSize.init(width: 0, height: 3), color: UIColor.black, radius: 2.0, opacity: 0.35)

最终结果:

超级简单!

【讨论】:

这适用于按钮吗?因为它对我不起作用。 我尝试按照您建议的确切步骤进行操作。但仍然没有运气。如果你分享一个样本(在 Github 上)来看看​​你是如何做到的,这对我和其他人来说似乎是不可能的。 仅通过删除此行 layer.shadowPath = UIBezierPath.init(roundedRect: layer.bounds, cornerRadius: layer.cornerRadius).cgPath 才能使其工作。无法解释为什么,有人对此有解释吗? 这对我也有用,只需要再做一件事就是让所有子视图的背景颜色清除,以便只有容器视图具有可见背景,这解决了我的问题。谢谢!! @SergeyGrischyov 谢谢!当我密切关注 GitHub 中的示例时,这对我有用。它需要一个 UIButton,并更新参数并从 viewDidLoad 调用 addShadow 函数。我想知道是否可以将其概括为基于 UIView 的 IDesignable 类,这不需要任何来自外部的额外附加(viewDidLoad)。【参考方案4】:

执行此操作的一种方法是将带有圆角的视图放在带有投影的视图中。

UIView* roundedView = [[UIView alloc] initWithFrame: frame];
roundedView.layer.cornerRadius = 5.0;
roundedView.layer.masksToBounds = YES;

UIView* shadowView = [[UIView alloc] initWithFrame: frame];
shadowView.layer.shadowColor = [UIColor blackColor].CGColor;
shadowView.layer.shadowRadius = 5.0;
shadowView.layer.shadowOffset = CGSizeMake(3.0, 3.0);
shadowView.layer.shadowOpacity = 1.0;
[shadowView addSubview: roundedView];

然后你可以在任何你想要的地方添加shadowView。

【讨论】:

amit,您必须仅为* roundedview设置masktobounds / cliptobounds =是的*。不要将此设置为 shadowView。我还没有尝试上述代码,以确保这个解决方案肯定有效,虽然不理想。较高的 shadowRadius 负责处理角半径区域。将 shadowRadius 设置为 0 或 1,你会注意到我想说的。 类似 shadowView.layer.shadowOpacity = 0.6;不见了 “shadowview.layer.opacity = 1.0”应该是“shadowView.layer.shadowopacity = 1.0” span> 如果使用 shadowView.layer.shadowOpacity = 1.0,则适用于 ios 9 为 shadowOpacity 修复的代码【参考方案5】:

这对我有用。诀窍是将背景颜色从主视图移动到图层。

CALayer *layer = view.layer;
layer.cornerRadius = 15.0f;
layer.masksToBounds = NO;

layer.shadowOffset = CGSizeMake(0, 3);
layer.shadowColor = [[UIColor blackColor] CGColor];
layer.shadowRadius = 2.0f;
layer.shadowOpacity = 0.35f;
layer.shadowPath = [[UIBezierPath bezierPathWithRoundedRect:layer.bounds cornerRadius:layer.cornerRadius] CGPath];

CGColorRef  bColor = view.backgroundColor.CGColor;
view.backgroundColor = nil;
layer.backgroundColor =  bColor ;

【讨论】:

尽管所有其他解决方案都有效,而且可能更通用,但这是迄今为止解决该问题的最佳解决方案。添加子视图或子层会造成试图保持帧大小的世界或痛苦,或者充其量可能会导致性能问题。 这应该是答案。干净优雅。 最佳解决方案,绝对优雅! 哇,这确实有效。我不明白为什么它应该工作——你会认为视图的 backgroundColor 正确地会直接映射到 iOS 上的 layer.backgroundColor 属性——但它确实有效。 (Xcode 8,Swift 3。)做得好,谢谢。这应该是公认的答案。 我在这里使用 UIView extension 创建了您的答案的 Swift 3.1 版本 - ***.com/a/43295741/1313939 感谢您的启发!【参考方案6】:

在为容器视图分配阴影路径时,我使用以下技巧解决了这个问题:

[UIBezierPath bezierPathWithRoundedRect:cell.bounds cornerRadius:12]

注意,阴影的路径是一个圆角矩形,其圆角半径与单元格包含的背景相同:

//this is the border for the UIView that is added to a cell
cell.backgroundView.layer.cornerRadius = 12;
cell.backgroundView.layer.masksToBounds = YES;
cell.backgroundView.layer.borderColor = [UIColor darkGrayColor].CGColor;
cell.backgroundView.layer.borderWidth = 1;

//this is the shadow around the cell itself (cannot have round corners with borders and shadow, need to use two views
cell.layer.shadowRadius = 2;
cell.layer.cornerRadius = 12;
cell.layer.masksToBounds = NO;
[[cell layer] setShadowColor:[[UIColor darkGrayColor] CGColor]];

[[cell layer] setShadowOffset:CGSizeMake(0.0,0.0)];
[[cell layer] setShadowOpacity:1.0];

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:cell.bounds cornerRadius:12];
[[cell layer] setShadowPath:[path CGPath]];

【讨论】:

最佳答案,因为它解释了向圆角视图添加阴影的正确方法。谢谢@Alex Stone【参考方案7】:

如果您因为corners vs. subviews vs. masksToBounds 而苦苦挣扎,请尝试使用我的函数:

- (UIView*)putView:(UIView*)view insideShadowWithColor:(UIColor*)color andRadius:(CGFloat)shadowRadius andOffset:(CGSize)shadowOffset andOpacity:(CGFloat)shadowOpacity

    CGRect shadowFrame; // Modify this if needed
    shadowFrame.size.width = 0.f;
    shadowFrame.size.height = 0.f;
    shadowFrame.origin.x = 0.f;
    shadowFrame.origin.y = 0.f;
    UIView * shadow = [[UIView alloc] initWithFrame:shadowFrame];
    shadow.userInteractionEnabled = NO; // Modify this if needed
    shadow.layer.shadowColor = color.CGColor;
    shadow.layer.shadowOffset = shadowOffset;
    shadow.layer.shadowRadius = shadowRadius;
    shadow.layer.masksToBounds = NO;
    shadow.clipsToBounds = NO;
    shadow.layer.shadowOpacity = shadowOpacity;
    [view.superview insertSubview:shadow belowSubview:view];
    [shadow addSubview:view];
    return shadow;

根据你的观点来称呼它。无论您的视图是否有圆角,无论其大小、形状如何 - 都会绘制出漂亮的阴影。

只需保留函数的返回值,以便在要删除表格时引用它(或例如使用insertSubview:aboveView:

【讨论】:

它工作正常。但是如果视图有手势识别器,那么它将不起作用。我们该如何解决? @manujmv 您是否看到指定“// 如果需要,请修改”的行?这就是你需要的。 shadow.userInteractionEnabled = YES; @manujmv 那么您应该测试视图和子视图的框架以了解原因。有些东西可能不在那里。这个确切的代码在一些非常好的应用程序中对我有用 这个解决方案非常适合带有圆角的 UITableView。希望我能给它更多的投票。谢谢! @CarlosEduardoLópez 你看到shadow.userInteractionEnabled = NO; // Modify this if needed 行了吗?所以这是需要的情况。 userInteractionEnabled 是您应该已经熟悉的基本且流行的属性:-)【参考方案8】:

使用 Swift 4 和 Xcode 9,这是一个使用投影和边框舍入 ImageView 的工作示例。

    //set dimensions and position of image (in this case, centered)
    let imageHeight: CGFloat = 150, imageWidth: CGFloat = 150
    let xPosition = (self.view.frame.width / 2) - (imageWidth / 2)
    let yPosition = (self.view.frame.height / 2) - (imageHeight / 2)

    //set desired corner radius
    let cornerRadius: CGFloat = 20

    //create container for the image
    let imageContainer = UIView(frame: CGRect(x: xPosition, y: yPosition, width: imageWidth, height: imageHeight))

    //configure the container
    imageContainer.clipsToBounds = false
    imageContainer.layer.shadowColor = UIColor.black.cgColor
    imageContainer.layer.shadowOpacity = 1
    imageContainer.layer.shadowOffset = CGSize(width: 3.0, height: 3.0)
    imageContainer.layer.shadowRadius = 5
    imageContainer.layer.shadowPath = UIBezierPath(roundedRect: imageContainer.bounds, cornerRadius: cornerRadius).cgPath

    //create imageView
    let imageView = UIImageView(frame: imageContainer.bounds)

    //configure the imageView
    imageView.clipsToBounds = true
    imageView.layer.cornerRadius = cornerRadius
    //add a border (if required)
    imageView.layer.borderColor = UIColor.black.cgColor
    imageView.layer.borderWidth = 1.0
    //set the image
    imageView.image = UIImage(named: "bird")

    //add the views to the superview
    view.addSubview(imageContainer)
    imageContainer.addSubview(imageView)

如果您希望图像是圆形的:(并且显示无边框)

let cornerRadius = imageWidth / 2

【讨论】:

【参考方案9】:

你需要使用shadowViewroundView

shadowView

必须有背景颜色 应该在roundView后面 诀窍是把shadowView 布局到里面一点,它的阴影需要发光。调整insets 使shadowViewroundView 后面完全不可见

圆形视图

必须剪辑子视图

代码

addSubviews(shadowView, roundView)
roundView.addSubviews(titleLabel, subtitleLabel, imageView)

// need inset
shadowView.pinEdges(view: self, inset: UIEdgeInsets(constraintInsets: 2))
roundView.pinEdges(view: self)

do 
  shadowView.backgroundColor = .white // need background
  let layer = shadowView.layer
  layer.shadowColor = UIColor.black.cgColor
  layer.shadowRadius = 3
  layer.shadowOffset = CGSize(width: 3, height: 3)
  layer.shadowOpacity = 0.7
  layer.shouldRasterize = true


do 
  roundView.backgroundColor = .white
  let layer = roundView.layer
  layer.masksToBounds = true
  layer.cornerRadius = 5

或者你可以在下面不指定clipToBounds/maskToBounds

layer.shadowColor = UIColor.gray.cgColor
layer.shadowOffset = CGSize(width: 3, height: 3)
layer.shadowOpacity = 0.8

【讨论】:

【参考方案10】:

我在 UIView 上创建了一个助手

@interface UIView (Helper)

- (void)roundCornerswithRadius:(float)cornerRadius
               andShadowOffset:(float)shadowOffset;
@end

你可以这样称呼它

[self.view roundCornerswithRadius:5 andShadowOffset:5];

这是实现

- (void)roundCornerswithRadius:(float)cornerRadius
               andShadowOffset:(float)shadowOffset

    const float CORNER_RADIUS = cornerRadius;
    const float SHADOW_OFFSET = shadowOffset;
    const float SHADOW_OPACITY = 0.5;
    const float SHADOW_RADIUS = 3.0;

    UIView *superView = self.superview;

    CGRect oldBackgroundFrame = self.frame;
    [self removeFromSuperview];

    CGRect frameForShadowView = CGRectMake(0, 0, oldBackgroundFrame.size.width, oldBackgroundFrame.size.height);
    UIView *shadowView = [[UIView alloc] initWithFrame:frameForShadowView];
    [shadowView.layer setShadowOpacity:SHADOW_OPACITY];
    [shadowView.layer setShadowRadius:SHADOW_RADIUS];
    [shadowView.layer setShadowOffset:CGSizeMake(SHADOW_OFFSET, SHADOW_OFFSET)];

    [self.layer setCornerRadius:CORNER_RADIUS];
    [self.layer setMasksToBounds:YES];

    [shadowView addSubview:self];
    [superView addSubview:shadowView];


【讨论】:

这是一个很好的优雅解决方案。确保您的视图在使用前已添加到其超级视图中。我添加了一些参数来更好地控制阴影,但总体效果很好。谢谢! 这是一个不错的解决方案,但它不适用于自动布局:视图将绘制在原点 0,0【参考方案11】:

在 swift 4 中快速测试的东西

import UIKit

extension UIView 
    @IBInspectable var dropShadow: Bool 
        set
            if newValue 
                layer.shadowColor = UIColor.black.cgColor
                layer.shadowOpacity = 0.4
                layer.shadowRadius = 1
                layer.shadowOffset = CGSize.zero
             else 
                layer.shadowColor = UIColor.clear.cgColor
                layer.shadowOpacity = 0
                layer.shadowRadius = 0
                layer.shadowOffset = CGSize.zero
            
        
        get 
            return layer.shadowOpacity > 0
        
    

生产

如果你像这样在 Inspector 中启用它:

它将添加用户定义的运行时属性,导致:

(我之前添加了cornerRadius = 8

:)

【讨论】:

【参考方案12】:

经过一整天对带阴影的圆角视图的研究,我很高兴在这里发布我的自定义uiview类,希望结束这个问题:

圆角ShadowView.h

#import <UIKit/UIKit.h>

@interface RoundCornerShadowView : UIView

@end

圆角ShadowView.m

#import "RoundCornerShadowView.h"

@implementation RoundCornerShadowView

// *** must override this method, not the other method ***
// otherwise, the background corner doesn't disappear....
// @2015/05/29
-(void) layoutSubviews 
    [super layoutSubviews];//is must to ensure rightly layout children view

    //1. first, create Inner layer with content
    CALayer *innerView = [CALayer layer];
    innerView.frame = CGRectMake(0,0,self.bounds.size.width,self.bounds.size.height);
    //instead of: innerView.frame = self.frame;
    innerView.borderWidth = 1.0f;
    innerView.cornerRadius = 6.0f;
    innerView.masksToBounds = YES;
    innerView.borderColor = [[UIColor lightGrayColor] CGColor];
    innerView.backgroundColor = [[UIColor whiteColor] CGColor];
    //put the layer to the BOTTOM of layers is also a MUST step...
    //otherwise this layer will overlay the sub uiviews in current uiview...
    [self.layer insertSublayer:innerView atIndex:0];

    //2. then, create shadow with self layer
    self.layer.masksToBounds = NO;
    self.layer.shadowColor = [[UIColor darkGrayColor] CGColor];
    self.layer.shadowOpacity = 0.4f;
    //shadow length
    self.layer.shadowRadius = 2.0f;
    //no offset
    self.layer.shadowOffset = CGSizeMake(0, 0);
    //right down shadow
    //[self.layer setShadowOffset: CGSizeMake(1.0f, 1.0f)];

    //3. last but important, MUST clear current view background color, or the color will show in the corner!
    self.backgroundColor = [UIColor clearColor];


@end

所以,不需要在目标视图的视图中或下面添加子视图,只需在当前视图中添加一层,然后执行3步即可完成!

仔细看代码中的cmets,对理解组件很有帮助!

【讨论】:

错误的解决方案,您不应该在layoutSubviews 方法中添加图层【参考方案13】:

Swift 3 和 IBInspectable 解决方案:灵感来自 Ade 的解决方案

首先,创建一个 UIView 扩展:

//
//  UIView-Extension.swift
//  

import Foundation
import UIKit

@IBDesignable
extension UIView 
     // Shadow
     @IBInspectable var shadow: Bool 
          get 
               return layer.shadowOpacity > 0.0
          
          set 
               if newValue == true 
                    self.addShadow()
               
          
     

     fileprivate func addShadow(shadowColor: CGColor = UIColor.black.cgColor, shadowOffset: CGSize = CGSize(width: 3.0, height: 3.0), shadowOpacity: Float = 0.35, shadowRadius: CGFloat = 5.0) 
          let layer = self.layer
          layer.masksToBounds = false

          layer.shadowColor = shadowColor
          layer.shadowOffset = shadowOffset
          layer.shadowRadius = shadowRadius
          layer.shadowOpacity = shadowOpacity
          layer.shadowPath = UIBezierPath(roundedRect: layer.bounds, cornerRadius: layer.cornerRadius).cgPath

          let backgroundColor = self.backgroundColor?.cgColor
          self.backgroundColor = nil
          layer.backgroundColor =  backgroundColor
     


     // Corner radius
     @IBInspectable var circle: Bool 
          get 
               return layer.cornerRadius == self.bounds.width*0.5
          
          set 
               if newValue == true 
                    self.cornerRadius = self.bounds.width*0.5
               
          
     

     @IBInspectable var cornerRadius: CGFloat 
          get 
               return self.layer.cornerRadius
          

          set 
               self.layer.cornerRadius = newValue
          
     


     // Borders
     // Border width
     @IBInspectable
     public var borderWidth: CGFloat 
          set 
               layer.borderWidth = newValue
          

          get 
               return layer.borderWidth
          
     

     // Border color
     @IBInspectable
     public var borderColor: UIColor? 
          set 
               layer.borderColor = newValue?.cgColor
          

          get 
               if let borderColor = layer.borderColor 
                    return UIColor(cgColor: borderColor)
               
               return nil
          
     

然后,只需在界面生成器设置中选择您的 UIView shadow ONcorner radius,如下所示:

结果!

【讨论】:

与此线程中的所有其他“解决方案”一样,它根本不起作用,至少在 iOS 11.0 / Swift 4.1 上不起作用。 你读过帖子开头的“Swift 3”吗?所以,这意味着这是一个 Swift 3 解决方案,我没有在 Swift 4.1 中测试它,因为我不再需要它了。随意编辑答案并给出解决方案。 ;) 干杯 如果同时有borderWidth 和shadow 将不起作用【参考方案14】:

这是肯定有效的解决方案!

我已经创建了 UIView 扩展,其中包含应用阴影所需的边缘,如下所示


enum AIEdge:Int 
    case
    Top,
    Left,
    Bottom,
    Right,
    Top_Left,
    Top_Right,
    Bottom_Left,
    Bottom_Right,
    All,
    None


extension UIView 
        
    func applyShadowWithCornerRadius(color:UIColor, opacity:Float, radius: CGFloat, edge:AIEdge, shadowSpace:CGFloat, cornerRadius: CGFloat)    

        var sizeOffset:CGSize = CGSize.zero
        
        switch edge 
        case .Top:
            sizeOffset = CGSize(width: 0, height: -shadowSpace)
        case .Left:
            sizeOffset = CGSize(width: -shadowSpace, height: 0)
        case .Bottom:
            sizeOffset = CGSize(width: 0, height: shadowSpace)
        case .Right:
            sizeOffset = CGSize(width: shadowSpace, height: 0)
            
            
        case .Top_Left:
            sizeOffset = CGSize(width: -shadowSpace, height: -shadowSpace)
        case .Top_Right:
            sizeOffset = CGSize(width: shadowSpace, height: -shadowSpace)
        case .Bottom_Left:
            sizeOffset = CGSize(width: -shadowSpace, height: shadowSpace)
        case .Bottom_Right:
            sizeOffset = CGSize(width: shadowSpace, height: shadowSpace)
            
            
        case .All:
            sizeOffset = CGSize(width: 0, height: 0)
        case .None:
            sizeOffset = CGSize.zero
        

        self.layer.cornerRadius = cornerRadius
        self.layer.masksToBounds = true

        self.layer.shadowColor = color.cgColor
        self.layer.shadowOpacity = opacity
        self.layer.shadowOffset = sizeOffset
        self.layer.shadowRadius = radius
        self.layer.masksToBounds = false

        self.layer.shadowPath = UIBezierPath(roundedRect:self.bounds, cornerRadius:self.layer.cornerRadius).cgPath
    

最后,您可以为您的任何 UIView 子类调用如下阴影函数,您还可以指定应用阴影的边缘,根据需要更改以下方法调用的参数尝试不同的变化。

viewRoundedToBeShadowedAsWell.applyShadowWithCornerRadius(color: .gray, opacity: 1, radius: 15, edge: AIEdge.All, shadowSpace: 15)

注意:如果仍然不起作用,请尝试从主线程调用它

DispatchQueue.main.async 
   viewRoundedToBeShadowedAsWell.applyShadowWithCornerRadius(color: .gray, opacity: 1, radius: 15, edge: AIEdge.All, shadowSpace: 15)

希望有人觉得这很有用!

以下是结果图片:

【讨论】:

【参考方案15】:

这是maskToBounds冲突问题的解决方案,它对我有用。

设置corderRadius/borderColor/shadow等后,设置masksToBounds为NO:

v.layer.masksToBounds = NO;

【讨论】:

这对我有用!!天哪,我几乎完成了你回答的所有技巧!谢谢少鹏。【参考方案16】:

阴影 + 边框 + 圆角半径

    scrollview.backgroundColor = [UIColor whiteColor]; 
    CALayer *ScrlViewLayer = [scrollview layer];
    [ScrlViewLayer setMasksToBounds:NO ];
    [ScrlViewLayer setShadowColor:[[UIColor lightGrayColor] CGColor]];
    [ScrlViewLayer setShadowOpacity:1.0 ];
    [ScrlViewLayer setShadowRadius:6.0 ];
    [ScrlViewLayer setShadowOffset:CGSizeMake( 0 , 0 )];
    [ScrlViewLayer setShouldRasterize:YES];
    [ScrlViewLayer setCornerRadius:5.0];
    [ScrlViewLayer setBorderColor:[UIColor lightGrayColor].CGColor];
    [ScrlViewLayer setBorderWidth:1.0];
    [ScrlViewLayer setShadowPath:[UIBezierPath bezierPathWithRect:scrollview.bounds].CGPath];

【讨论】:

【参考方案17】:

这是我在 Swift 3 中的 UIView 版本

let corners:UIRectCorner = [.bottomLeft, .topRight]
let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let mask = CAShapeLayer()

mask.path = path.cgPath
mask.fillColor = UIColor.white.cgColor

let shadowLayer = CAShapeLayer()
shadowLayer.shadowColor = UIColor.black.cgColor
shadowLayer.shadowOffset = CGSize(width: 0.0, height: 4.0)
shadowLayer.shadowRadius = 6.0
shadowLayer.shadowOpacity = 0.25
shadowLayer.shadowPath = mask.path

self.layer.insertSublayer(shadowLayer, at: 0)
self.layer.insertSublayer(mask, at: 1)

【讨论】:

【参考方案18】:

Swift 4:创建 UIView 的子类

class ShadowView: UIView 

    required init?(coder aDecoder: NSCoder) 
        super.init(coder: aDecoder)

        // corner radius
        self.layer.cornerRadius = 10

        // border
        self.layer.borderWidth = 1.0
        self.layer.borderColor = UIColor.black.cgColor

        // shadow
        self.layer.shadowColor = UIColor.black.cgColor
        self.layer.shadowOffset = CGSize(width: 3, height: 3)
        self.layer.shadowOpacity = 0.7
        self.layer.shadowRadius = 4.0
    


使用..

【讨论】:

这不起作用,因为 borderWidth 要求 masksToBoundstrue 但阴影是 false【参考方案19】:

好吧,如果您不想按照 David C 的建议更改您的笔尖和视图层次结构。此方法将为您解决。要为 UIImageView 添加圆角和阴影,只需使用此方法,例如:

[Utils roundCornersForImageView:myImageView withCornerRadius:6.0 
andShadowOffset:2.0];

(!) 出于性能原因,我认为在 UITableView 之类的东西中使用此代码不是一个好主意,因为此代码会更改视图层次结构。所以我会建议改变你的笔尖并添加一个阴影效果的容器视图并使用 Davic C. 代码。

+ (void)roundCornersForImageView:(UIImageView *)imageView 
withCornerRadius:(float)cornerRadius andShadowOffset:(float)shadowOffset

    const float CORNER_RADIUS = cornerRadius;
    const float BORDER_WIDTH = 1.0; 
    const float SHADOW_OFFSET = shadowOffset;
    const float SHADOW_OPACITY = 0.8;
    const float SHADOW_RADIUS = 3.0;

    //Our old image now is just background image view with shadow
    UIImageView *backgroundImageView = imageView;
    UIView *superView = backgroundImageView.superview;

    //Make wider actual visible rect taking into account shadow
    //offset
    CGRect oldBackgroundFrame = backgroundImageView.frame;
    CGRect newBackgroundFrame = CGRectMake(oldBackgroundFrame.origin.x, oldBackgroundFrame.origin.y, oldBackgroundFrame.size.width + SHADOW_OFFSET, oldBackgroundFrame.size.height + SHADOW_OFFSET);
    [backgroundImageView removeFromSuperview];
    backgroundImageView.frame = newBackgroundFrame;        

    //Make new UIImageView with rounded corners and put our old image
    CGRect frameForRoundedImageView = CGRectMake(0, 0, oldBackgroundFrame.size.width, oldBackgroundFrame.size.height);
    UIImageView *roundedImageView = [[UIImageView alloc]initWithFrame:frameForRoundedImageView];
    roundedImageView.image = imageView.image;
    [roundedImageView.layer setCornerRadius:CORNER_RADIUS];
    [roundedImageView.layer setBorderColor:[UIColor lightGrayColor].CGColor];        
    [roundedImageView.layer setBorderWidth:BORDER_WIDTH]; 
    [roundedImageView.layer setMasksToBounds:YES];

    //Set shadow preferences
    [backgroundImageView setImage:nil];
    [backgroundImageView.layer setShadowColor:[UIColor blackColor].CGColor];
    [backgroundImageView.layer setShadowOpacity:SHADOW_OPACITY];
    [backgroundImageView.layer setShadowRadius:SHADOW_RADIUS];
    [backgroundImageView.layer setShadowOffset:CGSizeMake(SHADOW_OFFSET, SHADOW_OFFSET)];   

    //Add out two image views back to the view hierarchy.
    [backgroundImageView addSubview:roundedImageView];
    [superView addSubview:backgroundImageView];   
    

【讨论】:

【参考方案20】:

旧线程仍然是最新的......

我编辑了 Daniel Gindi 的方法,使其也可以与按钮等一起使用。 如果有人需要圆角或想要组合圆角和边框,则必须在传递给此方法的视图层上进行设置。我还设置了光栅化以加快速度。

+ (UIView*)putView:(UIView*)view insideShadowWithColor:(CGColorRef)color 
                                 andRadius:(CGFloat)shadowRadius 
                                 andOffset:(CGSize)shadowOffset 
                                 andOpacity:(CGFloat)shadowOpacity

    // Must have same position like "view"
    UIView *shadow = [[UIView alloc] initWithFrame:view.frame]; 

    shadow.layer.contentsScale = [UIScreen mainScreen].scale;
    shadow.userInteractionEnabled = YES; // Modify this if needed
    shadow.layer.shadowColor = color;
    shadow.layer.shadowOffset = shadowOffset;
    shadow.layer.shadowRadius = shadowRadius;
    shadow.layer.masksToBounds = NO;
    shadow.clipsToBounds = NO;
    shadow.layer.shadowOpacity = shadowOpacity;
    shadow.layer.rasterizationScale = [UIScreen mainScreen].scale;
    shadow.layer.shouldRasterize = YES;

    [view.superview insertSubview:shadow belowSubview:view];
    [shadow addSubview:view];

    // Move view to the top left corner inside the shadowview 
    // ---> Buttons etc are working again :)
    view.frame = CGRectMake(0, 0, view.frame.size.width, view.frame.size.height);

    return shadow;

【讨论】:

【参考方案21】:

以下最适合我 (此代码位于 UIView 扩展中,因此 self 表示我们必须添加阴影和圆角的一些 UIView)

- (void)addShadowViewWithCornerRadius:(CGFloat)radius 

UIView *container = self.superview;

if (!container) 
    return;


UIView *shadowView = [[UIView alloc] init];
shadowView.translatesAutoresizingMaskIntoConstraints = NO;
shadowView.backgroundColor = [UIColor lightGrayColor];
shadowView.layer.cornerRadius = radius;
shadowView.layer.masksToBounds = YES;

[container addSubview:shadowView];
[container bringSubviewToFront:shadowView];

[container addConstraint:[NSLayoutConstraint constraintWithItem:shadowView
                                                      attribute:NSLayoutAttributeWidth
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self
                                                      attribute:NSLayoutAttributeWidth
                                                     multiplier:1.0
                                                       constant:0.0]];
[container addConstraint:[NSLayoutConstraint constraintWithItem:shadowView
                                                      attribute:NSLayoutAttributeLeading
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self
                                                      attribute:NSLayoutAttributeLeading
                                                     multiplier:1.0
                                                       constant:2.0]];

[container addConstraint:[NSLayoutConstraint constraintWithItem:shadowView
                                                      attribute:NSLayoutAttributeHeight
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self
                                                      attribute:NSLayoutAttributeHeight
                                                     multiplier:1.0
                                                       constant:0.0]];
[container addConstraint:[NSLayoutConstraint constraintWithItem:shadowView
                                                      attribute:NSLayoutAttributeTop
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self
                                                      attribute:NSLayoutAttributeTop
                                                     multiplier:1.0
                                                       constant:2.0]];
[container sendSubviewToBack:shadowView];

此代码示例与其他代码示例的主要区别在于,它将阴影视图添加为 兄弟视图(而不是将当前视图添加为阴影视图的子视图),从而无需修改以任何方式存在的视图层次结构。

【讨论】:

【参考方案22】:

Swift 4 使 UICollectionViewCell round 和添加 Shadows 的解决方案,没有任何扩展和复杂性:)

注意:对于简单的视图,例如按钮。请参阅这篇文章中的@suragch 的回答。 https://***.com/a/34984063/7698092。按钮测试成功

如果有人仍然 挣扎 角落并添加 阴影强>同时。尽管此解决方案适用于 UICollectionViewCell,但它可以推广到任何视图。

这项技术对我有用,无需进行任何扩展和所有复杂的事情。我正在使用故事板。

技术

您必须在 storyBoard 中的 UICollectionViewCell 中添加一个 UIView(可以说是“containerView”),并在这个 containerView 中添加所有必需的视图(按钮、图像等)。 请参阅屏幕截图。

连接容器视图的出口。在 CellforItemAtIndexPath 委托函数中添加以下代码行。

//adds shadow to the layer of cell

cell.layer.cornerRadius = 3.0
    cell.layer.masksToBounds = false
    cell.layer.shadowColor = UIColor.black.cgColor
    cell.layer.shadowOffset = CGSize(width: 0, height: 0)
    cell.layer.shadowOpacity = 0.6

//makes the cell round 

let containerView = cell.containerView!
    containerView.layer.cornerRadius = 8
    containerView.clipsToBounds = true

输出

见模拟器截图

【讨论】:

【参考方案23】:

daniel.gindi 上面的回答对我有用! (+1 daniel) 但是,我不得不做一些小的调整——将 shadowFrame 的大小更改为与视图的框架大小相同,并启用用户交互。这是更新的代码:

+ (UIView*)putView:(UIView*)view insideShadowWithColor:(UIColor*)color andRadius:(CGFloat)shadowRadius andOffset:(CGSize)shadowOffset andOpacity:(CGFloat)shadowOpacity

    CGRect shadowFrame; // Modify this if needed

    // Modified this line
    shadowFrame.size = CGSizeMake(view.frame.size.width, view.frame.size.height);

    shadowFrame.origin.x = 0.f;
    shadowFrame.origin.y = 0.f;
    UIView * shadow = [[UIView alloc] initWithFrame:shadowFrame];

    // Modified this line
    shadow.userInteractionEnabled = YES;
    shadow.layer.shadowColor = color.CGColor;
    shadow.layer.shadowOffset = shadowOffset;
    shadow.layer.shadowRadius = shadowRadius;
    shadow.layer.masksToBounds = NO;
    shadow.clipsToBounds = NO;
    shadow.layer.shadowOpacity = shadowOpacity;

    [shadow addSubview:view];
    return shadow;

我想补充一点,就我而言,我试图将其添加到第 3 方视图控制器,即我没有直接控制代码。所以,这就是我如何使用上面的函数:

UIView *shadow = [self putView:vc.view 
         insideShadowWithColor:[UIColor blackColor]
                     andRadius:5.0 
                     andOffset:CGSizeMake(0.0, 0.0) 
                    andOpacity:1.0];
vc.view = shadow;
vc.view.layer.cornerRadius = 5.0;
vc.view.layer.masksToBounds = YES;

【讨论】:

【参考方案24】:

我对daniel.gindi的代码做了一些修改

这就是让它工作所需的一切。

+ (void)putView:(UIView*)view insideShadowWithColor:(UIColor*)color andBlur:         (CGFloat)blur andOffset:(CGSize)shadowOffset andOpacity:(CGFloat)shadowOpacity

    CGRect shadowFrame = view.frame;
    UIView * shadow = [[UIView alloc] initWithFrame:shadowFrame];
    shadow.backgroundColor = [UIColor redColor];
    shadow.userInteractionEnabled = YES; // Modify this if needed
    shadow.layer.shadowColor = color.CGColor;
    shadow.layer.shadowOffset = shadowOffset;
    shadow.layer.shadowRadius = blur;
    shadow.layer.cornerRadius = view.layer.cornerRadius;
    shadow.layer.masksToBounds = NO;
    shadow.clipsToBounds = NO;
    shadow.layer.shadowOpacity = shadowOpacity;
    [view.superview insertSubview:shadow belowSubview:view];

【讨论】:

【参考方案25】:

您需要使用两个UIViews 来实现这一点。一个UIView 将像阴影一样工作,另一个将用于圆形边框。

这是一个代码 sn-p a Class Methodprotocol 的帮助:

@implementation UIMethods

+ (UIView *)genComposeButton:(UIViewController <UIComposeButtonDelegate> *)observer;

    UIView *shadow = [[UIView alloc]init];
    shadow.layer.cornerRadius = 5.0;
    shadow.layer.shadowColor = [[UIColor blackColor] CGColor];
    shadow.layer.shadowOpacity = 1.0;
    shadow.layer.shadowRadius = 10.0;
    shadow.layer.shadowOffset = CGSizeMake(0.0f, -0.5f);

    UIButton *btnCompose = [[UIButton alloc]initWithFrame:CGRectMake(0, 0,60, 60)];
    [btnCompose setUserInteractionEnabled:YES];
    btnCompose.layer.cornerRadius = 30;
    btnCompose.layer.masksToBounds = YES;
    [btnCompose setImage:[UIImage imageNamed:@"60x60"] forState:UIControlStateNormal];
    [btnCompose addTarget:observer action:@selector(btnCompose_click:) forControlEvents:UIControlEventTouchUpInside];
    [shadow addSubview:btnCompose];
    return shadow;

在上面的代码中,btnCompose_click: 将成为@required 委托方法,该方法将在按钮单击时触发。

在这里,我向我的UIViewController 添加了一个按钮,如下所示:

UIView *btnCompose = [UIMethods genComposeButton:self];
btnCompose.frame = CGRectMake(self.view.frame.size.width - 75,
                          self.view.frame.size.height - 75,
                          60, 60);
[self.view addSubview:btnCompose];

结果将如下所示:

【讨论】:

【参考方案26】:

我从这篇文章中尝试了很多解决方案,最终得到了以下解决方案。这是完全证明解决方案除非您需要在清晰的彩色视图上放置阴影

- (void)addShadowWithRadius:(CGFloat)shadowRadius withOpacity:(CGFloat)shadowOpacity withOffset:(CGSize)shadowOffset withColor:(UIColor *)shadowColor withCornerradius:(CGFloat)cornerRadius

    UIView *viewShadow = [[UIView alloc]initWithFrame:self.frame];
    viewShadow.backgroundColor = [UIColor whiteColor];
    viewShadow.layer.shadowColor = shadowColor.CGColor;
    viewShadow.layer.shadowOffset = shadowOffset;
    viewShadow.layer.shadowRadius = shadowRadius;
    viewShadow.layer.shadowOpacity = shadowOpacity;
    viewShadow.layer.cornerRadius = cornerRadius;
    viewShadow.layer.masksToBounds = NO;
    [self.superview insertSubview:viewShadow belowSubview:self];

    [viewShadow setTranslatesAutoresizingMaskIntoConstraints:NO];
    [self.superview addConstraint:[NSLayoutConstraint constraintWithItem:viewShadow attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0]];
    [self.superview addConstraint:[NSLayoutConstraint constraintWithItem:viewShadow attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0]];
    [self.superview addConstraint:[NSLayoutConstraint constraintWithItem:viewShadow attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:viewShadow attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0]];
    [self.superview addConstraint:[NSLayoutConstraint constraintWithItem:viewShadow attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:viewShadow attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0]];
    [self layoutIfNeeded];

    self.layer.cornerRadius = cornerRadius;
    self.layer.masksToBounds = YES;

【讨论】:

表达式是“万无一失”。 :) 我只是在纠正英语。 :) 解决方案有效。【参考方案27】:
import UIKit

extension UIView 

    func addShadow(shadowColor: UIColor, offSet: CGSize, opacity: Float, shadowRadius: CGFloat, cornerRadius: CGFloat, corners: UIRectCorner, fillColor: UIColor = .white) 

        let shadowLayer = CAShapeLayer()
        let size = CGSize(width: cornerRadius, height: cornerRadius)
        let cgPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: size).cgPath //1
        shadowLayer.path = cgPath //2
        shadowLayer.fillColor = fillColor.cgColor //3
        shadowLayer.shadowColor = shadowColor.cgColor //4
        shadowLayer.shadowPath = cgPath
        shadowLayer.shadowOffset = offSet //5
        shadowLayer.shadowOpacity = opacity
        shadowLayer.shadowRadius = shadowRadius
        self.layer.addSublayer(shadowLayer)
    

【讨论】:

【参考方案28】:

Evan Mulawski 提供的答案将完美运行。问题是您必须将视图的背景颜色设置为 clearColor 并将 maskToBounds 属性设置为 NO。

你可以为视图设置任何你想要的颜色,像这样设置

v.layer.backgroundColor = your color;

希望这会有所帮助..

【讨论】:

【参考方案29】:

这就是你的做法,圆角和圆角阴影不影响路径。

//Inner view with content
[imageView.layer setBorderColor:[[UIColor lightGrayColor] CGColor]];
[imageView.layer setBorderWidth:1.0f];
[imageView.layer setCornerRadius:8.0f];
[imageView.layer setMasksToBounds:YES];

//Outer view with shadow
UIView* shadowContainer = [[UIView alloc] initWithFrame:imageView.frame];
[shadowContainer.layer setMasksToBounds:NO];
[shadowContainer.layer setShadowColor:[[UIColor blackColor] CGColor]];
[shadowContainer.layer setShadowOpacity:0.6f];
[shadowContainer.layer setShadowRadius:2.0f];
[shadowContainer.layer setShadowOffset: CGSizeMake(0.0f, 2.0f)];

[shadowContainer addSubview:imageView];

包含内容的视图,在我的例子中是 UIImageView,有一个角半径,因此必须屏蔽边界。

我们为阴影创建另一个相同大小的视图,将它的 maskToBounds 设置为 NO,然后将内容视图添加到容器视图(例如 shadowContainer)。

【讨论】:

【参考方案30】:

我写了这个 UIView 类别的方法来解决这个问题,对阴影和圆角半径使用单独的视图。

-(UIView *)shadowedWrapViewWithBounds:(CGRect)bounds 
UIView *baseView = [[UIView alloc] init];
baseView.bounds = bounds;
baseView.backgroundColor = [UIColor clearColor];
baseView.layer.shadowColor = [UIColor blackColor].CGColor;
baseView.layer.shadowOffset = CGSizeMake(0, 0);
baseView.layer.shadowOpacity = 0.7;
baseView.layer.shadowRadius = 4.0;

// improve performance
baseView.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:baseView.bounds cornerRadius:4].CGPath;
baseView.layer.shouldRasterize = YES;
baseView.layer.rasterizationScale = [UIScreen mainScreen].scale;

[baseView addSubview:self];
//use Masonry autolayout, self can set corner radius
[self makeConstraints:^(MASConstraintMaker *make) 
    make.edges.equalTo(baseView);
];

return baseView;

【讨论】:

以上是关于带有圆角和阴影的 UIView?的主要内容,如果未能解决你的问题,请参考以下文章

带有圆角和阴影的 UIView?

带有圆角和阴影的 Swift uiview 不起作用

带有渐变和阴影的 UIView

阴影不适用于带有蒙版的 UIViewLayer

UIVIew 角半径和阴影?

带有圆角的 UIView CAGradient?