iOS：如何在UIView上添加投影和描边投影？

Question

我想在UIView上添加投影效果和描边效果，这是我的设计师给我的阴影应用要求：

• 对于投影效果，他告诉我使用RGB(176, 199, 226)，不透明度为90％，距离为-3，大小为5。

• 对于描边效果，他告诉我使用RGB(209, 217, 226)的大小为1和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 截图（如上所示）一样应用描边和阴影。如何设置距离、扩散、大小和位置？

有人能指点我如何应用这些阴影效果吗？出现了很多阴影效果，我想学习如何做到这一点，而不是在这里一个个地提问！

谢谢 :)

- Hemang

Answer 1

我相信你寻找的大多数配置都可以通过使用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);

你将得到一个漂亮且令人满意的阴影:

你可以通过控制阴影路径矩形插入来决定要如何构建阴影矩形。

- Morse

Answer 2

以下是“用户自定义运行时属性”的步骤：

1. 在Interface Builder中打开storyboard或xib文件。
2. 在Interface Builder中，选择要添加属性的对象。
3. 选择视图 > 实用程序 > 显示标识检查器。

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

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

- Nimit Parekh

---

惊人的解决方案。谢谢兄弟。 - Anuran Barman

Answer 3

为 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.

- iPatel

---

我的视图.layer.shadowColor = ...; - mnl

myView.layer.shadowOffset = ...; 我的视图.layer.shadowOffset = ...; - mnl

Answer 4

很抱歉，我只有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 代码中调用它们。

- Esqarrouth