1
This commit is contained in:
@@ -12,8 +12,6 @@
|
|||||||
@property (nonatomic, strong) UIImageView *cardImageView;
|
@property (nonatomic, strong) UIImageView *cardImageView;
|
||||||
/// 标题
|
/// 标题
|
||||||
@property (nonatomic, strong) UILabel *titleLabel;
|
@property (nonatomic, strong) UILabel *titleLabel;
|
||||||
/// 底部加号按钮
|
|
||||||
@property (nonatomic, strong) UIButton *plusButton;
|
|
||||||
|
|
||||||
/// 渲染
|
/// 渲染
|
||||||
- (void)renderWithTitle:(NSString *)title rank:(NSInteger)rank;
|
- (void)renderWithTitle:(NSString *)title rank:(NSInteger)rank;
|
||||||
@@ -34,8 +32,6 @@
|
|||||||
// 头像圆圈
|
// 头像圆圈
|
||||||
[self addSubview:self.avatarCircleView];
|
[self addSubview:self.avatarCircleView];
|
||||||
[self.cardImageView addSubview:self.titleLabel];
|
[self.cardImageView addSubview:self.titleLabel];
|
||||||
// 加号按钮
|
|
||||||
[self addSubview:self.plusButton];
|
|
||||||
|
|
||||||
// 布局
|
// 布局
|
||||||
[self.avatarCircleView mas_makeConstraints:^(MASConstraintMaker *make) {
|
[self.avatarCircleView mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||||
@@ -47,7 +43,7 @@
|
|||||||
[self.cardImageView mas_makeConstraints:^(MASConstraintMaker *make) {
|
[self.cardImageView mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||||
make.top.equalTo(self.avatarCircleView.mas_bottom).offset(-34); // 顶部悬浮重叠
|
make.top.equalTo(self.avatarCircleView.mas_bottom).offset(-34); // 顶部悬浮重叠
|
||||||
make.left.right.equalTo(self);
|
make.left.right.equalTo(self);
|
||||||
make.height.mas_equalTo(148);
|
make.height.mas_equalTo(KBFit(148));
|
||||||
}];
|
}];
|
||||||
|
|
||||||
|
|
||||||
@@ -57,13 +53,6 @@
|
|||||||
make.top.equalTo(self.cardImageView).offset(84);
|
make.top.equalTo(self.cardImageView).offset(84);
|
||||||
}];
|
}];
|
||||||
|
|
||||||
[self.plusButton mas_makeConstraints:^(MASConstraintMaker *make) {
|
|
||||||
make.top.equalTo(self.cardImageView.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 {
|
- (void)renderWithTitle:(NSString *)title rank:(NSInteger)rank {
|
||||||
@@ -91,7 +80,7 @@
|
|||||||
} break; // 橙
|
} break; // 橙
|
||||||
}
|
}
|
||||||
self.cardImageView.image = image;
|
self.cardImageView.image = image;
|
||||||
self.plusButton.backgroundColor = [theme colorWithAlphaComponent:0.3];
|
// 加号按钮移至 KBTopThreeView,由其统一控制样式与布局
|
||||||
|
|
||||||
// 圆圈描边
|
// 圆圈描边
|
||||||
self.avatarCircleView.layer.borderColor = [UIColor colorWithRed:0.83 green:0.95 blue:0.27 alpha:1.0].CGColor;
|
self.avatarCircleView.layer.borderColor = [UIColor colorWithRed:0.83 green:0.95 blue:0.27 alpha:1.0].CGColor;
|
||||||
@@ -129,17 +118,7 @@
|
|||||||
return _titleLabel;
|
return _titleLabel;
|
||||||
}
|
}
|
||||||
|
|
||||||
- (UIButton *)plusButton {
|
// 此类不再持有 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
|
@end
|
||||||
|
|
||||||
@@ -148,6 +127,8 @@
|
|||||||
@property (nonatomic, strong) KBTopThreeCardView *leftCard;
|
@property (nonatomic, strong) KBTopThreeCardView *leftCard;
|
||||||
@property (nonatomic, strong) KBTopThreeCardView *centerCard;
|
@property (nonatomic, strong) KBTopThreeCardView *centerCard;
|
||||||
@property (nonatomic, strong) KBTopThreeCardView *rightCard;
|
@property (nonatomic, strong) KBTopThreeCardView *rightCard;
|
||||||
|
/// 统一的底部加号按钮(移出卡片,放到 KBTopThreeView)
|
||||||
|
@property (nonatomic, strong) UIButton *plusButton;
|
||||||
@end
|
@end
|
||||||
|
|
||||||
@implementation KBTopThreeView
|
@implementation KBTopThreeView
|
||||||
@@ -164,27 +145,39 @@
|
|||||||
[self addSubview:self.leftCard];
|
[self addSubview:self.leftCard];
|
||||||
[self addSubview:self.centerCard];
|
[self addSubview:self.centerCard];
|
||||||
[self addSubview:self.rightCard];
|
[self addSubview:self.rightCard];
|
||||||
|
[self addSubview:self.plusButton];
|
||||||
|
|
||||||
// 横向均分布局
|
// 横向均分布局
|
||||||
[self.centerCard mas_makeConstraints:^(MASConstraintMaker *make) {
|
[self.centerCard mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||||
make.centerX.equalTo(self);
|
make.centerX.equalTo(self);
|
||||||
make.top.equalTo(self).offset(8);
|
make.top.equalTo(self).offset(8);
|
||||||
make.width.equalTo(self.mas_width).multipliedBy(1.0/3.0).offset(-12);
|
make.width.mas_equalTo(KBFit(96));
|
||||||
|
make.height.mas_equalTo(KBFit(180));
|
||||||
}];
|
}];
|
||||||
|
// 第二、三名比第一名矮一点:顶部向下偏移
|
||||||
|
CGFloat sideTopDelta = 12.0; // 侧边两张比中间低 12pt(可按设计调整)
|
||||||
[self.leftCard mas_makeConstraints:^(MASConstraintMaker *make) {
|
[self.leftCard mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||||
make.top.equalTo(self.centerCard);
|
make.top.equalTo(self.centerCard).offset(sideTopDelta);
|
||||||
make.right.equalTo(self.centerCard.mas_left).offset(-8);
|
make.right.equalTo(self.centerCard.mas_left).offset(-8);
|
||||||
make.width.equalTo(self.centerCard);
|
make.width.equalTo(self.centerCard);
|
||||||
|
// 与中间卡片底部对齐,通过高度差体现“更矮”
|
||||||
|
make.height.equalTo(self.centerCard);
|
||||||
}];
|
}];
|
||||||
[self.rightCard mas_makeConstraints:^(MASConstraintMaker *make) {
|
[self.rightCard mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||||
make.top.equalTo(self.centerCard);
|
make.top.equalTo(self.centerCard).offset(sideTopDelta);
|
||||||
make.left.equalTo(self.centerCard.mas_right).offset(8);
|
make.left.equalTo(self.centerCard.mas_right).offset(8);
|
||||||
make.width.equalTo(self.centerCard);
|
make.width.equalTo(self.centerCard);
|
||||||
|
make.height.equalTo(self.centerCard);
|
||||||
}];
|
}];
|
||||||
|
|
||||||
// 让最右/最左卡片对齐底部,撑起本视图
|
// 用 plusButton 来“撑起”本视图,且底部对齐
|
||||||
[self.leftCard mas_makeConstraints:^(MASConstraintMaker *make) { make.bottom.equalTo(self).offset(-8); }];
|
[self.plusButton mas_makeConstraints:^(MASConstraintMaker *make) {
|
||||||
[self.rightCard mas_makeConstraints:^(MASConstraintMaker *make) { make.bottom.equalTo(self).offset(-8); }];
|
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 {
|
- (void)configWithItems:(NSArray<NSDictionary *> *)items {
|
||||||
@@ -207,5 +200,18 @@
|
|||||||
- (KBTopThreeCardView *)centerCard { if (!_centerCard) _centerCard = [KBTopThreeCardView new]; return _centerCard; }
|
- (KBTopThreeCardView *)centerCard { if (!_centerCard) _centerCard = [KBTopThreeCardView new]; return _centerCard; }
|
||||||
- (KBTopThreeCardView *)rightCard { if (!_rightCard) _rightCard = [KBTopThreeCardView new]; return _rightCard; }
|
- (KBTopThreeCardView *)rightCard { if (!_rightCard) _rightCard = [KBTopThreeCardView new]; return _rightCard; }
|
||||||
|
|
||||||
@end
|
- (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
|
||||||
|
|||||||
Reference in New Issue
Block a user