keyboard/keyBoard/Class/Home/V/KBTopThreeView.m

//
//  KBTopThreeView.m
//  keyBoard
//

#import "KBTopThreeView.h"

@interface KBTopThreeCardView : UIView
/// 头像占位（圆形描边）
@property (nonatomic, strong) UIView *avatarCircleView;
/// 彩条卡片背景
@property (nonatomic, strong) UIImageView *cardImageView;
/// 标题
@property (nonatomic, strong) UILabel *titleLabel;

/// 渲染
- (void)renderWithTitle:(NSString *)title 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(148));
    }];

  

    [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.cardImageView);
        make.top.equalTo(self.cardImageView).offset(84);
    }];

}

- (void)renderWithTitle:(NSString *)title rank:(NSInteger)rank {
    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;
    // 加号按钮移至 KBTopThreeView，由其统一控制样式与布局

    // 圆圈描边
    self.avatarCircleView.layer.borderColor = [UIColor colorWithRed:0.83 green:0.95 blue:0.27 alpha:1.0].CGColor;
}

#pragma mark - Lazy

- (UIView *)avatarCircleView {
    if (!_avatarCircleView) {
        _avatarCircleView = [[UIView alloc] init];
        _avatarCircleView.backgroundColor = [UIColor whiteColor];
        _avatarCircleView.layer.cornerRadius = 34;
        _avatarCircleView.layer.borderWidth = 2.0;
        _avatarCircleView.layer.borderColor = [UIColor colorWithWhite:0.9 alpha:1].CGColor;
        // 可在此加入头像 UIImageView
    }
    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 = [UIFont systemFontOfSize:16 weight:UIFontWeightSemibold];
        _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;
@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.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);
        make.width.mas_equalTo(52);
        make.height.mas_equalTo(28);
        make.bottom.equalTo(self).offset(-8);
    }];
}

- (void)configWithItems:(NSArray<NSDictionary *> *)items {
    // items 顺序任意，这里按 rank 分配：1 放中间，2 左，3 右
    NSString *t1 = @"", *t2 = @"", *t3 = @"";
    for (NSDictionary *d in items) {
        NSInteger r = [d[@"rank"] integerValue];
        NSString *title = d[@"title"] ?: @"";
        if (r == 1) t1 = title;
        else if (r == 2) t2 = title;
        else if (r == 3) t3 = title;
    }
    [self.centerCard renderWithTitle:t1 rank:1];
    [self.leftCard renderWithTitle:t2 rank:2];
    [self.rightCard renderWithTitle:t3 rank:3];
}

#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];
    }
    return _plusButton;
}

@end