創建基於梯度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) 

}