如何在iOS中为UIView添加圆角和阴影

Question

在使用自动布局（Constraints）后，如何为视图设置圆角和阴影效果（即使视图包含一些子视图），以及用哪种方法编写代码。如果我在viewDidLoad，viewDidAppear中编写代码，我将无法获得精确的圆角和阴影效果？

以下是我在viewWillLayoutSubviews中编写的代码，我可以获取圆角效果，但无法获取阴影效果。如果我删除view.layer.masksToBounds = true，我可以获取阴影效果，但它仅适用于基本视图而不适用于其子视图...

view.layer.cornerRadius = 10
view.layer.masksToBounds = true

view.layer.borderWidth = 1.0
view.layer.borderColor = UIColor.black.cgColor

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

- user8343375

---

可能是 https://dev59.com/2m445IYBdhLWcg3wpb8P 的重复问题。 - algrid

可能是与 UIView with rounded corners and drop shadow? 相似的问题。 - Sunil Sharma

为了实现这一点，我采用了两个视图，一个视图将包含所有子视图，另一个视图只是一个与第一个视图相同约束的空视图。给包含所有子视图的视图设置圆角，并给虚拟视图设置阴影。 - Sharad Chauhan

Answer 1

    viewShadow.layer.cornerRadius = 12
    viewShadow.layer.masksToBounds = true;

    viewShadow.backgroundColor = UIColor.white
    viewShadow.layer.shadowColor = UIColor.lightGray.cgColor
    viewShadow.layer.shadowOpacity = 0.8
    viewShadow.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
    viewShadow.layer.shadowRadius = 6.0
    viewShadow.layer.masksToBounds = false

- Tajinder singh

---

完美的解决方案，兄弟！！！我想知道它是否起作用了。 - undefined

Answer 2

添加父视图，parentView->View

为parentView设置阴影和cornerRadius，maskToBounds = false

为View设置cornerRadius，maskToBounds = true

- Quyet Nguyen

Answer 3

它取决于特定的条件

1. 如果你从Storyboard中设置自动布局约束并且视图的大小（高度，宽度）是固定的，那么你可以在viewDidLoad中设置圆角。

2. 如果你从Storyboard中设置自动布局约束并且视图的大小（高度，宽度）是按比例的，那么在viewWillLayoutSubview中设置圆角是安全的。

3. 如果你以编程方式设置约束，那么也可能有特定的条件。根据你的情况，viewWillAppear、viewDidAppear、viewWillLayoutSubview、viewDidLayoutSubview都可能很有用。

- Vikky

---

尝试将 layer.masksToBounds = false 设置为false。 - Vikky

但是如果我为所有视图设置圆角半径，它看起来并不好。 - user8343375

有没有其他的替代方案可以在不为每个视图设置圆角的情况下完成这个操作？ - user8343375

我不认为这是可能的，但你可以自由地检查它是否可以完成，因为谷歌是我们的朋友。但你可以通过以下方式解决：let subviews = yourView.subviews; for currentView in subviews { currentView.setRadius; } 你可以循环遍历所有子视图并设置半径。 - Vikky

@RahulDasgupta 你能解释一下为什么这会剪切所有的子视图吗？ - Vikky

Answer 4

无法设置

layer.masksToBounds = true 

使用maskToBounds会裁剪在视图边界内的所有内容，因此阴影也会被裁剪。唯一的方法是让所有子视图远离边界。

另一种方法是将您的视图作为子视图添加到另一个视图中，我们称之为父视图。 给父视图添加阴影：

 layer.cornerRadius = 10
 layer.masksToBounds = false

在您的观点中添加：

 layer.cornerRadius = 10
 layermasksToBounds = true 

这将起作用。

- Rahul Dasgupta

---

那么如何设置视图（包括子视图）的圆角半径和阴影呢？ - user8343375

不，这对我不起作用。 - user8343375

你能分享一下你想要实现的设计吗？ - Rahul Dasgupta

