iOS-圆形头像+阴影

我们经常会做圆形头像+阴影的效果
1.直接添加到View
图片效果如下：

效果图.png

写这篇文章的目的单纯为了记录代码，方便后期自己使用。代码如下：

#import "ViewController.h"
#import "Masonry.h"
#define kWidth 50
@interface ViewController ()
{
    UIImageView *imgView;
    CALayer *shadowLayer;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    
方法1
//    [self test1];
    
方法2
    [self test2];
    [self.view setNeedsLayout];
    [self.view layoutIfNeeded];
    
}
-(void)viewWillLayoutSubviews {
    shadowLayer.frame = imgView.frame;
}
-(void)test1 {
    imgView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"1"]];
    imgView.layer.cornerRadius = kWidth * 0.5;
    
    [self.view addSubview:imgView];
    [imgView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.top.mas_equalTo(100);
        make.width.height.mas_equalTo(kWidth);
        
    }];
    imgView.layer.shadowColor = [UIColor redColor].CGColor;
    imgView.layer.shadowOffset = CGSizeMake(0, 0);
    imgView.layer.shadowOpacity = 0.4;
}
-(void)test2 {
    imgView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"1"]];
    imgView.layer.cornerRadius = kWidth * 0.5;
    imgView.layer.masksToBounds = YES;
    [self.view addSubview:imgView];
    shadowLayer = [[CALayer alloc]init];
    shadowLayer.frame = imgView.frame;
    shadowLayer.backgroundColor = [UIColor redColor].CGColor;
    shadowLayer.cornerRadius = kWidth * 0.5;
    shadowLayer.shadowColor = [UIColor redColor].CGColor;
    shadowLayer.shadowOffset = CGSizeMake(0, 0);
    shadowLayer.shadowOpacity = 0.4;
    
    [self.view.layer addSublayer:shadowLayer];
    //两种添加都可以
//    [self.view bringSubviewToFront:imgView];
     [self.view.layer insertSublayer:imgView.layer above:shadowLayer];
    [imgView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.top.mas_equalTo(100);
        make.width.height.mas_equalTo(kWidth);
        
    }];
   
  
}
@end

2. 直接添加到cell上
在cell的-(void)layoutSubviews方法中写如下代码

-(void)layoutSubviews {
    [super layoutSubviews];
    shadowLayer.frame = imgView.frame;
}

在-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath方法中

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    MyCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cellID"];
    if (!cell) {
        cell = [[MyCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cellID"];
        
    }
    !!!!重点是重新绘制cell
    [cell layoutIfNeeded];
    cell.backgroundColor = [UIColor whiteColor];
    cell.titleLabel.text = self.dataArr[indexPath.row];
    return cell;
}

坑如下：

[self test1]中如果imgView的圆角+阴影作用在一个layer上，切记不可写 imgView.layer.masksToBounds = YES。

[self test2]中，使用imgView.layer.masksToBounds = YES，另创建的layer 的frame，backgroundColor，cornerRadius 要写成跟imgView一样的尺寸，用masonry 布局后，要重新刷新一下view布局，即调用[self.view setNeedsLayout]; [self.view layoutIfNeeded];在viewWillLayoutSubviews中重新布局一下shadowLayer的frame。

demo git地址：https://github.com/sisios/circleAndShadow

先记录这些，感谢阅读，如有错误，不吝赐教！

最后编辑于：2019.12.20 17:13:13