iOS UIView设置阴影.md

这里采用的途径是CALayer的shadow属性:

• shadowColor: 阴影颜色, 类CGColorRef
• shadowOpacity:阴影透明度, 取值0~1.
• shadowOffset:阴影偏移量, 是相对iOS左上角的坐标系而言, 默认值: CGSizeMake(0,-3).
• shadowRadius:阴影半径, 默认值CGFloat=3.
• shadowPath:阴影路径, CGPathRef.

一、常用实现方式有以下两种:

方式一:指定阴影路径shadowPath,推荐
方式二:不指定阴影路径shadowPaht.(若存在大量的阴影,影响性能.)

二、指定shadowPath实现

- (void)drawShadow
{
    UIView *parentView  = [[UIView alloc] initWithFrame:CGRectMake(20, 100, 200, 200)];
    [self.view addSubview:parentView];
    parentView.backgroundColor = [UIColor whiteColor];
    
    UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(40, 40, 80, 40)];
    [btn setTitle:@"hello" forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
    [parentView addSubview:btn];
    btn.layer.borderWidth = 1;
    btn.layer.borderColor = [UIColor blackColor].CGColor;
    //阴影
    btn.layer.masksToBounds = YES;//默认值为NO。不能设置为YES，否则阴影无法出现。
    btn.layer.shadowColor = [UIColor redColor].CGColor;
    btn.layer.shadowOpacity = 0.5;//阴影透明度，默认0
    btn.layer.shadowRadius = 4;//阴影圆角
    btn.layer.shadowOffset = CGSizeMake(0, 0);    //阴影偏移量。有值是向下向右偏移。
    

    /*
     * 默认值：(0,-3)向上偏移。
       原因：阴影最先在mac平台实现，默认是向下偏移3。但由于iOS和macOS的Y轴相反，所以，iOS是向上偏移3.
     
       设置为：(0,0)，四周都有阴影。
     */
    //阴影路径
    btn.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:btn.bounds cornerRadius:btn.layer.cornerRadius].CGPath;
    
    
}

三、常见属性

设置layer的masksToBounds = YES;(阴影无法显示)

maskToBounds=YES.png=20x20

clipsToBounds: 指视图上的子视图,如果超出父视图的部分就截取掉.
masksToBounds: 指视图的图层上的子图层,如果超出父图层的部分就截取掉.
     所以如果要设置阴影: masksToBounds = NO;

⚠️: layer的shadow属性和mask属性存在冲突, 所以才有上面的问题. 如果要想layer的shadow属性和mask属性共存, 则是新建一个layer赋予mask属性, 并将其embed第二个layer(带有shadow属性), 两个layer的bounds相等

UIView *shadowView = [[UIView alloc] initWithFrame:CGRectMake(40, 300, 100, 40)];
    shadowView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:shadowView];
    ///layer带有shadow属性
    shadowView.layer.shadowColor = [UIColor redColor].CGColor;
    shadowView.layer.shadowOpacity = 1.0f;
    shadowView.layer.shadowRadius = 10;
    shadowView.layer.shadowOffset = CGSizeMake(4, 4);
    shadowView.layer.cornerRadius = 5;
    
    //mask不生效.
//    shadowView.layer.masksToBounds = YES;
    
    ///maskLayer带有mask属性, 并嵌入到shaowLayer
    CALayer *maskLayer = [CALayer layer];
    maskLayer.frame = shadowView.layer.bounds;
    maskLayer.masksToBounds = YES;
    [shadowView.layer addSublayer:maskLayer];

image.png

shadowOffset

• shadowOffset = CGSizeMake(0, -3)
  ⚠️: 至于为什么默认值是CGSizeMake(0, -3)第一个代码注释中有说明.
  offset=0和-6.png

• shadowOffset = CGSizeMake(0, 0)

  
  offset=0和0.png