创建基于梯度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; 
} 

迅速版 子类的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) 

}