keyboard/keyBoard/Class/Pay/V/KBVipPayHeaderView.m

//
//  KBVipPayHeaderView.m
//  keyBoard
//
//  中文注释：顶部头图区域，使用 Masonry 布局，包含 5 张图片。
//

#import "KBVipPayHeaderView.h"

@interface KBVipPayHeaderView ()
// 容器（为了便于以 KB_NAV_TOTAL_HEIGHT 作为内容起点）
@property (nonatomic, strong) UIView *containerView;
// 顶部大图：pay_vip_icon
@property (nonatomic, strong) UIImageView *vipImageView;
@property (nonatomic, strong) UIImageView *wanImageView;
@property (nonatomic, strong) UILabel *titleLabel;
@property (nonatomic, strong) UILabel *desLabel;

// 功能图标四宫格
@property (nonatomic, strong) UIImageView *aiImageView;
@property (nonatomic, strong) UIImageView *keyboardImageView;
@property (nonatomic, strong) UIImageView *chatImageView;
@property (nonatomic, strong) UIImageView *emotionImageView;
@end

@implementation KBVipPayHeaderView

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        self.backgroundColor = [UIColor clearColor];
        
        [self addSubview:self.containerView];
        [self.containerView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.equalTo(self);
        }];
        
        // 1. 顶部大图（略微下移，避开自定义导航栏）
        [self.containerView addSubview:self.vipImageView];
        [self.vipImageView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.right.left.equalTo(self.containerView).inset(KBFit(27));
            make.top.equalTo(self.containerView).offset(KB_NAV_TOTAL_HEIGHT + 10);
            make.height.mas_equalTo((269));
        }];
        [self.containerView addSubview:self.wanImageView];
        [self.wanImageView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.right.left.equalTo(self.containerView);
            make.top.equalTo(self.vipImageView).offset(70);
            make.bottom.equalTo(self.containerView).offset(-16);
        }];
        
        [self.containerView addSubview:self.titleLabel];
        [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerX.equalTo(self.containerView);
            make.top.equalTo(self.wanImageView).offset(53);
        }];
        [self.containerView addSubview:self.desLabel];
        [self.desLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerX.equalTo(self.containerView);
            make.top.equalTo(self.titleLabel.mas_bottom).offset(10);
        }];
        
        
        // 2. 下方四宫格图标（简单示意）
        UIView *g1 = [self gridItemWithImageView:self.aiImageView];
        UIView *g2 = [self gridItemWithImageView:self.keyboardImageView];
        UIView *g3 = [self gridItemWithImageView:self.chatImageView];
        UIView *g4 = [self gridItemWithImageView:self.emotionImageView];
        [self.containerView addSubview:g1];
        [self.containerView addSubview:g2];
        [self.containerView addSubview:g3];
        [self.containerView addSubview:g4];
        
        CGFloat spacing = 16;
        [g1 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(self.vipImageView);
            make.top.equalTo(self.desLabel.mas_bottom).offset(18);
            make.height.mas_equalTo(((KBFit(122))));
        }];
        [g2 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.right.equalTo(self.vipImageView);
            make.top.equalTo(g1);
            make.height.equalTo(g1);
            make.left.equalTo(g1.mas_right).offset(spacing);
            make.width.equalTo(g1);
        }];
        [g3 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(g1);
            make.top.equalTo(g1.mas_bottom).offset(spacing);
            make.height.equalTo(g1);
            make.width.equalTo(g1);
        }];
        [g4 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.right.equalTo(self.vipImageView);
            make.top.equalTo(g3);
            make.left.equalTo(g3.mas_right).offset(spacing);
            make.height.equalTo(g1);
            make.width.equalTo(g1);
            // 让 header 的高度由内部内容决定：最后一个元素贴到底部
            make.bottom.equalTo(self.containerView).offset(-12);
        }];
    }
    return self;
}

