3
This commit is contained in:
220
keyBoard/Class/Home/V/KBTopThreeView.m
Normal file
220
keyBoard/Class/Home/V/KBTopThreeView.m
Normal file
@@ -0,0 +1,220 @@
|
||||
//
|
||||
// KBTopThreeView.m
|
||||
// keyBoard
|
||||
//
|
||||
|
||||
#import "KBTopThreeView.h"
|
||||
|
||||
@interface KBTopThreeCardView : UIView
|
||||
/// 头像占位（圆形描边）
|
||||
@property (nonatomic, strong) UIView *avatarCircleView;
|
||||
/// 彩条卡片背景
|
||||
@property (nonatomic, strong) UIView *cardView;
|
||||
/// 勋章数字（1/2/3）
|
||||
@property (nonatomic, strong) UILabel *medalLabel;
|
||||
/// 标题
|
||||
@property (nonatomic, strong) UILabel *titleLabel;
|
||||
/// 底部加号按钮
|
||||
@property (nonatomic, strong) UIButton *plusButton;
|
||||
|
||||
/// 渲染
|
||||
- (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.cardView];
|
||||
// 头像圆圈
|
||||
[self addSubview:self.avatarCircleView];
|
||||
[self.cardView addSubview:self.medalLabel];
|
||||
[self.cardView addSubview:self.titleLabel];
|
||||
// 加号按钮
|
||||
[self addSubview:self.plusButton];
|
||||
|
||||
// 布局
|
||||
[self.avatarCircleView mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||
make.top.equalTo(self);
|
||||
make.centerX.equalTo(self);
|
||||
make.width.height.mas_equalTo(68);
|
||||
}];
|
||||
|
||||
[self.cardView mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||
make.top.equalTo(self.avatarCircleView.mas_bottom).offset(-34); // 顶部悬浮重叠
|
||||
make.left.right.equalTo(self);
|
||||
make.height.mas_equalTo(146);
|
||||
}];
|
||||
|
||||
[self.medalLabel mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||
make.top.equalTo(self.cardView).offset(34 + 15);
|
||||
make.centerX.equalTo(self.cardView);
|
||||
make.width.height.mas_equalTo(28);
|
||||
}];
|
||||
|
||||
[self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||
make.centerX.equalTo(self.cardView);
|
||||
make.top.equalTo(self.medalLabel.mas_bottom).offset(20);
|
||||
}];
|
||||
|
||||
[self.plusButton mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||
make.top.equalTo(self.cardView.mas_bottom).offset(12);
|
||||
make.centerX.equalTo(self);
|
||||
make.width.mas_equalTo(52);
|
||||
make.height.mas_equalTo(28);
|
||||
make.bottom.equalTo(self.mas_bottom); // 由外部控制总体高度
|
||||
}];
|
||||
}
|
||||
|
||||
- (void)renderWithTitle:(NSString *)title rank:(NSInteger)rank {
|
||||
self.titleLabel.text = title.length ? title : @"";
|
||||
self.medalLabel.text = [NSString stringWithFormat:@"%ld", (long)rank];
|
||||
|
||||
// 不同名次数的配色
|
||||
UIColor *theme;
|
||||
switch (rank) {
|
||||
case 1: theme = [UIColor colorWithRed:1.00 green:0.86 blue:0.43 alpha:1.0]; break; // 金
|
||||
case 2: theme = [UIColor colorWithRed:0.68 green:0.80 blue:1.00 alpha:1.0]; break; // 蓝
|
||||
default: theme = [UIColor colorWithRed:1.00 green:0.78 blue:0.63 alpha:1.0]; break; // 橙
|
||||
}
|
||||
self.cardView.backgroundColor = theme;
|
||||
self.plusButton.backgroundColor = [theme colorWithAlphaComponent:0.3];
|
||||
|
||||
// 圆圈描边
|
||||
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;
|
||||
}
|
||||
|
||||
- (UIView *)cardView {
|
||||
if (!_cardView) {
|
||||
_cardView = [[UIView alloc] init];
|
||||
_cardView.layer.cornerRadius = 14.0;
|
||||
_cardView.layer.masksToBounds = YES;
|
||||
_cardView.backgroundColor = [UIColor colorWithWhite:0.95 alpha:1];
|
||||
}
|
||||
return _cardView;
|
||||
}
|
||||
|
||||
- (UILabel *)medalLabel {
|
||||
if (!_medalLabel) {
|
||||
_medalLabel = [[UILabel alloc] init];
|
||||
_medalLabel.textAlignment = NSTextAlignmentCenter;
|
||||
_medalLabel.font = [UIFont boldSystemFontOfSize:15];
|
||||
_medalLabel.textColor = [UIColor whiteColor];
|
||||
_medalLabel.backgroundColor = [UIColor colorWithWhite:0.3 alpha:0.7];
|
||||
_medalLabel.layer.cornerRadius = 14;
|
||||
_medalLabel.layer.masksToBounds = YES;
|
||||
}
|
||||
return _medalLabel;
|
||||
}
|
||||
|
||||
- (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;
|
||||
}
|
||||
|
||||
- (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;
|
||||
}
|
||||
return _plusButton;
|
||||
}
|
||||
|
||||
@end
|
||||
|
||||
|
||||
@interface KBTopThreeView()
|
||||
@property (nonatomic, strong) KBTopThreeCardView *leftCard;
|
||||
@property (nonatomic, strong) KBTopThreeCardView *centerCard;
|
||||
@property (nonatomic, strong) KBTopThreeCardView *rightCard;
|
||||
@end
|
||||
|
||||
@implementation KBTopThreeView
|
||||
|
||||
- (instancetype)initWithFrame:(CGRect)frame {
|
||||
if (self = [super initWithFrame:frame]) {
|
||||
self.backgroundColor = [UIColor colorWithWhite:0.98 alpha:1];
|
||||
[self setupUI];
|
||||
}
|
||||
return self;
|
||||
}
|
||||
|
||||
- (void)setupUI {
|
||||
[self addSubview:self.leftCard];
|
||||
[self addSubview:self.centerCard];
|
||||
[self addSubview:self.rightCard];
|
||||
|
||||
// 横向均分布局
|
||||
[self.centerCard mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||
make.centerX.equalTo(self);
|
||||
make.top.equalTo(self).offset(8);
|
||||
make.width.equalTo(self.mas_width).multipliedBy(1.0/3.0).offset(-12);
|
||||
}];
|
||||
[self.leftCard mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||
make.top.equalTo(self.centerCard);
|
||||
make.right.equalTo(self.centerCard.mas_left).offset(-8);
|
||||
make.width.equalTo(self.centerCard);
|
||||
}];
|
||||
[self.rightCard mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||
make.top.equalTo(self.centerCard);
|
||||
make.left.equalTo(self.centerCard.mas_right).offset(8);
|
||||
make.width.equalTo(self.centerCard);
|
||||
}];
|
||||
|
||||
// 让最右/最左卡片对齐底部，撑起本视图
|
||||
[self.leftCard mas_makeConstraints:^(MASConstraintMaker *make) { make.bottom.equalTo(self).offset(-8); }];
|
||||
[self.rightCard mas_makeConstraints:^(MASConstraintMaker *make) { 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; }
|
||||
|
||||
@end
|
||||
|
||||
Reference in New Issue
Block a user