注:由于采用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;
// 陰影偏移量 默認(rèn)為(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];
// 因?yàn)閟handowOffset默認(rèn)為(0,3),此處需要修正下
sView1.layer.shadowOffset = CGSizeMake(0, 0);
sView1.layer.shadowColor = kColor(0x999999).CGColor;
sView1.layer.shadowOpacity = 1;
// 設(shè)置陰影的路徑 此處效果為在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)需要調(diào)用layer.maskToBounds = YES 才能實(shí)現(xiàn)圓角效果,由于layer.maskToBounds屬性會(huì)與陰影效果相沖突,所以在實(shí)現(xiàn)這類控件既有圓角又有陰影的效果時(shí),我們需要在控件底部添加一個(gè)單獨(dú)view來獨(dú)立實(shí)現(xiàn)陰影效果,如下
- 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實(shí)現(xiàn)陰影效果
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 開始時(shí)的弧度 (圓的最右邊為0 上右下左分別為 -M_PI_2, 0 , M_PI_2, M_PI)
// // endAngle 結(jié)束時(shí)的弧度
// // clockwise 順時(shí)針或者逆時(shí)針 yes為瞬時(shí)針
// [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
我們還可以根據(jù)UIBezierPath來自己繪制各種各樣的路徑來實(shí)現(xiàn)陰影效果
