// // 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