前言

项目中碰到一种卡片样式的视图的需求，在这里顺便也记录一下，可能性能方面不是很好。如果用在大量的列表里面，可能还需要优化。

card.PNG

---

设计思路

主要的设计思路是：

1. contentView上放置imageView和titleLabel；
2. dimmingView负责渲染阴影；
3. contentView和dimmingView放在相同的父视图上，并且具有相同的frame。

---

代码实现

主要的实现代码如下：

@interface ViewController ()

@property (nonatomic, strong) UIView *contentView;
@property (nonatomic, strong) UIView *dimmingView;
@property (nonatomic, strong) UIImageView *imageView;
@property (nonatomic, strong) UILabel *titleLabel;

@end

@implementation ViewController

#pragma mark - life cycle
// 列表展示
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.view.backgroundColor = UIColorFromHex(0xeeeeee);
    [self setupConstraintsForSubviews];
    
    self.imageView.image = [UIImage imageNamed:@"son"];
    self.titleLabel.text = @"可爱的小朋友";
}

#pragma mark - layout subviews
- (void)setupConstraintsForSubviews {
    [self.view addSubview:self.dimmingView];
    [self.view addSubview:self.contentView];
    [self.contentView addSubview:self.imageView];
    [self.contentView addSubview:self.titleLabel];
    
    [self.contentView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.mas_offset(0);
    }];
    
    [self.dimmingView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.contentView);
    }];
    
    [self.imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.right.mas_offset(0);
        make.size.mas_equalTo(200);
    }];
    
    [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.mas_offset(0);
        make.top.equalTo(self.imageView.mas_bottom).mas_offset(20);
        make.bottom.mas_offset(-20);
    }];
}

#pragma mark - lazy load
- (UILabel *)titleLabel {
    if (!_titleLabel) {
        _titleLabel = [[UILabel alloc]init];
        _titleLabel.textAlignment = NSTextAlignmentCenter;
    }
    return _titleLabel;
}

- (UIImageView *)imageView {
    if (!_imageView) {
        _imageView = [[UIImageView alloc]init];
    }
    return _imageView;
}

- (UIView *)contentView {
    if (!_contentView) {
        _contentView = [[UIView alloc]init];
        _contentView.layer.cornerRadius = 10;
        _contentView.clipsToBounds = YES;
    }
    return _contentView;
}

- (UIView *)dimmingView {
    if (!_dimmingView) {
        _dimmingView = [[UIView alloc]init];
        // 设置阴影
        _dimmingView.layer.cornerRadius = 10;
        _dimmingView.layer.backgroundColor = [UIColor whiteColor].CGColor;
        _dimmingView.layer.shadowOpacity = 1;
        _dimmingView.layer.shadowColor = [UIColor brownColor].CGColor;
        _dimmingView.layer.shadowRadius = 10;
        _dimmingView.layer.shadowOffset = CGSizeMake(10, 10);
        _dimmingView.clipsToBounds = NO;
    }
    return _dimmingView;
}

@end

---