// // KBTopThreeView.m // keyBoard // #import "KBTopThreeView.h" #import "UIImageView+KBWebImage.h" @interface KBTopThreeCardView : UIView /// 头像视图(圆形描边) @property (nonatomic, strong) UIImageView *avatarCircleView; /// 彩条卡片背景 @property (nonatomic, strong) UIImageView *cardImageView; /// 标题 @property (nonatomic, strong) UILabel *titleLabel; /// 使用角色模型渲染 - (void)renderWithCharacter:(KBCharacter *)character rank:(NSInteger)rank; @end @implementation KBTopThreeCardView - (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { [self setupUI]; } return self; } - (void)setupUI { // 卡片 [self addSubview:self.cardImageView]; // 头像圆圈 [self addSubview:self.avatarCircleView]; [self.cardImageView addSubview:self.titleLabel]; // 布局 [self.avatarCircleView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self); make.centerX.equalTo(self); make.width.height.mas_equalTo(68); }]; [self.cardImageView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.avatarCircleView.mas_bottom).offset(-34); // 顶部悬浮重叠 make.left.right.equalTo(self); make.height.mas_equalTo(KBFit(158)); }]; [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) { make.centerX.equalTo(self.cardImageView); make.top.equalTo(self.cardImageView).offset(KBFit(95)); }]; } - (void)renderWithCharacter:(KBCharacter *)character rank:(NSInteger)rank { NSString *title = character.characterName ?: @""; self.titleLabel.text = title.length ? title : @""; // 不同名次数的配色 UIColor *theme; UIImage *image; switch (rank) { case 1: { theme = [UIColor colorWithRed:1.00 green:0.86 blue:0.43 alpha:1.0]; image = [UIImage imageNamed:@"home_rank_1"]; } break; // 金 case 2: { theme = [UIColor colorWithRed:0.68 green:0.80 blue:1.00 alpha:1.0]; image = [UIImage imageNamed:@"home_rank_2"]; } break; // 蓝 default: { theme = [UIColor colorWithRed:1.00 green:0.78 blue:0.63 alpha:1.0]; image = [UIImage imageNamed:@"home_rank_3"]; } break; // 橙 } self.cardImageView.image = image; // 头像图片 [self.avatarCircleView kb_setAvatarURL:character.avatarUrl placeholder:KBPlaceholderImage]; // 圆圈描边 self.avatarCircleView.layer.borderColor = [UIColor colorWithRed:0.83 green:0.95 blue:0.27 alpha:1.0].CGColor; } #pragma mark - Lazy - (UIImageView *)avatarCircleView { if (!_avatarCircleView) { _avatarCircleView = [[UIImageView alloc] init]; _avatarCircleView.backgroundColor = [UIColor whiteColor]; _avatarCircleView.layer.cornerRadius = 34; _avatarCircleView.layer.borderWidth = 2.0; _avatarCircleView.layer.masksToBounds = true; } return _avatarCircleView; } - (UIImageView *)cardImageView { if (!_cardImageView) { _cardImageView = [[UIImageView alloc] init]; } return _cardImageView; } - (UILabel *)titleLabel { if (!_titleLabel) { _titleLabel = [[UILabel alloc] init]; _titleLabel.textColor = [UIColor colorWithWhite:0.1 alpha:1]; _titleLabel.font = [KBFont medium:13]; _titleLabel.textAlignment = NSTextAlignmentCenter; } return _titleLabel; } // 此类不再持有 plusButton @end @interface KBTopThreeView() @property (nonatomic, strong) KBTopThreeCardView *leftCard; @property (nonatomic, strong) KBTopThreeCardView *centerCard; @property (nonatomic, strong) KBTopThreeCardView *rightCard; /// 统一的底部加号按钮(移出卡片,放到 KBTopThreeView) @property (nonatomic, strong) UIButton *plusButton; /// 左右卡片底部也有 plus 按钮 @property (nonatomic, strong) UIButton *leftPlusButton; @property (nonatomic, strong) UIButton *rightPlusButton; /// 对应的前三名角色模型(用于回调和状态控制) @property (nonatomic, strong, nullable) KBCharacter *firstCharacter; @property (nonatomic, strong, nullable) KBCharacter *secondCharacter; @property (nonatomic, strong, nullable) KBCharacter *thirdCharacter; @end @implementation KBTopThreeView - (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { self.backgroundColor = [UIColor whiteColor]; [self setupUI]; } return self; } - (void)setupUI { [self addSubview:self.leftCard]; [self addSubview:self.centerCard]; [self addSubview:self.rightCard]; [self addSubview:self.plusButton]; [self addSubview:self.leftPlusButton]; [self addSubview:self.rightPlusButton]; // 横向均分布局 [self.centerCard mas_makeConstraints:^(MASConstraintMaker *make) { make.centerX.equalTo(self); make.top.equalTo(self).offset(8); make.width.mas_equalTo(KBFit(96)); make.height.mas_equalTo(KBFit(180)); }]; // 第二、三名比第一名矮一点:顶部向下偏移 CGFloat sideTopDelta = 12.0; // 侧边两张比中间低 12pt(可按设计调整) [self.leftCard mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.centerCard).offset(sideTopDelta); make.right.equalTo(self.centerCard.mas_left).offset(-8); make.width.equalTo(self.centerCard); // 与中间卡片底部对齐,通过高度差体现“更矮” make.height.equalTo(self.centerCard); }]; [self.rightCard mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.centerCard).offset(sideTopDelta); make.left.equalTo(self.centerCard.mas_right).offset(8); make.width.equalTo(self.centerCard); make.height.equalTo(self.centerCard); }]; // 用 plusButton 来“撑起”本视图,且底部对齐 [self.plusButton mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.centerCard.mas_bottom).offset(12); make.centerX.equalTo(self); // 或改为 equalTo(self.centerCard) 以严格与中卡居中 make.width.mas_equalTo(60); make.height.mas_equalTo(28); make.bottom.equalTo(self).offset(-8); }]; // 左右 plus 按钮,同样底部对齐,用它们一起撑起视图 [self.leftPlusButton mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.leftCard.mas_bottom).offset(12); make.centerX.equalTo(self.leftCard); make.width.height.equalTo(self.plusButton); make.bottom.equalTo(self).offset(-8); }]; [self.rightPlusButton mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.rightCard.mas_bottom).offset(12); make.centerX.equalTo(self.rightCard); make.width.height.equalTo(self.plusButton); make.bottom.equalTo(self).offset(-8); }]; } - (void)configWithCharacters:(NSArray *)characters { self.firstCharacter = characters.count > 0 ? characters[0] : nil; self.secondCharacter = characters.count > 1 ? characters[1] : nil; self.thirdCharacter = characters.count > 2 ? characters[2] : nil; if (self.firstCharacter) { [self.centerCard renderWithCharacter:self.firstCharacter rank:1]; } else { [self.centerCard renderWithCharacter:[KBCharacter new] rank:1]; } if (self.secondCharacter) { [self.leftCard renderWithCharacter:self.secondCharacter rank:2]; } else { [self.leftCard renderWithCharacter:[KBCharacter new] rank:2]; } if (self.thirdCharacter) { [self.rightCard renderWithCharacter:self.thirdCharacter rank:3]; } else { [self.rightCard renderWithCharacter:[KBCharacter new] rank:3]; } // 根据 added 状态刷新三个加号按钮的 UI 和可点击状态 [self updatePlusButtonsState]; } - (void)onCenterPlusTappedInternal { if (self.onCenterPlusTapped) { self.onCenterPlusTapped(self.firstCharacter); } } - (void)onLeftPlusTappedInternal { if (self.onLeftPlusTapped) { self.onLeftPlusTapped(self.secondCharacter); } } - (void)onRightPlusTappedInternal { if (self.onRightPlusTapped) { self.onRightPlusTapped(self.thirdCharacter); } } /// 根据角色是否已添加,更新三个底部按钮的文案与状态 - (void)updatePlusButtonsState { [self updatePlusButton:self.plusButton withCharacter:self.firstCharacter]; [self updatePlusButton:self.leftPlusButton withCharacter:self.secondCharacter]; [self updatePlusButton:self.rightPlusButton withCharacter:self.thirdCharacter]; } - (void)updatePlusButton:(UIButton *)button withCharacter:(KBCharacter * _Nullable)character { if (!character) { button.hidden = YES; return; } button.hidden = NO; BOOL added = character.added; if (added) { // 已添加:灰色背景 + 勾选,且禁用点击 [button setTitle:@"✓" forState:UIControlStateNormal]; [button setTitleColor:[UIColor colorWithWhite:0.45 alpha:1.0] forState:UIControlStateNormal]; button.backgroundColor = [UIColor colorWithWhite:0.92 alpha:1.0]; button.enabled = NO; } else { // 未添加:绿色加号,可点击 [button setTitle:@"+" forState:UIControlStateNormal]; [button setTitleColor:[UIColor colorWithRed:0.20 green:0.65 blue:0.50 alpha:1.0] forState:UIControlStateNormal]; button.backgroundColor = [[UIColor colorWithRed:0.20 green:0.65 blue:0.50 alpha:1.0] colorWithAlphaComponent:0.15]; button.enabled = YES; } } #pragma mark - Lazy - (KBTopThreeCardView *)leftCard { if (!_leftCard) _leftCard = [KBTopThreeCardView new]; return _leftCard; } - (KBTopThreeCardView *)centerCard { if (!_centerCard) _centerCard = [KBTopThreeCardView new]; return _centerCard; } - (KBTopThreeCardView *)rightCard { if (!_rightCard) _rightCard = [KBTopThreeCardView new]; return _rightCard; } - (UIButton *)plusButton { if (!_plusButton) { _plusButton = [UIButton buttonWithType:UIButtonTypeCustom]; [_plusButton setTitle:@"+" forState:UIControlStateNormal]; [_plusButton setTitleColor:[UIColor colorWithRed:0.20 green:0.65 blue:0.50 alpha:1.0] forState:UIControlStateNormal]; _plusButton.titleLabel.font = [UIFont systemFontOfSize:18 weight:UIFontWeightSemibold]; _plusButton.layer.cornerRadius = 14.0; _plusButton.layer.masksToBounds = YES; // 默认浅色背景,可按需要在外层配置 _plusButton.backgroundColor = [[UIColor colorWithRed:0.20 green:0.65 blue:0.50 alpha:1.0] colorWithAlphaComponent:0.15]; [_plusButton addTarget:self action:@selector(onCenterPlusTappedInternal) forControlEvents:UIControlEventTouchUpInside]; } return _plusButton; } - (UIButton *)leftPlusButton { if (!_leftPlusButton) { _leftPlusButton = [UIButton buttonWithType:UIButtonTypeCustom]; [_leftPlusButton setTitle:@"+" forState:UIControlStateNormal]; [_leftPlusButton setTitleColor:[UIColor colorWithRed:0.20 green:0.65 blue:0.50 alpha:1.0] forState:UIControlStateNormal]; _leftPlusButton.titleLabel.font = [UIFont systemFontOfSize:18 weight:UIFontWeightSemibold]; _leftPlusButton.layer.cornerRadius = 14.0; _leftPlusButton.layer.masksToBounds = YES; _leftPlusButton.backgroundColor = [[UIColor colorWithRed:0.20 green:0.65 blue:0.50 alpha:1.0] colorWithAlphaComponent:0.15]; [_leftPlusButton addTarget:self action:@selector(onLeftPlusTappedInternal) forControlEvents:UIControlEventTouchUpInside]; } return _leftPlusButton; } - (UIButton *)rightPlusButton { if (!_rightPlusButton) { _rightPlusButton = [UIButton buttonWithType:UIButtonTypeCustom]; [_rightPlusButton setTitle:@"+" forState:UIControlStateNormal]; [_rightPlusButton setTitleColor:[UIColor colorWithRed:0.20 green:0.65 blue:0.50 alpha:1.0] forState:UIControlStateNormal]; _rightPlusButton.titleLabel.font = [UIFont systemFontOfSize:18 weight:UIFontWeightSemibold]; _rightPlusButton.layer.cornerRadius = 14.0; _rightPlusButton.layer.masksToBounds = YES; _rightPlusButton.backgroundColor = [[UIColor colorWithRed:0.20 green:0.65 blue:0.50 alpha:1.0] colorWithAlphaComponent:0.15]; [_rightPlusButton addTarget:self action:@selector(onRightPlusTappedInternal) forControlEvents:UIControlEventTouchUpInside]; } return _rightPlusButton; } @end