UIView阴影和InterfaceBuilder

时间:2011-09-20 12:05:27

标签: ios interface-builder core-graphics

我想使用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时,这不起作用。没有阴影出现。 那我在这里错过了什么?

5 个答案:

答案 0 :(得分:20)

Add a file named UIView.swift in your project (or just paste this in any file) :

    $(".chosen-tag").chosen({
  placeholder_text_multiple: "Selecciona alguna etiqueta",
  no_results_text: "No hay resultados para la busqueda",
  search_contains: true,
  width: '500px'
});

Then this will be available in Interface Builder for every view in the Utilities Panel > Attributes Inspector :

Utilities Panel

You can easily set the shadow now.

Notes:
- The shadow will only appear at runtime.
- 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 } } } should be false (by default it is)

答案 1 :(得分:15)

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

我希望能够通过Interface Builder在borderColor上设置shadowColorUIView,但是图层borderColor属性的类型是{{1 (就像CGColor),它不是允许在用户定义的运行时属性功能中更改的类型之一。

所以我为shadowColor做了一个扩展,我添加了两个名为borderColorIB和shadowColorIB的属性,类型为UIColor:

RuntimeAttributes.h

CALayer

RuntimeAttributes.m

@import QuartzCore;

@interface CALayer (IBConfiguration)

@property(nonatomic, assign) UIColor* borderColorIB;
@property(nonatomic, assign) UIColor* shadowColorIB;

@end

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

  1. 在“用户定义的运行时属性”部分(身份检查器)
  2. 确保选中UIView,并添加以下运行时属性:

    • layer.borderWidth,Number,1
    • layer.borderColorIB,Color,someColor #import <UIKit/UIKit.h> #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
    • layer.shadowColorIB,Color,someColor <- my custom property to set the borderColor
    • layer.shadowOpacity,Number,0.8
    • layer.shadowOffset,size,{5,5}
    • layer.cornerRadius,Number,5
  3. 这是一张图片,向您展示我的表现:

    enter image description here

    ...并且结果将在运行时显而易见,而不是在Xcode中:

    enter image description here

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

答案 2 :(得分:3)

我不确定问题所在 - 确保UIImageView的{​​{1}}媒体资源设为clipsToBounds。通过引用IBOutlet从nib文件加载后,可以在NO中执行此操作。您不应该将其包装在另一个视图中。

修改

鉴于您需要使用宽高比填充来缩放图像,可以使用viewDidLoad底层的contentsRect属性来“模拟”内容剪辑的效果。 UIImageView是图层内容(在本例中为图像)的单位坐标空间中的矩形,它定义了应绘制内容的子矩形。

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

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作为参数的方法中。

我希望这会有所帮助。

答案 3 :(得分:0)

带有角半径的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
            }
        }
}

答案 4 :(得分:0)

迅速5的mauricioconde答案的Xcode 11.3.1版本。请注意,如果没有@IBInspectable,它将无法正常工作。

import UIKit
import QuartzCore

extension CALayer {

    @IBInspectable
    var shadowUIColor: UIColor? {
        get { shadowColor != nil ? UIColor(cgColor: shadowColor!) : nil }
        set { shadowColor = newValue?.cgColor }
    }
}

enter image description here