2013-07-06 216 views
19

我想加上UIView 这是我的设计师给我申请阴影阴影中风阴影iOS:如何在UIView上添加投影和笔触阴影?

  • 对于阴影,他告诉我使用RGB(176199226)与90%的不透明度,距离-3和大小-5

  • 对于中风影子,他告诉申请,大小1和100%不透明度的RGB(209,217,226)。

这是Photoshop中应用了效果的屏幕,

enter image description hereenter image description here

具有所需阴影的视图(预期输出)

enter image description here

我尝试以下得到t他阴影

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; 

这是它的结果,

enter image description here

我了解如何申请中风和阴影的显示到Photoshop的截图有问题(我上面已经添加了)。如何申请距离,传播,大小,位置?

有人能指点我应用这些阴影的指南吗?有很多阴影效果出来,我想了解如何才能做到这一点,而不是问这里的每个问题!

谢谢:)

回答

22

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

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

enter image description here

现在,你想怎么阴影矩形是可以决定通过控制阴影路径矩形插入来构造。

6

对于给边境UIView

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

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. 
+0

myView.layer.shadowColor = ...; – mnl

+0

myView.layer.shadowOffset = ...; – mnl

8

以下是User Defined Runtime Attribute的步骤。

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

Identity inspector出现在实用工具区中。如下所示,用户定义的运行时属性编辑器是检查器中的一个项目。

enter image description here

  • 在用户定义的运行时的左下点击添加按钮(+)的属性的编辑器。
  • enter image description here

    2

    我很抱歉,我只有雨燕的解决方案,但继承人,我用做这个任务我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代码中调用它们。