UIView阴影和InterfaceBuilder

我想使用CALayer将阴影添加到UI（图像）视图。 以下代码通常很好

previewImage.layer.shadowColor = [[UIColor blackColor] CGColor]; previewImage.layer.shadowOffset = CGSizeMake(1.0f, 1.0f); previewImage.layer.shadowOpacity = 1.0f; previewImage.layer.shadowRadius = 8.0f; 

但是，这仅在我以编程方式创建该视图并将其作为子视图添加到主视图时才有效。 当在InterfaceBuilder中设置该视图并将其定义为IBOutlet UIImageView时，这不起作用。 没有阴影出现。 那我在这里错过了什么？

Answer 1

我不确定是什么问题 – 确保你的UIImageView的clipsToBounds属性设置为NO 。 您可以通过引用IBOutlet从nib文件加载后在viewDidLoad执行此操作。 您不应该将其包装在另一个视图中。

编辑

鉴于您需要使用纵横填充来缩放图像，您可以使用UIImageView底层的contentsRect属性来“模拟”内容剪切的效果。 contentsRect是图层内容（在本例中为图像）的单位坐标空间中的矩形，用于定义应绘制内容的子矩形。

通过一些数学运算，我们可以通过比较图像视图大小和图像大小来找到这个矩形（考虑到方面填充缩放）：

 CGSize imageViewSize = previewImage.size; CGSize imageSize = previewImage.image.size; // Find the scaling required for the image to fit the image view (as for aspect fill). CGFloat imageWidthScale = fabsf(imageViewSize.width / imageSize.width); CGFloat imageHeightScale = fabsf(imageViewSize.height / imageSize.height); CGFloat imageScale = (imageWidthScale > imageHeightScale) ? imageWidthScale : imageHeightScale; // Determine the new image size, after scaling. CGSize scaledImageSize = CGSizeApplyAffineTransform(imageSize, CGAffineTransformMakeScale(imageScale, imageScale)); // Set the layer's contentsRect property in order to 'clip' the image to the image view's bounds. previewImage.layer.contentsRect = CGRectMake(((scaledImageSize.width - imageViewSize.width) / 2.0f) / scaledImageSize.width, ((scaledImageSize.height - imageViewSize.height) / 2.0f) / scaledImageSize.height, imageViewSize.width / scaledImageSize.width, imageViewSize.height / scaledImageSize.height); 

执行此操作，您可以将图像视图的clipsToBounds设置为NO ，但图像仍将显示为剪裁。 如果您需要更改图像视图大小，将此代码包装到以UIImageView作为参数的方法中可能会很方便。

我希望这有帮助。

Answer 2

在项目中添加名为UIView.swift的文件（或者只将其粘贴到任何文件中）：

 import UIKit @IBDesignable extension UIView { /* The color of the shadow. Defaults to opaque black. Colors created * from patterns are currently NOT supported. Animatable. */ @IBInspectable var shadowColor: UIColor? { set { layer.shadowColor = newValue!.CGColor } get { if let color = layer.shadowColor { return UIColor(CGColor:color) } else { return nil } } } /* The opacity of the shadow. Defaults to 0. Specifying a value outside the * [0,1] range will give undefined results. Animatable. */ @IBInspectable var shadowOpacity: Float { set { layer.shadowOpacity = newValue } get { return layer.shadowOpacity } } /* The shadow offset. Defaults to (0, -3). Animatable. */ @IBInspectable var shadowOffset: CGPoint { set { layer.shadowOffset = CGSize(width: newValue.x, height: newValue.y) } get { return CGPoint(x: layer.shadowOffset.width, y:layer.shadowOffset.height) } } /* The blur radius used to create the shadow. Defaults to 3. Animatable. */ @IBInspectable var shadowRadius: CGFloat { set { layer.shadowRadius = newValue } get { return layer.shadowRadius } } } 

然后，这将在Interface Builder中为Utilities面板> Attributes Inspector中的每个视图提供：

您现在可以轻松设置阴影。

笔记：
– 阴影仅在运行时出现。
– clipsToBounds应为false（默认情况下）

Answer 3

我知道这个问题很长，但最近我处于类似的情况，所以我决定把答案给那些处于这种情况的人。

我希望能够通过Interface Builder在UIView上设置borderColor和shadowColor ，但是图层的borderColor属性的类型是CGColor （就像shadowColor一样），它不是允许在用户定义中更改的类型之一运行时属性function。

所以我为CALayer做了一个扩展，我添加了两个名为borderColorIB和shadowColorIB的属性，类型为UIColor：

RuntimeAttributes.h

 @import QuartzCore; @interface CALayer (IBConfiguration) @property(nonatomic, assign) UIColor* borderColorIB; @property(nonatomic, assign) UIColor* shadowColorIB; @end 

RuntimeAttributes.m

 #import  #import "RuntimeAttributes.h" @implementation CALayer (IBConfiguration) -(void)setBorderColorIB:(UIColor*)color { self.borderColor = color.CGColor; } -(UIColor*)borderColorIB { return [UIColor colorWithCGColor:self.borderColor]; } -(void)setShadowColorIB:(UIColor*)color { self.shadowColor = color.CGColor; } -(UIColor*)shadowColorIB { return [UIColor colorWithCGColor:self.shadowColor]; } @end 

现在，我可以通过Interface Builder设置这两个属性，如下所示：

1. 在“用户定义的运行时属性”部分（身份检查器）

2. 确保选中UIView，并添加以下运行时属性：

   • layer.borderWidth，Number，1
   • layer.borderColorIB，Color，someColor <- my custom property to set the borderColor
   • layer.shadowColorIB，Color，someColor <- my custom property to set the shadowColor
   • layer.shadowOpacity，Number，0.8
   • layer.shadowOffset，size，{5,5}
   • layer.cornerRadius，Number，5

这是一张图片，告诉你我是怎么做的：

... ...结果将在运行时显而易见，而不是在Xcode中：

我希望这可以帮助那里的一些人！

Answer 4

带角半径的UIView阴影+界面构建器 – swift4

  extension UIView { @IBInspectable var cornerRadius: CGFloat { get { return layer.cornerRadius } set { layer.cornerRadius = newValue if shadowOpacity > 0.0 { layer.masksToBounds = false } else { layer.masksToBounds = true } } } @IBInspectable var borderWidth: CGFloat { get { return layer.borderWidth } set { layer.borderWidth = newValue } } @IBInspectable var borderColor: UIColor? { get { if let color = layer.borderColor { return UIColor(cgColor: color) } return nil } set { if let color = newValue { layer.borderColor = color.cgColor } else { layer.borderColor = nil } } @IBInspectable var shadowColor: UIColor? { set { layer.shadowColor = newValue!.cgColor } get { if let color = layer.shadowColor { return UIColor(cgColor: color) } else { return nil } } } @IBInspectable var shadowOpacity: Float { set { layer.shadowOpacity = newValue } get { return layer.shadowOpacity } } @IBInspectable var shadowOffset: CGPoint { set { layer.shadowOffset = CGSize(width: newValue.x, height: newValue.y) } get { return CGPoint(x: layer.shadowOffset.width, y:layer.shadowOffset.height) } } @IBInspectable var shadowRadius: CGFloat { set { layer.shadowRadius = newValue } get { return layer.shadowRadius } } }