创建基于渐变的 UICollectionViewCell 背景色

Question

我想创建自定义栏来显示一些进度，它必须看起来像这样：

因此，如您所见，每个条形都有自己的渐变背景。我想为此使用 UICollectionView。但问题是为每个单独的单元格创建渐变背景。那么是否有可能以某种方式为整个 UICollectionView 创建一个基本渐变，然后屏蔽它，使其在 UICollectionViewCell 内可见？

Answer 1

好吧，这里是例子，背景是渐变层，不同的颜色被铺开，上面你可以创建一个遮罩层只出现在矩形上，这给人一种不同矩形层具有不同渐变的错觉，你可以玩渐变来获得你想要的效果，

首先你对 UIView 进行子类化，或者你可以直接创建，最好你可以像我在示例中所做的那样创建一个子类

obj-c

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if(self)
    {
        [self createGreadient];
    }
    return self;
}

//this create a grenadine with the rectangular mask layer
- (void)createGreadient
{
    UIColor *theColor = [UIColor redColor];//[[UIColor alloc] initWithRed:146.0/255.0 green:146.0/255.0 blue:146.0/255.0 alpha:1];
    CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init];
    gradientLayer.frame = self.bounds;

    //u can add your own colours to get your requirement
    gradientLayer.colors = [NSArray arrayWithObjects:
                            (id)[theColor CGColor],
                            (id)[[theColor colorWithAlphaComponent:0.7f] CGColor],
                            (id)[[theColor colorWithAlphaComponent:0.4f] CGColor],
                            (id)[[theColor colorWithAlphaComponent:0.3f] CGColor],
                            (id)[[theColor colorWithAlphaComponent:0.2f] CGColor],
                            (id)[[theColor colorWithAlphaComponent:0.1f] CGColor],
                            (id)[[UIColor clearColor] CGColor],nil];
    [self.layer addSublayer:gradientLayer];

    CAShapeLayer *layerMask = [[CAShapeLayer alloc] init];
    layerMask.frame = self.bounds;
    UIBezierPath *rectangularMaskPath = [self getRectangularMaskPathForCount:5];
    layerMask.path = rectangularMaskPath.CGPath;

    gradientLayer.mask = layerMask;

}

 //this creates rectangular path, u can adjust the rectangular and u can 
//pass different number of count as the progress proceeds 
- (UIBezierPath *)getRectangularMaskPathForCount:(NSInteger)rectCount
{
    UIBezierPath *path = [[UIBezierPath alloc] init];
    int i = 0;
    for(;i <= rectCount; i++)
    {
        UIBezierPath *aPath;
        CGRect aRect = CGRectMake(20+ (i * 20), 20, 10, 100); //set the rectangular position to your requirement
        aPath = [UIBezierPath bezierPathWithRect:aRect]; 
        [path appendPath:aPath];
    }
    return path;
}

swift版本 子类化 UIView 并通过下面的代码，

 override init (frame : CGRect) {
    super.init(frame : frame)
    createGreadient()
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}



func createGreadient()
{
    let  color:UIColor = UIColor.red
    let greadetLayer = CAGradientLayer.init()

    greadetLayer.frame = self.bounds
    greadetLayer.colors = [color.withAlphaComponent(0.8).cgColor,color.withAlphaComponent(0.7),color.withAlphaComponent(0.4).cgColor,color.withAlphaComponent(0.3).cgColor,color.withAlphaComponent(0.2),color.withAlphaComponent(0.1).cgColor]

    self.layer .addSublayer(greadetLayer)
    let rectangularMaskPath  = self.creatrRectangularPathWithCount(countRect: 5)
    let maskLayer:CAShapeLayer = CAShapeLayer()
    maskLayer.frame = self.bounds
    maskLayer.path = rectangularMaskPath.cgPath
    greadetLayer.mask = maskLayer

}


func creatrRectangularPathWithCount(countRect:NSInteger) -> UIBezierPath {
    let path : UIBezierPath = UIBezierPath()
    for i in 0..<countRect {
       let aPath = UIBezierPath.init(rect: CGRect(x: 20 + (i * 20), y:20, width: 10, height: 100))
        path.append(aPath)
    }
    return path
}

您可以像下面这样使用上面的视图，在 ViewController

 override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    let customView:CustomView = CustomView(frame: CGRect(x: 20, y: 20, width: 300, height: 300))
    self.view.addSubview(customView)

}

创建基于渐变的 UICollectionViewCell 背景色

Create gradient-based UICollectionViewCell background colour

calayer

ios

cagradientlayer

uicollectionview

uicollectionviewcell