UIView 带阴影的圆角答案

【问题标题】：UIView Round Corners with ShadowUIView 带阴影的圆角
【发布时间】：2012-07-11 08:55:33
【问题描述】：

我正在尝试显示带有圆角和阴影的 UIView。但问题是 maskToBounds 属性只适用于任何一种情况。

如果 maskToBounds 为 YES，则显示圆角，如果为 NO，则显示阴影。这是实现，但它只显示没有阴影的圆角：

[self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"blue_gradient.jpeg"]]];


    self.view.layer.masksToBounds = YES; 
    self.view.layer.opaque = NO; 
    self.view.layer.cornerRadius = 15.0f; 


    self.view.layer.shadowColor = [UIColor blackColor].CGColor;
    self.view.layer.shadowRadius = 5.0; 
    self.view.layer.shadowOffset = CGSizeMake(3.0, 3.0);
    self.view.layer.shadowOpacity = 0.9f;

想法！

注意：我已经阅读并实现了以下线程中的代码，但它不起作用： UIView with rounded corners and drop shadow?

更新 1：

我尝试创建两个单独的视图。一个代表半径，一个代表阴影。问题是在半径视图顶部创建阴影，如下面的屏幕截图所示：

ere is the code: 

 self.view.layer.masksToBounds = YES; 
    self.view.layer.opaque = NO; 
    self.view.layer.cornerRadius = 15.0f; 
   // self.view.backgroundColor = [UIColor clearColor];
    self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"blue_gradient.jpeg"]];
//
    UIView *shadowView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    shadowView.layer.shadowColor = [UIColor blackColor].CGColor;
    shadowView.layer.shadowRadius = 2.0; 
    shadowView.backgroundColor = [UIColor clearColor];
    shadowView.layer.shadowOffset = CGSizeMake(3.0, 3.0);
    shadowView.layer.shadowOpacity = 0.9f;
    shadowView.layer.shadowPath = [UIBezierPath 
                                                                   bezierPathWithRect:CGRectMake(0, 0, 100, 100)].CGPath;

    [self.view addSubview:shadowView];

更新 2：

反转仍然不起作用。不创建圆角。

UIView *roundCornerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    roundCornerView.layer.masksToBounds = YES; 
    roundCornerView.layer.opaque = NO; 
    roundCornerView.layer.cornerRadius = 15.0f; 

    self.view.layer.shadowColor = [UIColor blackColor].CGColor;
    self.view.layer.shadowRadius = 2.0; 
    //self.view.backgroundColor = [UIColor clearColor];
    self.view.layer.shadowOffset = CGSizeMake(3.0, 3.0);
    self.view.layer.shadowOpacity = 0.9f;
    self.view.layer.shadowPath = [UIBezierPath 
                                                                   bezierPathWithRect:CGRectMake(0, 0, 100, 100)].CGPath;

    [self.view addSubview:roundCornerView];

解决方案：

 UIView *roundCornerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    roundCornerView.layer.masksToBounds = YES; 
    roundCornerView.layer.opaque = NO; 
    roundCornerView.layer.cornerRadius = 15.0f; 

    roundCornerView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"blue_gradient.jpeg"]];

    self.view.layer.shadowColor = [UIColor blackColor].CGColor;
    self.view.layer.shadowRadius = 2.0; 
    self.view.backgroundColor = [UIColor clearColor];
    self.view.layer.shadowOffset = CGSizeMake(3.0, 3.0);
    self.view.layer.shadowOpacity = 0.9f;
    //self.view.layer.shadowPath = [UIBezierPath 
      //                                                             bezierPathWithRect:CGRectMake(0, 0, 100, 100)].CGPath;

    [self.view addSubview:roundCornerView];

【问题讨论】：

UIView with rounded corners and drop shadow?的可能重复
不！已经检查了该问题并尝试了该方法，但没有成功。
这是一个骇人听闻的想法，您可以尝试使用 UIColor clearColor 将边框宽度设置为 20
清除颜色将不起作用，因为它会在 uiview 下方显示地图。
在 iOS 11 中不再需要 subview 方法，它有一个新的 CALayer 属性专门用于遮盖角落：stackoverflow.com/a/49559042/7450

标签： ios

【解决方案1】：

创建两个视图。一个带有阴影的（不要忘记设置 shadowPath）在其中添加带有cornerRadius 和maskToBounds 的子视图。

【讨论】：

你必须反转两个视图，剪辑视图必须是 shadowView 的子视图。
事实上有角落但是你看不到主题有两个原因。首先是因为剪辑视图中没有内容，其次是因为阴影的路径是矩形而不是圆角矩形！

【解决方案2】：

接受的答案不包含任何代码，因此这是 Swift 中的一个示例（请参阅 Obj-C 中 OP 解决方案的原始问题）。

与公认的答案一样，此解决方案对阴影和圆角半径使用单独的视图。

// 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

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

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

我的完整答案是here。

【讨论】：

Storyboard 中添加视图怎么办？，我需要采取 3 Views 吗？还是不可能？
@MikeAlter，我没有在情节提要中这样做，尽管我认为使用三个视图是可能的。如果必要的属性在属性检查器中不可用，请查看使用User Defined Runtime Attributes。

【解决方案3】：

您可以通过应用以下内容在单个视图中执行此操作：

1。首先添加一个圆角半径

yourview.layer.cornerRadius = 5.0

2。下面调用一个函数

shadowToView(view : yourview)


func shadowToView(view : UIView){
    view.layer.shadowOffset = CGSize(width: 0, height: 3)
    view.layer.shadowOpacity = 0.6
    view.layer.shadowRadius = 3.0
    view.layer.shadowColor = UIColor.darkGray.cgColor
}

【讨论】：