Files
peko-ios/YuMi/Modules/YMMine/View/Medals/MedalsLevelIndicatorView.m

350 lines
11 KiB
Objective-C

//
// MedalsLevelIndicatorView.m
// YuMi
//
// Created by P on 2025/6/18.
//
#import "MedalsLevelIndicatorView.h"
#import "UIImage+Utils.h"
// 等级指示器视图
@interface LevelItemView : UIView
@property (nonatomic, strong) UILabel *levelLabel;
@property (nonatomic, strong) UIView *dotView; // 圆点视图
@property (nonatomic, strong) NetImageView *imageView; // 图片视图
@property (nonatomic, assign) BOOL isSelected;
@property (nonatomic, assign) NSInteger level;
@property (nonatomic, assign) BOOL hasImage;
@property (nonatomic, strong) UIImage *originalImage; // 保存原始彩色图片
@property (nonatomic, strong) UIImage *grayImage; // 保存灰度图片
- (instancetype)initWithLevel:(NSInteger)level;
- (void)setSelected:(BOOL)selected animated:(BOOL)animated;
- (void)setImageUrl:(NSString *)imageUrl;
@end
@implementation LevelItemView
- (instancetype)initWithLevel:(NSInteger)level {
self = [super init];
if (self) {
_level = level;
_isSelected = NO;
_hasImage = NO;
// 创建圆点视图
_dotView = [[UIView alloc] init];
_dotView.backgroundColor = UIColorFromRGB(0x8B54E8);
_dotView.layer.cornerRadius = 3; // 圆点半径
_dotView.clipsToBounds = YES;
[self addSubview:_dotView];
// 创建等级标签
self.levelLabel = [UILabel labelInitWithText:[NSString stringWithFormat:@"LV%ld", (long)level]
font:kFontMedium(10)
textColor:UIColorFromRGB(0x8B54E8)];
self.levelLabel.textAlignment = NSTextAlignmentCenter;
[self addSubview:self.levelLabel];
// 布局
[_dotView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.mas_equalTo(self);
make.top.mas_equalTo(self);
make.width.height.mas_equalTo(6); // 圆点大小
}];
[self.levelLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.mas_equalTo(self);
make.top.mas_equalTo(_dotView.mas_bottom).offset(4); // 圆点和文字的间距
make.leading.trailing.bottom.mas_equalTo(self);
}];
}
return self;
}
- (void)setImageUrl:(NSString *)imageUrl {
if (!_imageView) {
// 创建图片视图
_imageView = [[NetImageView alloc] init];
_imageView.contentMode = UIViewContentModeScaleAspectFill;
_imageView.layer.cornerRadius = 15;
_imageView.clipsToBounds = YES;
[self addSubview:_imageView];
[_imageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.mas_equalTo(self);
make.bottom.mas_equalTo(_dotView.mas_top).offset(-4);
make.width.height.mas_equalTo(30);
}];
// 调整圆点位置
[_dotView mas_remakeConstraints:^(MASConstraintMaker *make) {
make.centerX.mas_equalTo(self);
make.top.mas_equalTo(_imageView.mas_bottom).offset(4);
make.width.height.mas_equalTo(6);
}];
}
_hasImage = YES;
// 调试时使用测试URL
#ifdef DEBUG
NSString *testUrl = @"https://img.toto.im/mw600/66b3de17ly1i2jopju47bj20xc1e0dx4.jpg.webp";
imageUrl = testUrl;
NSLog(@"调试模式: 使用测试图片URL: %@", testUrl);
#endif
// 加载图片并处理灰度效果
@kWeakify(self);
[_imageView loadImageWithUrl:imageUrl completion:^(UIImage * _Nullable image, NSURL * _Nonnull url) {
@kStrongify(self);
if (image) {
self.originalImage = image;
self.grayImage = [image grayscaleImage];
[self updateImageEffect];
}
}];
}
// 更新图片效果
- (void)updateImageEffect {
if (!_hasImage || !_imageView) {
return;
}
if (_isSelected && _originalImage) {
// 选中状态:显示彩色图片
_imageView.image = _originalImage;
} else if (!_isSelected && _grayImage) {
// 非选中状态:显示灰度图片
_imageView.image = _grayImage;
}
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
if (_isSelected == selected) {
return;
}
_isSelected = selected;
void (^updateBlock)(void) = ^{
UIColor *color = selected ? [UIColor whiteColor] : UIColorFromRGB(0x8B54E8);
self.levelLabel.textColor = color;
self.dotView.backgroundColor = color;
// 如果有图片,更新图片效果
if (self.hasImage) {
[self updateImageEffect];
}
};
if (animated) {
[UIView animateWithDuration:0.2 animations:updateBlock];
} else {
updateBlock();
}
}
@end
// 等级指示器容器视图
@interface MedalsLevelIndicatorView()
@property (nonatomic, strong) NSMutableArray<LevelItemView *> *levelItems;
@property (nonatomic, strong) NSMutableArray<UIView *> *connectionLines; // 连接线数组
@property (nonatomic, assign) NSInteger maxLevel;
@property (nonatomic, assign) NSInteger selectedLevel;
@end
@implementation MedalsLevelIndicatorView
- (instancetype)init {
self = [super init];
if (self) {
_levelItems = [NSMutableArray array];
_connectionLines = [NSMutableArray array];
_selectedLevel = 1;
_indicatorType = MedalsLevelIndicatorTypeNormal;
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap:)];
[self addGestureRecognizer:tapGesture];
}
return self;
}
- (void)setupWithMaxLevel:(NSInteger)maxLevel {
if (maxLevel < 0) {
maxLevel = 1;
}
if (_maxLevel == maxLevel && _levelItems.count == maxLevel) {
return;
}
_maxLevel = maxLevel;
// 清除现有的等级指示器和连接线
for (UIView *view in _levelItems) {
[view removeFromSuperview];
}
[_levelItems removeAllObjects];
for (UIView *line in _connectionLines) {
[line removeFromSuperview];
}
[_connectionLines removeAllObjects];
// 创建新的等级指示器
CGFloat itemWidth = 25.0; // 每个等级指示器的宽度
CGFloat spacing = 15.0; // 等级指示器之间的间距
CGFloat totalWidth = itemWidth * maxLevel + spacing * (maxLevel - 1);
CGFloat startX = (self.bounds.size.width - totalWidth) / 2;
for (NSInteger i = 1; i <= maxLevel; i++) {
// 创建等级指示器
LevelItemView *levelItem = [[LevelItemView alloc] initWithLevel:i];
[self addSubview:levelItem];
[_levelItems addObject:levelItem];
// 设置位置
CGFloat x = startX + (i - 1) * (itemWidth + spacing);
[levelItem mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(itemWidth);
make.height.mas_equalTo(self);
make.centerY.mas_equalTo(self);
make.leading.mas_equalTo(self).offset(x);
}];
// 如果不是第一个,添加连接线
if (i > 1) {
UIView *line = [[UIView alloc] init];
line.backgroundColor = UIColorFromRGB(0x8B54E8); // 默认非选中颜色
[self insertSubview:line atIndex:0];
[_connectionLines addObject:line];
// 连接线位置:从上一个圆点到当前圆点
[line mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(1); // 线的高度
make.centerY.mas_equalTo(levelItem.dotView);
make.leading.mas_equalTo(_levelItems[i-2].dotView.mas_centerX);
make.trailing.mas_equalTo(levelItem.dotView.mas_centerX);
}];
}
}
// 默认选中LV1
[self setSelectedLevel:1 animated:NO];
// 根据类型设置图片可见性
[self updateImageVisibility];
}
- (void)layoutSubviews {
[super layoutSubviews];
if (_maxLevel > 0 && _levelItems.count > 0) {
// 重新计算布局,确保居中显示
CGFloat itemWidth = 25.0;
CGFloat spacing = 15.0;
CGFloat totalWidth = itemWidth * _maxLevel + spacing * (_maxLevel - 1);
CGFloat startX = (self.bounds.size.width - totalWidth) / 2;
for (NSInteger i = 0; i < _levelItems.count; i++) {
LevelItemView *item = _levelItems[i];
CGFloat x = startX + i * (itemWidth + spacing);
[item mas_updateConstraints:^(MASConstraintMaker *make) {
make.leading.mas_equalTo(self).offset(x);
}];
}
}
}
- (void)setSelectedLevel:(NSInteger)level animated:(BOOL)animated {
if (level < 1 || level > _maxLevel) {
return;
}
_selectedLevel = level;
// 更新等级指示器状态
for (NSInteger i = 0; i < _levelItems.count; i++) {
LevelItemView *item = _levelItems[i];
[item setSelected:(i + 1) <= level animated:animated];
}
// 更新连接线状态
for (NSInteger i = 0; i < _connectionLines.count; i++) {
UIView *line = _connectionLines[i];
// 连接线的状态取决于它连接的两个等级指示器是否都被选中
// 如果连接线两端的等级指示器都被选中,则连接线也被选中
BOOL isSelected = (i + 2) <= level;
void (^updateBlock)(void) = ^{
line.backgroundColor = isSelected ? [UIColor whiteColor] : UIColorFromRGB(0x8B54E8);
};
if (animated) {
[UIView animateWithDuration:0.2 animations:updateBlock];
} else {
updateBlock();
}
}
}
- (void)setIndicatorType:(MedalsLevelIndicatorType)indicatorType {
_indicatorType = indicatorType;
// 如果已经创建了视图,需要根据类型进行调整
if (_levelItems.count > 0) {
[self updateImageVisibility];
}
}
// 根据指示器类型更新图片可见性
- (void)updateImageVisibility {
for (LevelItemView *item in _levelItems) {
if (item.imageView) {
item.imageView.hidden = (_indicatorType == MedalsLevelIndicatorTypeNormal);
}
}
}
- (void)setImageUrl:(NSString *)imageUrl forLevel:(NSInteger)level {
if (level < 1 || level > _maxLevel || level > _levelItems.count) {
return;
}
LevelItemView *item = _levelItems[level - 1];
[item setImageUrl:imageUrl];
// 根据当前类型设置图片可见性
if (item.imageView) {
item.imageView.hidden = (_indicatorType == MedalsLevelIndicatorTypeNormal);
}
}
- (void)handleTap:(UITapGestureRecognizer *)gesture {
CGPoint location = [gesture locationInView:self];
for (NSInteger i = 0; i < _levelItems.count; i++) {
LevelItemView *item = _levelItems[i];
CGPoint itemLocation = [self convertPoint:location toView:item];
if (CGRectContainsPoint(item.bounds, itemLocation)) {
NSInteger level = i + 1;
[self setSelectedLevel:level animated:YES];
if (_levelSelectedBlock) {
_levelSelectedBlock(level);
}
break;
}
}
}
@end