NS_ASSUME_NONNULL_BEGIN
@interface PROpenVipHeadTagView : UIView
@end
@interface PRGradientLabel : UILabel
/// 设置渐变文字颜色
/// @param colors渐变颜色数组(例如:@[[UIColor redColor], [UIColor blueColor]])
- (void)setGradientColors:(NSArray *)colors;
@end
NS_ASSUME_NONNULL_END
//渐变边框
@interface PROpenVipHeadTagView()
@property (nonatomic, strong) UILabel *preLab;
@property (nonatomic, strong) PRGradientLabel *gradientLabel;
@end
@implementation PROpenVipHeadTagView
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
[self initUI];
}
return self;
}
- (void)initUI {
__weak typeof(self) wSelf = self;
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.05 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[wSelf showEffectCss];
[wSelf setupGradientBorder];
[wSelf setCornerRadius:self.height/2];
[wSelf showText];
});
}
- (void)showEffectCss {
if (@available(iOS 24.0,*)) {
UIGlassEffect *eView = [UIGlassEffect effectWithStyle:UIGlassEffectStyleClear];
UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:eView];
[self addSubview:effectView];
effectView.backgroundColor = [[UIColor colrWithHexStr:@"#111217"] colorWithAlphaComponent:0.5];
[effectView setCornerRadius:self.height/2];
[effectView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self);
}];
} else {
UIBlurEffect *eView = [UIBlurEffect effectWithStyle:UIBlurEffectStyleRegular];
UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:eView];
[self addSubview:effectView];
effectView.backgroundColor = [[UIColor colrWithHexStr:@"#111217"] colorWithAlphaComponent:0.5];
[effectView setCornerRadius:self.height/2];
[effectView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self);
}];
}
}
- (void)showText {
// 1. 创建渐变 label(子类方式)
self.gradientLabel = [[PRGradientLabel alloc] initWithFrame:CGRectMake(0, 0, self.width * 2, self.height * 2)];
self.gradientLabel.text = NSLocalizedString(@"Premium",nil);
self.gradientLabel.textColor = [UIColor clearColor];
self.gradientLabel.font = [UIFont boldSystemFontOfSize:16 * kSizeWidth * 2];
// 设置渐变(从红色到蓝色,水平方向)
[self addSubview:self.gradientLabel];
[self.gradientLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(self);
}];
CGAffineTransform scaleTransform = CGAffineTransformMakeScale(0.5, 0.5);
__weak typeof(self) wSelf = self;
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.05 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[wSelf.gradientLabel setGradientColors:@[[UIColor colrWithHexStr:@"#AABDDB"], [UIColor colrWithHexStr:@"#E5DFF9"],[UIColor colrWithHexStr:@"#8DB6FF"],[UIColor colrWithHexStr:@"#8DB6FF"],[UIColor colrWithHexStr:@"#8DB6FF"]]];
wSelf.gradientLabel.transform = scaleTransform;
});
}
- (void)setupGradientBorder {
// 1. 配置渐变层
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = self.bounds;
// 渐变颜色(示例:从红色到蓝色)
gradientLayer.colors = @[
(id)[UIColor colrWithHexStr:@"#AABDDB"].CGColor,
(id)[UIColor colrWithHexStr:@"#D2CFE3"].CGColor,
(id)[UIColor colrWithHexStr:@"#7188B4"].CGColor,
(id)[UIColor colrWithHexStr:@"#7188B4"].CGColor,
(id)[UIColor colrWithHexStr:@"#7188B4"].CGColor
];
// 渐变方向(从左到右,也可改为从上到下等)
gradientLayer.startPoint = CGPointMake(0, 0.5);
gradientLayer.endPoint = CGPointMake(1, 0.5);
// 2. 配置描边路径(CAShapeLayer)
CAShapeLayer *borderLayer = [CAShapeLayer layer];
borderLayer.frame = self.bounds;
// 描边路径为视图的边框(带圆角,可自定义)
CGFloat cornerRadius = self.height/2; // 圆角半径
CGFloat borderWidth = 3 * kSizeWidth; // 描边宽度
borderLayer.path = [UIBezierPath bezierPathWithRoundedRect:borderLayer.bounds
cornerRadius:cornerRadius].CGPath;
// 仅显示描边,不填充
borderLayer.fillColor = [UIColor clearColor].CGColor;
borderLayer.strokeColor = [UIColor blackColor].CGColor; // 颜色不影响,蒙版只关心路径
borderLayer.lineWidth = borderWidth;
// 3. 关键:用描边路径作为渐变层的蒙版
gradientLayer.mask = borderLayer;
// 4. 添加到视图图层
[self.layer addSublayer:gradientLayer];
// 5. 可选:如果视图大小会变,需要更新图层
self.layer.masksToBounds = YES; // 避免描边超出视图范围
}
// 视图大小改变时,更新渐变层和路径
- (void)layoutSubviews {
[super layoutSubviews];
// 找到渐变层并更新frame
for (CALayer *layer in self.layer.sublayers) {
if ([layer isKindOfClass:[CAGradientLayer class]]) {
layer.frame = self.bounds;
// 更新蒙版路径(描边路径)
CAShapeLayer *borderLayer = (CAShapeLayer *)layer.mask;
if (borderLayer) {
borderLayer.frame = self.bounds;
borderLayer.path = [UIBezierPath bezierPathWithRoundedRect:borderLayer.bounds
cornerRadius:self.height/2].CGPath;
}
break;
}
}
}
@end
//渐变文字
@interface PRGradientLabel()
@property (nonatomic, strong) NSArray<UIColor *> * colors;
@end
@implementation PRGradientLabel
- (void)setGradientColors:(NSArray<UIColor *> *)colors {
self.colors = colors;
// 1. 转换颜色为 CGColor
NSMutableArray *cgColors = [NSMutableArray array];
for (UIColor *color in self.colors) {
[cgColors addObject:(__bridge id)color.CGColor];
}
// 2. 创建渐变层
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.colors = cgColors;
gradientLayer.startPoint = CGPointMake(0, 0.5);
gradientLayer.endPoint = CGPointMake(1, 0.5);
gradientLayer.frame = self.bounds; // 渐变层大小与 label 一致
// 3. 创建文字蒙版(关键:用 label 的文字作为蒙版裁剪渐变层)
self.backgroundColor = [UIColor clearColor]; // 确保背景透明
// gradientLayer.mask = self.layer; // 用 label 的图层(文字)作为蒙版
// 4. 将渐变层添加到 label 底层
[self.layer addSublayer:gradientLayer];
// 创建文字属性
NSDictionary *attributes = @{
NSFontAttributeName: self.font, // 字体
NSForegroundColorAttributeName: [UIColor colrWithHexStr:@"#000000"]// 文字颜色
};
// 创建文字遮罩
CATextLayer *textMask = [[CATextLayer alloc] init];
textMask.frame = self.bounds;
textMask.string = [[NSAttributedString alloc] initWithString:self.text attributes:attributes];
textMask.alignmentMode = kCAAlignmentCenter;
// 将文字遮罩设置为渐变图层的遮罩
gradientLayer.mask = textMask;
}
- (void)drawRect:(CGRect)rect {
}
@end