UIView有圆角和投影？

Posted 2021-03-27

我真的尝试了我所能做的一切，但它们都不适用于自定义的UIView ......我只想要一个带圆角的空白视图和一个浅色阴影（没有光照效果）。我可以逐个完成这些，但通常发生clipToBounds / maskToBounds冲突。

答案

以下代码片段将边框，边框半径和投影添加到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)];

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

另外，将QuartzCore框架添加到您的项目中：

#import <QuartzCore/QuartzCore.h>

有关my other answer的信息，请参阅masksToBounds。

---

注意

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

另一答案

经过一整天的阴影圆角视图研究，我很高兴在这里发布我的自定义uiview课程，希望结束这个问题：

RoundCornerShadowView.h

#import <UIKit/UIKit.h>

@interface RoundCornerShadowView : UIView

@end

RoundCornerShadowView.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步即可完成！

仔细查看代码中的注释，这有助于理解组件！

另一答案

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

然后，只需在界面构建器设置阴影ON和角半径中选择您的UIView，如下所示：

结果！

另一答案

在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）

:)

另一答案

你需要使用shadowView和roundView

shadowView

• 必须有背景颜色
• 应该躺在roundView后面
• 诀窍是在内部布置shadowView，它的阴影需要发光。调整insets，使shadowView在roundView后面完全看不见

roundView

• 必须剪辑

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

  Swift几行代码设置UIcollectionView的section底色，圆角

  用于自动调整 UIView 的圆角

  带有圆角的 UIView CAGradient？

  CSS CSS3圆角和投影

  UIView 默认样式有圆角？

  如何为 UIView 添加圆角半径