如何在 iOS 中使用 CAGradientLayer 在 UITableViewCell 中设置多个渐变颜色? [英] How to set multiple gradient colour in UITableViewCell using CAGradientLayer in iOS?
本文介绍了如何在 iOS 中使用 CAGradientLayer 在 UITableViewCell 中设置多个渐变颜色?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想设置多个渐变颜色，每一行都有唯一的渐变颜色，如下图所示:
<块引用>我要实现的是第一个图像 &我能够实现的是第二个
<块引用>
我为能够实现的目标而编写的代码是
BackgroundLayer.h+(CAGradientLayer*) CustomHorBlack;
<块引用> BackgroundLayer.m+ (CAGradientLayer*) CustomHorBlack {UIColor *colorOne = [UIColor colorWithRed:(0.0) green:(0.0) blue:(0.0) alpha:0.1];UIColor *colorTwo = [UIColor colorWithRed:(0.0) green:(0.0) blue:(0.0) alpha:0.2];UIColor *colorThree = [UIColor colorWithRed:(0.0) green:(0.0) blue:(0.0) alpha:0.3];UIColor *colorFour = [UIColor colorWithRed:(0.0) green:(0.0) blue:(0.0) alpha:0.4];UIColor *colorFive = [UIColor colorWithRed:(0.0) green:(0.0) blue:(0.0) alpha:0.5];UIColor *colorSix = [UIColor colorWithRed:(0.0) green:(0.0) blue:(0.0) alpha:0.6];NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor,colorThree.CGColor,colorFour.CGColor, colorFive.CGColor,colorSix.CGColor, nil];CAGradientLayer *headerLayer = [CAGradientLayer 层];headerLayer.colors = 颜色；[headerLayer setStartPoint:CGPointMake(0.0, 0.5)];[headerLayer setEndPoint:CGPointMake(1.0, 0.5)];返回头层；}<块引用>
TableCell.m
-(void)awakeFromNib{[[[self contentView] superview] setClipsToBounds:YES];CAGradientLayer *bgLayer = [BackgroundLayer CustomHorBlack];//bgLayer.frame = self.contentView.bounds;bgLayer.frame = CGRectMake(-7, 0, [Util window_width], 72);如果 ([Util isiPhone6]) {bgLayer.frame = CGRectMake(-7, 0, [Util window_width], 84);}else if ([Util isiPhone6PlusDevice]){bgLayer.frame = CGRectMake(-7, 0, [Util window_width], 93);}[self.CatImageView.layer insertSublayer:bgLayer atIndex:0];}<块引用>
我为我想要实现的目标编写的代码是但没有找到我想要的
-(void)awakeFromNib{如果(！checkVariable){变量=0；检查变量=真；}[[[self contentView] superview] setClipsToBounds:YES];CAGradientLayer *bgLayer;//= [BackgroundLayer CustomHorBlack];for(variable = 0; variable <10; variable++) {开关(变量){案例0:bgLayer = [BackgroundLayer CategoryHealthButy];//变量 = 变量 + 1;休息;情况1:bgLayer = [BackgroundLayer CategoryClothing];//变量 = 变量 + 1;休息;案例2:bgLayer = [BackgroundLayer CategoryComputer];//变量 = 变量 + 1;休息;案例3:bgLayer = [BackgroundLayer Categoryeducation];//变量 = 变量 + 1;休息;案例4:bgLayer = [BackgroundLayer CategoryElectronics];//变量 = 变量 + 1;休息;案例5:bgLayer = [BackgroundLayer CategoryEntertainment];变量 = 变量 + 1;休息;案例6:bgLayer = [BackgroundLayer CategoryGroceries];//变量 = 变量 + 1;休息;案例7:bgLayer = [BackgroundLayer CategoryHealthButy];//变量 = 变量 + 1;休息;案例8:bgLayer = [BackgroundLayer CategoryHome];//变量 = 变量 + 1;休息;案例9:bgLayer = [BackgroundLayer CategoryResturant];//变量 = 变量 + 1;休息;案例10:bgLayer = [BackgroundLayer CategoryToys];//变量 = 0;休息;默认:bgLayer = [BackgroundLayer CategoryToys];//变量 = 变量 + 1;休息;}//bgLayer.frame = self.contentView.bounds;bgLayer.frame = CGRectMake(-7, 0, [Util window_width], 72);如果 ([Util isiPhone6]) {bgLayer.frame = CGRectMake(-7, 0, [Util window_width], 84);}else if ([Util isiPhone6PlusDevice]){bgLayer.frame = CGRectMake(-7, 0, [Util window_width], 93);}[self.CatImageView.layer insertSublayer:bgLayer atIndex:variable];变量 = 变量 + 1;}} 解决方案
这个我可以用下面的代码实现
<块引用>TableViewCell.h
@interface TableViewCell : UITableViewCell{UIImageView *imageView;UIView *viewGradient;CAGradientLayer *gradientLayer;}- (void)setImage:(UIImage *)image andColor:(UIColor *)color;@结尾<块引用>
TableViewCell.m
- (void)awakeFromNib {[self.contentView setFrame:CGRectMake(0, 0, 320, 44)];imageView = [[UIImageView alloc] initWithFrame:self.contentView.bounds];[imageView setAutoresizingMask:UIViewAutoresizingFlexibleHeight |UIViewAutoresizingFlexibleWidth ];[self.contentView addSubview:imageView];viewGradient = [[UIView alloc] initWithFrame:self.contentView.bounds];[viewGradient setAutoresizingMask:UIViewAutoresizingFlexibleHeight |UIViewAutoresizingFlexibleWidth ];[self.contentView addSubview:viewGradient];梯度层 = [CAGradientLayer 层];gradientLayer.frame = viewGradient.bounds;[gradientLayer setStartPoint:CGPointMake(0.0, 0.5)];[gradientLayer setEndPoint:CGPointMake(1.0, 0.5)];[viewGradient.layer insertSublayer:gradientLayer atIndex:0];}- (void)setImage:(UIImage *)image andColor:(UIColor *)color{[imageView setImage:image];gradientLayer.colors = [NSArray arrayWithObjects:(id)[[UIColor clearColor] CGColor], (id)[color CGColor], nil];}<块引用>
ViewController.m
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{TableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];开关(indexPath.row){案例0:[cell setImage:[UIImage imageNamed:@"Grass"] andColor:[UIColor whiteColor]];休息;情况1:[cell setImage:[UIImage imageNamed:@"House"] andColor:[UIColor greenColor]];休息;案例2:[cell setImage:[UIImage imageNamed:@"Sky"] andColor:[UIColor redColor]];休息;默认:休息;}返回单元格；}<块引用>
参考截图
I want to set multiple gradient colour and each row would have unique gradient colour as shown image below:
I want to achieve is first image & what I was able to achieve is second
Code I wrote for what I was able to achieve is
BackgroundLayer.h
+(CAGradientLayer*) CustomHorBlack;
BackgroundLayer.m
+ (CAGradientLayer*) CustomHorBlack {
UIColor *colorOne = [UIColor colorWithRed:(0.0) green:(0.0 ) blue:(0.0) alpha:0.1];
UIColor *colorTwo = [UIColor colorWithRed:(0.0) green:(0.0 ) blue:(0.0) alpha:0.2];
UIColor *colorThree = [UIColor colorWithRed:(0.0) green:(0.0 ) blue:(0.0) alpha:0.3];
UIColor *colorFour = [UIColor colorWithRed:(0.0) green:(0.0 ) blue:(0.0) alpha:0.4];
UIColor *colorFive = [UIColor colorWithRed:(0.0) green:(0.0 ) blue:(0.0) alpha:0.5];
UIColor *colorSix = [UIColor colorWithRed:(0.0) green:(0.0 ) blue:(0.0) alpha:0.6];
NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor,colorThree.CGColor,colorFour.CGColor, colorFive.CGColor,colorSix.CGColor, nil];
CAGradientLayer *headerLayer = [CAGradientLayer layer];
headerLayer.colors = colors;
[headerLayer setStartPoint:CGPointMake(0.0, 0.5)];
[headerLayer setEndPoint:CGPointMake(1.0, 0.5)];
return headerLayer;
}
TableCell.m
-(void)awakeFromNib{
[[[self contentView] superview] setClipsToBounds:YES];
CAGradientLayer *bgLayer = [BackgroundLayer CustomHorBlack];
// bgLayer.frame = self.contentView.bounds;
bgLayer.frame = CGRectMake(-7, 0, [Util window_width], 72);
if ([Util isiPhone6]) {
bgLayer.frame = CGRectMake(-7, 0, [Util window_width], 84);
}
else if ([Util isiPhone6PlusDevice]){
bgLayer.frame = CGRectMake(-7, 0, [Util window_width], 93);
}
[self.CatImageView.layer insertSublayer:bgLayer atIndex:0];
}
Code I wrote for what I want to achieve is but doesn't find what I want is
-(void)awakeFromNib{
if (!checkVariable) {
variable=0;
checkVariable=TRUE;
}
[[[self contentView] superview] setClipsToBounds:YES];
CAGradientLayer *bgLayer;
//= [BackgroundLayer CustomHorBlack];
for(variable = 0; variable < 10; variable++) {
switch(variable)
{
case 0:
bgLayer = [BackgroundLayer CategoryHealthButy];
//variable = variable + 1;
break;
case 1:
bgLayer = [BackgroundLayer CategoryClothing];
// variable = variable + 1;
break;
case 2:
bgLayer = [BackgroundLayer CategoryComputer];
// variable = variable + 1;
break;
case 3:
bgLayer = [BackgroundLayer Categoryeducation];
//variable = variable + 1;
break;
case 4:
bgLayer = [BackgroundLayer CategoryElectronics];
// variable = variable + 1;
break;
case 5:
bgLayer = [BackgroundLayer CategoryEntertainment];
variable = variable + 1;
break;
case 6:
bgLayer = [BackgroundLayer CategoryGroceries];
// variable = variable + 1;
break;
case 7:
bgLayer = [BackgroundLayer CategoryHealthButy];
// variable = variable + 1;
break;
case 8:
bgLayer = [BackgroundLayer CategoryHome];
// variable = variable + 1;
break;
case 9:
bgLayer = [BackgroundLayer CategoryResturant];
// variable = variable + 1;
break;
case 10:
bgLayer = [BackgroundLayer CategoryToys];
// variable = 0;
break;
default:
bgLayer = [BackgroundLayer CategoryToys];
// variable = variable + 1;
break;
}
// bgLayer.frame = self.contentView.bounds;
bgLayer.frame = CGRectMake(-7, 0, [Util window_width], 72);
if ([Util isiPhone6]) {
bgLayer.frame = CGRectMake(-7, 0, [Util window_width], 84);
}
else if ([Util isiPhone6PlusDevice]){
bgLayer.frame = CGRectMake(-7, 0, [Util window_width], 93);
}
[self.CatImageView.layer insertSublayer:bgLayer atIndex:variable];
variable = variable + 1;
}
}
解决方案
This I can achieve with below code
TableViewCell.h
@interface TableViewCell : UITableViewCell
{
UIImageView *imageView;
UIView *viewGradient;
CAGradientLayer *gradientLayer;
}
- (void)setImage:(UIImage *)image andColor:(UIColor *)color;
@end
TableViewCell.m
- (void)awakeFromNib {
[self.contentView setFrame:CGRectMake(0, 0, 320, 44)];
imageView = [[UIImageView alloc] initWithFrame:self.contentView.bounds];
[imageView setAutoresizingMask:UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth ];
[self.contentView addSubview:imageView];
viewGradient = [[UIView alloc] initWithFrame:self.contentView.bounds];
[viewGradient setAutoresizingMask:UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth ];
[self.contentView addSubview:viewGradient];
gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = viewGradient.bounds;
[gradientLayer setStartPoint:CGPointMake(0.0, 0.5)];
[gradientLayer setEndPoint:CGPointMake(1.0, 0.5)];
[viewGradient.layer insertSublayer:gradientLayer atIndex:0];
}
- (void)setImage:(UIImage *)image andColor:(UIColor *)color
{
[imageView setImage:image];
gradientLayer.colors = [NSArray arrayWithObjects:(id)[[UIColor clearColor] CGColor], (id)[color CGColor], nil];
}
ViewController.m
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
TableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
switch (indexPath.row)
{
case 0:
[cell setImage:[UIImage imageNamed:@"Grass"] andColor:[UIColor whiteColor]];
break;
case 1:
[cell setImage:[UIImage imageNamed:@"House"] andColor:[UIColor greenColor]];
break;
case 2:
[cell setImage:[UIImage imageNamed:@"Sky"] andColor:[UIColor redColor]];
break;
default:
break;
}
return cell;
}
Refer to screenshot
这篇关于如何在 iOS 中使用 CAGradientLayer 在 UITableViewCell 中设置多个渐变颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