// 关键：让 header 根据 AutoLayout 自适应高度
- (UICollectionViewLayoutAttributes *)preferredLayoutAttributesFittingAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes {
    CGFloat targetWidth = layoutAttributes.size.width > 0 ? layoutAttributes.size.width : KB_SCREEN_WIDTH;
    // 先把自身宽度设为目标宽，便于系统计算高度
    self.bounds = CGRectMake(0, 0, targetWidth, self.bounds.size.height);
    [self setNeedsLayout];
    [self layoutIfNeeded];
    CGSize fit = [self systemLayoutSizeFittingSize:CGSizeMake(targetWidth, UILayoutFittingCompressedSize.height)
                      withHorizontalFittingPriority:UILayoutPriorityRequired
                            verticalFittingPriority:UILayoutPriorityFittingSizeLevel];
    CGRect f = layoutAttributes.frame;
    f.size.height = ceil(fit.height);
    layoutAttributes.frame = f;
    return layoutAttributes;
}

#pragma mark - Helpers
- (UIView *)gridItemWithImageView:(UIImageView *)iv {
    // 简单白底圆角卡片承载图标
    UIView *v = [UIView new];
//    v.backgroundColor = [UIColor colorWithWhite:0.97 alpha:1.0];
//    v.layer.cornerRadius = 12;
//    v.layer.masksToBounds = YES;
    [v addSubview:iv];
    iv.contentMode = UIViewContentModeScaleAspectFit;
    [iv mas_makeConstraints:^(MASConstraintMaker *make) {
//        make.center.equalTo(v);
//        make.width.height.mas_equalTo(40);
        make.edges.equalTo(v);
    }];
    return v;
}

#pragma mark - Lazy
- (UIView *)containerView {
    if (!_containerView) {
        _containerView = [UIView new];
        _containerView.backgroundColor = [UIColor clearColor];
    }
    return _containerView;
}

- (UIImageView *)vipImageView {
    if (!_vipImageView) {
        _vipImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"pay_vip_icon"]];
        _vipImageView.contentMode = UIViewContentModeScaleAspectFill;
    }
    return _vipImageView;
}

- (UIImageView *)wanImageView {
    if (!_wanImageView) {
        _wanImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"pay_wanwhite_icon"]];
        _wanImageView.contentMode = UIViewContentModeScaleAspectFill;
    }
    return _wanImageView;
}

- (UIImageView *)aiImageView {
    if (!_aiImageView) {
        _aiImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"pay_ai_icon"]];
        _aiImageView.contentMode = UIViewContentModeScaleAspectFit;
    }
    return _aiImageView;
}
- (UIImageView *)keyboardImageView {
    if (!_keyboardImageView) {
        _keyboardImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"pay_keyboard_icon"]];
        _keyboardImageView.contentMode = UIViewContentModeScaleAspectFit;
    }
    return _keyboardImageView;
}
- (UIImageView *)chatImageView {
    if (!_chatImageView) {
        _chatImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"pay_chat_icon"]];
        _chatImageView.contentMode = UIViewContentModeScaleAspectFit;
    }
    return _chatImageView;
}
- (UIImageView *)emotionImageView {
    if (!_emotionImageView) {
        _emotionImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"pay_emotion_icon"]];
        _emotionImageView.contentMode = UIViewContentModeScaleAspectFit;
    }
    return _emotionImageView;
}


- (UILabel *)titleLabel{
    if (!_titleLabel) {
        _titleLabel = [[UILabel alloc] init];
        _titleLabel.text = @"Become a member of LOVE KEY";
        _titleLabel.textColor = [UIColor colorWithHex:KBBlackValue];
        _titleLabel.font = [UIFont systemFontOfSize:25 weight:UIFontWeightBold];
    }
    return _titleLabel;
}
- (UILabel *)desLabel{
    if (!_desLabel) {
        _desLabel = [[UILabel alloc] init];
        _desLabel.text = @"Unlock all functions";
        _desLabel.textColor = [UIColor colorWithHex:KBBlackValue];
        _desLabel.font = [UIFont systemFontOfSize:16 weight:UIFontWeightBold];
    }
    return _desLabel;
}

@end