iOS开发-阴影效果

注:由于采用Masonry布局,所以具体frame就不在代码中贴出,图片中正方形size均为(100,100),长方形size均为(100,50)

• view的普通阴影效果

UILabel *label0 = [UILabel labelWithTitle:@"view的普通阴影" font:kFont(16) textColor:kColor(0x333333)];
    
UIView *sView0 = [UIView new];
sView0.backgroundColor = kColor(0x333333);
[view0 addSubview:sView0];
    
// 阴影颜色
sView0.layer.shadowColor = kColor(0x999999).CGColor;
// 阴影偏移量 默认为(0,3)
sView0.layer.shadowOffset = CGSizeMake(4, 4);
// 阴影透明度
sView0.layer.shadowOpacity = 1;

效果如下

1.png

• view的周边阴影效果

  // 2.view的周边阴影
    UILabel *label1 = [UILabel labelWithTitle:@"view的周边阴影" font:kFont(16) textColor:kColor(0x333333)];
    UIView *sView1 = [UIView new];
    sView1.backgroundColor = kColor(0x333333);
    [view1 addSubview:sView1];
    
    // 因为shandowOffset默认为(0,3),此处需要修正下
    sView1.layer.shadowOffset = CGSizeMake(0, 0);
    sView1.layer.shadowColor = kColor(0x999999).CGColor;
    sView1.layer.shadowOpacity = 1;
    
    // 设置阴影的路径 此处效果为在view周边添加宽度为4的阴影效果
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(-4, -4, 100 + 8, 100 + 8)];
    // 或者
//    UIBezierPath *path0 = [UIBezierPath bezierPath];
//    [path0 moveToPoint:CGPointMake(-4, -4)];
//    [path0 addLineToPoint:CGPointMake(-4, -4 + 108)];
//    [path0 addLineToPoint:CGPointMake(-4 + 108, -4 + 108)];
//    [path0 addLineToPoint:CGPointMake(-4 + 108, -4)];
//    [path0 addLineToPoint:CGPointMake(-4, -4)];
//    [path0 closePath];
    
    sView1.layer.shadowPath = path.CGPath;

效果如下

2.png

• button(无圆角)的普通阴影效果

 // 3.button的普通阴影效果
    UILabel *label2 = [UILabel labelWithTitle:@"button的普通阴影" font:kFont(16) textColor:kColor(0x333333)];
    UIButton *sBtn0 = [UIButton new];
    sBtn0.backgroundColor = kColor(0x333333);
    [view2 addSubview:sBtn0];
    
    
    sBtn0.layer.shadowOffset = CGSizeMake(4, 4);
    sBtn0.layer.shadowColor = kColor(0x999999).CGColor;
    sBtn0.layer.shadowOpacity = 1;

效果如下

3.png

• button(无圆角)的周边阴影效果

 // 4.button的周边阴影
    UILabel *label3 = [UILabel labelWithTitle:@"button的周边阴影" font:kFont(16) textColor:kColor(0x333333)];
    UIButton *sBtn1 = [UIButton new];
    sBtn1.backgroundColor = kColor(0x333333);
    [view3 addSubview:sBtn1];
    
    sBtn1.layer.shadowOffset = CGSizeMake(0, 0);
    sBtn1.layer.shadowColor = kColor(0x999999).CGColor;
    sBtn1.layer.shadowOpacity = 1;
    
    UIBezierPath *path1 = [UIBezierPath bezierPathWithRect:CGRectMake(-4, -4, 100 + 8, 50 + 8)];
    sBtn1.layer.shadowPath = path1.CGPath;

效果如下

4.png

iOS中部分控件(如UIButton)需要调用layer.maskToBounds = YES 才能实现圆角效果,由于layer.maskToBounds属性会与阴影效果相冲突,所以在实现这类控件既有圆角又有阴影的效果时,我们需要在控件底部添加一个单独view来独立实现阴影效果,如下

• button(有圆角)的普通阴影效果

// 5.圆角button的普通阴影
    UILabel *label4 = [UILabel labelWithTitle:@"圆角button的普通阴影" font:kFont(16) textColor:kColor(0x333333)];
    UIButton *sBtn2 = [UIButton new];
    sBtn2.backgroundColor = kColor(0x333333);
    sBtn2.layer.cornerRadius = 25.f;
    sBtn2.layer.masksToBounds = YES;
    [view4 addSubview:sBtn2];
    
    // 添加底部view实现阴影效果
    UIView *sBtn2BackView = [UIView new];
    sBtn2BackView.backgroundColor = kColor(0x333333);
    sBtn2BackView.layer.cornerRadius = 25.f;
    [view4 insertSubview:sBtn2BackView belowSubview:sBtn2];
    sBtn2BackView.layer.shadowOpacity = 1;
    sBtn2BackView.layer.shadowOffset = CGSizeMake(4, 4);
    sBtn2BackView.layer.shadowColor = kColor(0x999999).CGColor;

效果如下

5.png

• button(有圆角的周边阴影效果)

// 6.圆角button的周边阴影
    UILabel *label5 = [UILabel labelWithTitle:@"圆角button的周边阴影" font:kFont(16) textColor:kColor(0x333333)];
    UIButton *sBtn3 = [UIButton new];
    sBtn3.backgroundColor = kColor(0x333333);
    sBtn3.layer.cornerRadius = 25.f;
    sBtn3.layer.masksToBounds = YES;
    [view5 addSubview:sBtn3];
    
    UIView *sBtn3BackView = [UIView new];
    sBtn3BackView.backgroundColor = [UIColor clearColor];
    [view5 insertSubview:sBtn3BackView belowSubview:sBtn3];
    sBtn3BackView.layer.shadowOpacity = 1;
    sBtn3BackView.layer.shadowOffset = CGSizeMake(0, 0);
    sBtn3BackView.layer.shadowColor = kColor(0x999999).CGColor;
    
//    UIBezierPath *path2 = [UIBezierPath bezierPath];
//    [path2 moveToPoint:CGPointMake(25, -4)];
//    [path2 addLineToPoint:CGPointMake(25 + 50, -4)];
//    // center 圆心
//    // radius 半径
//    // startAngle 开始时的弧度 (圆的最右边为0 上右下左分别为 -M_PI_2, 0 , M_PI_2, M_PI)
//    // endAngle 结束时的弧度
//    // clockwise 顺时针或者逆时针 yes为瞬时针
//    [path2 addArcWithCenter:CGPointMake(75, 25) radius:29.f startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES];
//    [path2 addLineToPoint:CGPointMake(25, -4 + 50 + 8)];
//    [path2 addArcWithCenter:CGPointMake(25, 25) radius:29.f startAngle:M_PI_2 endAngle:M_PI + M_PI_2 clockwise:YES];
//    [path2 closePath];
//    sBtn3BackView.layer.shadowPath = path2.CGPath;
    
    //简单的方法,上边方法可以用来自定义路径
    UIBezierPath *path3 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(-4, -4, 108, 58) cornerRadius:29];
    sBtn3BackView.layer.shadowPath = path3.CGPath;

效果如下

6.png

我们还可以根据UIBezierPath来自己绘制各种各样的路径来实现阴影效果