23

我想添加阴影和描边阴影UIView 这是我的设计师给我应用阴影的，

  • 对于投影，他告诉我使用 RGB(176,199,226)，不透明度为 90%，距离为 3，尺寸为 5

  • 对于描边阴影，他告诉应用大小为 1 的 RGB(209,217,226) 和 100% 不透明度。

这是 Photoshop 应用效果屏幕，

在此处输入图像描述在此处输入图像描述

具有所需阴影的视图（预期输出）

在此处输入图像描述

我尝试了以下方法来获得阴影

viewCheck.layer.masksToBounds = NO;
viewCheck.layer.cornerRadius = 5.f;
viewCheck.layer.shadowOffset = CGSizeMake(.0f,2.5f);
viewCheck.layer.shadowRadius = 1.5f;
viewCheck.layer.shadowOpacity = .9f;
viewCheck.layer.shadowColor = [UIColor colorWithRed:176.f/255.f green:199.f/255.f blue:226.f/255.f alpha:1.f].CGColor;
viewCheck.layer.shadowPath = [UIBezierPath bezierPathWithRect:viewCheck.bounds].CGPath;

这就是它的结果，

在此处输入图像描述

我在理解如何将描边和阴影应用到 Photoshop 屏幕截图中时遇到问题（我在上面添加了）。如何应用距离、传播、大小、位置？

有人可以指点我应用这些阴影的指南吗？有很多阴影效果出来了，我想了解它是如何实现的，而不是在这里问每个问题！

谢谢 ：）

4

4 回答 4

40

我相信您寻找的大多数配置都可以通过使用该shadowPath属性来实现。

viewCheck.layer.shadowRadius  = 1.5f;
viewCheck.layer.shadowColor   = [UIColor colorWithRed:176.f/255.f green:199.f/255.f blue:226.f/255.f alpha:1.f].CGColor;
viewCheck.layer.shadowOffset  = CGSizeMake(0.0f, 0.0f);
viewCheck.layer.shadowOpacity = 0.9f;
viewCheck.layer.masksToBounds = NO;

UIEdgeInsets shadowInsets     = UIEdgeInsetsMake(0, 0, -1.5f, 0);
UIBezierPath *shadowPath      = [UIBezierPath bezierPathWithRect:UIEdgeInsetsInsetRect(viewCheck.bounds, shadowInsets)];
viewCheck.layer.shadowPath    = shadowPath.CGPath;

例如，通过shadowInsets这种方式设置

UIEdgeInsets shadowInsets = UIEdgeInsetsMake(0, 0, -1.5f, 0);

你会得到一个不错的理想阴影：

在此处输入图像描述

您现在可以通过控制阴影路径矩形插图来决定如何构建阴影矩形。

于 2015-08-05T10:03:58.370 回答
12

以下是 User Defined Runtime Attribute.

  1. 在 Interface Builder 中打开故事板或 xib 文件。
  2. 在 Interface Builder 中，选择要添加属性的对象。
  3. 选择“视图”>“实用工具”>“显示身份检查器”。

身份检查器出现在实用程序区域中。如下所示，用户定义的运行时属性编辑器是检查器中的项目之一。

在此处输入图像描述

  1. 单击用户定义的运行时属性编辑器左下角的添加按钮 (+)。

在此处输入图像描述

于 2015-08-05T10:15:05.060 回答
6

为给边框。UIView

添加#import "QuartzCore/QuartzCore.h"框架工作。

myView.layer.cornerRadius = 15.0; // set as you want.
myView.layer.borderColor = [UIColor lightGrayColor].CGColor; // set color as you want.
myView.layer.borderWidth = 1.0; // set as you want.
于 2013-07-06T10:43:14.110 回答
3

抱歉，我只有 Swift 解决方案，但继承了我用来执行此任务的 UIView 扩展：

// MARK: Layer Extensions
extension UIView {

    func setCornerRadius(#radius: CGFloat) {
        self.layer.cornerRadius = radius
        self.layer.masksToBounds = true
    }

    func addShadow(#offset: CGSize, radius: CGFloat, color: UIColor, opacity: Float, cornerRadius: CGFloat? = nil) {
        self.layer.shadowOffset = offset
        self.layer.shadowRadius = radius
        self.layer.shadowOpacity = opacity
        self.layer.shadowColor = color.CGColor
        if let r = cornerRadius {
            self.layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: r).CGPath
        }
    }

    func addBorder(#width: CGFloat, color: UIColor) {
        self.layer.borderWidth = width
        self.layer.borderColor = color.CGColor
        self.layer.masksToBounds = true
    }

    func drawStroke(#width: CGFloat, color: UIColor) {
        let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: self.w, height: self.w), cornerRadius: self.w/2)
        let shapeLayer = CAShapeLayer ()
        shapeLayer.path = path.CGPath
        shapeLayer.fillColor = UIColor.clearColor().CGColor
        shapeLayer.strokeColor = color.CGColor
        shapeLayer.lineWidth = width
        self.layer.addSublayer(shapeLayer)
    }

}

我从未尝试过，但您可以将此代码粘贴到任何 Swift 文件中，并可能从 Obj-C 代码中调用它们。

于 2015-08-05T10:20:51.047 回答