前言

項目中碰到一種卡片樣式的視圖的需求，在這里順便也記錄一下，可能性能方面不是很好。如果用在大量的列表里面，可能還需要優(yōu)化。

card.PNG

設計思路

主要的設計思路是：

1. contentView上放置imageView和titleLabel；
2. dimmingView負責渲染陰影；
3. contentView和dimmingView放在相同的父視圖上，并且具有相同的frame。

代碼實現(xiàn)

主要的實現(xiàn)代碼如下：

@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