contentView上放置imageView和titleLabel;
dimmingView负责渲染阴影;
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;
@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;