采用masonry布局时同时设置圆角和渐变颜色

最新推荐文章于 2023-06-20 20:16:22 发布

原创最新推荐文章于 2023-06-20 20:16:22 发布 · 2.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#圆角 #渐变 #masonry

iOS 专栏收录该内容

135 篇文章

订阅专栏

这段代码演示了如何在iOS中创建一个UIView，并通过Mas_makeConstraints设置其布局。接着，利用CAGradientLayer创建了一个从红色到蓝色的渐变背景，并将其添加到视图的图层中。同时，通过CAShapeLayer和UIBezierPath实现了左上和左下角的圆角裁剪。这展示了iOS UI设计和图形渲染的基础技巧。

    UIView *tipContainer = [[UIView alloc] init];
    [self.view addSubview:tipContainer];
    [tipContainer mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(@(0));
        make.right.equalTo(displayImageContainer);
        make.width.equalTo(@(35));
        make.height.equalTo(@(20));
    }];
    [tipContainer layoutIfNeeded];
    
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = tipContainer.bounds;
    [tipContainer.layer insertSublayer:gradientLayer atIndex:0];
    gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1, 1);

    // 圆角 裁掉左上和左下
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:tipContainer.bounds byRoundingCorners:UIRectCornerBottomLeft cornerRadii:CGSizeMake(5, 5)];
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.frame = tipContainer.bounds;
    maskLayer.path = maskPath.CGPath;
    tipContainer.layer.mask = maskLayer;