以上的设计我需要为父视图添加圆角和阴影。 - user8343375

将您的父视图保留为另一个基础视图的子视图。使用 layer.cornerRadius = 10 和 layer.masksToBounds = false 在基础视图中设置阴影。使用 layer.cornerRadius = 10 和 layer.masksToBounds = true 设置没有阴影的父视图。 - Rahul Dasgupta

你明白我说的话了吗？ - Rahul Dasgupta

Answer 5

在Storyboard的属性检查器中设置边框颜色、阴影和半径之前，请添加此代码。

extension UIView {

@IBInspectable
var cornerRadius: CGFloat {
    get {
        return layer.cornerRadius
    }
    set {
        layer.cornerRadius = newValue
        layer.masksToBounds = newValue > 0
    }
}

   @IBInspectable
   var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        }
       set {
            layer.borderWidth = newValue
       }
     }

    @IBInspectable
    var borderColor: UIColor? {
        get {
            return UIColor(cgColor: layer.borderColor!)
        }
        set {
            layer.borderColor = newValue?.cgColor
        }
    }

    @IBInspectable
   var shadowRadius: CGFloat {
        get {
            return layer.shadowRadius
        }
        set {
            layer.shadowColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1).cgColor
            layer.shadowOffset = CGSize(width: 0, height: 2)
            layer.shadowOpacity = 0.5
            layer.masksToBounds = false
            layer.shadowRadius = newValue
        }
    }
}

以下是图片：

- V D Purohit

---

@DanielKuta，您能否稍微描述一下？谢谢。 - V D Purohit

最后一行应该是：layer.shadowRadius = newValue 吗？ - Billy

Answer 6

为了同时添加圆角和阴影，您需要通过添加大小相同的另一个视图或者子视图来伪造该视图。

首先，添加您的视图，假设containerView就像您的父视图/超级视图，我们将通过以下方式正常地向其添加阴影：

containerView.backgroundColor = .clear
containerView.layer.shadowColor = UIColor.lightGray.cgColor
// or if you'd like to add shadow color in black, it's what you prefer
//containerView.layer.shadowColor = UIColor.black.cgColor
containerView.layer.shadowOffset = .zero
containerView.layer.shadowOpacity = 0.3
// shadow radius is optional, you can add or comment it
containerView.layer.shadowRadius = 8
containerView.layer.masksToBounds = false

然后你可以通过以下方式在containerView上创建子视图：

containerView.addSubview(subContainerView)
subContainerView.backgroundColor = .white
subContainerView.layer.cornerRadius = 8
subContainerView.layer.masksToBounds = true

containerView 将会将阴影反映到真正的圆角 subContainerView 上。

注意：如果您想要更改视图的背景颜色，请更改 subContainerView 的背景。

查看这个简单的项目

- Elserafy

Answer 7

尝试这个答案：

UIView * paintView=[[UIView alloc]initWithFrame:CGRectMake(50, 150, 320, 430)];
[paintView setBackgroundColor:[UIColor yellowColor]];

paintView.layer.masksToBounds = NO;
paintView.layer.cornerRadius = 5;
paintView.layer.shadowOffset = CGSizeMake(-.2f, .2f);
paintView.layer.shadowRadius = 3;
paintView.layer.shadowOpacity = 0.8;
paintView.layer.shadowColor = [[UIColor redColor] CGColor];

UIBezierPath *path = [UIBezierPath bezierPathWithRect:paintView.bounds];
paintView.layer.shadowPath = path.CGPath;
[self.view addSubview:paintView];

- Mukesh

Answer 8

你可以尝试这个：

func addShadow(container : UIView){

    container.layer.shadowColor = UIColor.black.cgColor
    container.layer.shadowOffset = CGSize(width: 1.0, height: 1.0)
    container.layer.shadowOpacity = 0.2
    container.layer.shadowRadius = 5.0
    container.layer.masksToBounds = false
    
}

- Ammar

---

这是最佳解决方案。 - Ammar