渐变边框 和 渐变文字

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容