【问题标题】:How to add corner radius and shadow to a UIView in iOS如何在 iOS 中为 UIView 添加圆角半径和阴影
【发布时间】:2018-05-26 22:18:15
【问题描述】:

After autolayout (Constraints) 如何使视图的圆角半径和阴影(即使视图也有一些子视图) 以及写什么方法代码。如果我在 viewdidload 、 viewDidAppear 中编写代码,我无法获得准确的圆角半径和阴影?

这是我在 viewWillLayoutSubview 中执行的代码,我可以获得圆角半径但无法获得阴影效果。如果我删除 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

【问题讨论】:

标签: ios swift autolayout


【解决方案1】:

视情况而定

1.如果你从storyboard设置自动布局约束并且view的大小(height ,width)是固定的,那么你可以在viewDidLoad中设置圆角半径。

2.如果您从storyboard设置自动布局约束,并且视图的大小(高度,宽度)是比例,那么设置角半径的安全位置是viewWillLayoutSubview。

3.如果您以编程方式设置约束,则也可能存在某些条件。viewWillAppear、viewDidAppear、viewWillLayoutSubview、viewDidLayoutSubview 都可以根据您的情况使用。

【讨论】:

  • 尝试设置 layer.masksToBounds = false
  • 如果 layer.masksToBounds = false then ,我只能得到基本视图的角半径,它的子视图没有得到cornerRadius。
  • 我认为你需要为每个视图设置圆角半径
  • 但是当我为所有视图做圆角半径时,它看起来并不好
  • 在没有为每个视图设置角半径的情况下,还有其他替代选项吗?
【解决方案2】:

无法设置

layer.masksToBounds = true 

并获得阴影,因为 maskToBounds 将剪切掉视图范围内的所有内容。而且由于阴影被放置在边界上,所以它也会剪辑它。唯一的方法是让所有子视图远离边界。

还有一种方法。

将您的视图添加为另一个视图的子视图,我们称之为父视图。 使用

向父视图添加阴影
 layer.cornerRadius = 10
 layer.masksToBounds = false

在你看来添加

 layer.cornerRadius = 10
 layermasksToBounds = true 

这会起作用。

【讨论】:

  • 那么如何设置视图的圆角半径(包括子视图)和视图的阴影?
  • 不,它不适合我
  • 能不能分享一下你想要实现的设计。
  • 上述设计我需要一个圆角半径和父视图的阴影
  • 将您的父视图保留为另一个基本视图的子视图。在基本视图中设置阴影 layer.cornerRadius = 10 layer.masksToBounds = false。使用 layer.cornerRadius = 10 layer.masksToBounds = true 设置没有阴影的父视图
【解决方案3】:

试试这个答案:

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];

【讨论】:

    【解决方案4】:

    添加此代码,然后在情节提要中签入属性检查器后,它会显示您设置边框颜色、阴影、半径。

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

    图片如下:

    【讨论】:

    • @DanielKuta 你能再描述一下吗。谢谢
    • 最后一行应该是:layer.shadowRadius = newValue ?
    • @Billy 是的,已编辑。谢谢:D
    【解决方案5】:

    添加parentiew,parentView->查看

    为 parentView 设置阴影和角半径,maskToBounds = false

    为视图设置cornerRadius,maskToBounds = true

    【讨论】:

      【解决方案6】:
          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
      

      【讨论】:

        【解决方案7】:

        你可以试试这个:

        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
            
        }
        

        【讨论】:

        • 这是最好的解决方案
        【解决方案8】:

        要同时添加圆角半径和阴影,你需要通过添加另一个相同大小的视图来伪造这个视图,或者更确切地说是子视图。

        首先,添加您的视图,假设 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 背景。

        Check this simple project

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2018-08-05
          • 1970-01-01
          • 2014-09-15
          • 2014-08-29
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多