创建基于渐变的 UICollectionViewCell 背景颜色
Posted
技术标签:
【中文标题】创建基于渐变的 UICollectionViewCell 背景颜色【英文标题】:Create gradient-based UICollectionViewCell background colour 【发布时间】:2016-12-05 09:38:29 【问题描述】:我想创建自定义栏来显示一些进度,它必须看起来像这样:
因此,您可以看到每个条形图都有自己的渐变背景。我想为此使用UICollectionView
。但问题是为每个单独的单元格创建渐变背景。那么是否有可能以某种方式为整个UICollectionView
创建一个基本渐变,然后对其进行遮罩,使其在UICollectionViewCell
内部可见?
【问题讨论】:
这对于使用 UICollectionView 来创建一个简单的组件来说太重了。我建议您将 UIView 子类化并改为使用 CoreGraphics 进行绘制。 但我需要以某种方式更新此栏,等待进度百分比。所以最后一个显示当前进度(例如电池容量)。最重要的是 - 我无法完全理解从哪里开始使用 CoreGraphics ) 您可以使用渐变层作为背景,并将其遮罩为矩形框,如上图所示 Shankar BS 方式是最简单的。这样做。 ShankarBS 能否请您提供一些示例代码,我不太明白您的意思? 【参考方案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)
【讨论】:
以上是关于创建基于渐变的 UICollectionViewCell 背景颜色的主要内容,如果未能解决你的问题,请参考以下文章