iOS 7.0 中的水平 CAGradientLayer

Posted 2023-02-23

【中文标题】iOS 7.0 中的水平 CAGradientLayer

【英文标题】：horizontal CAGradientLayer in iOS 7.0

【发布时间】：2013-10-28 10:14:57

【问题描述】：

在我的应用程序中，我使用CAGradientLayer 设置单元格的背景，方式如下：

retValue = [tableView dequeueReusableCellWithIdentifier:@"Cells" forIndexPath:indexPath];
UIView *bgColorView = [[UIView alloc] init];
bgColorView.backgroundColor = [UIColor blueColor];
bgColorView.layer.masksToBounds = YES;
id startColor = (id)[[UIColor colorWithWhite:0.75 alpha:1] CGColor];
id endColor = (id)[[UIColor blueColor] CGColor];
CAGradientLayer* gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = retValue.contentView.bounds;
gradientLayer.colors = @[startColor,startColor,endColor,endColor];
gradientLayer.locations = @[[NSNumber numberWithFloat:0],
    [NSNumber numberWithFloat:0.95],
    [NSNumber numberWithFloat:0.95],
    [NSNumber numberWithFloat:1]];
[gradientLayer setStartPoint:CGPointMake(0,0.5)];
[gradientLayer setEndPoint:CGPointMake(1,0.5)];
[bgColorView.layer addSublayer:gradientLayer];
retValue.selectedBackgroundView = bgColorView;

（这段代码在- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath里面）

它在 ios 6 上可以正常工作，但在 iOS 7 上不行，在新的 iOS 中渐变总是垂直的（忽略 startPoint 和 endPoint）

有人遇到过同样的问题吗？

谢谢，

佩里

【参考方案1】：

这个问题已经相当老了，但我遇到了它，所以其他人也可能会遇到。以下代码将生成在 7.0.3 版本的 iPhone 模拟器上运行的水平渐变

+ (void)drawGradientOverContainer:(UIView *)container

    UIColor *transBgColor = [UIColor colorWithWhite:1.0 alpha:0.0];
    UIColor *black = [UIColor blackColor];
    CAGradientLayer *maskLayer = [CAGradientLayer layer];
    maskLayer.opacity = 0.8;
    maskLayer.colors = [NSArray arrayWithObjects:(id)black.CGColor, 
    (id)transBgColor.CGColor, (id)transBgColor.CGColor, (id)black.CGColor, nil];

    // Hoizontal - commenting these two lines will make the gradient veritcal
    maskLayer.startPoint = CGPointMake(0.0, 0.5);
    maskLayer.endPoint = CGPointMake(1.0, 0.5);

    NSNumber *gradTopStart = [NSNumber numberWithFloat:0.0];
    NSNumber *gradTopEnd = [NSNumber numberWithFloat:0.4];
    NSNumber *gradBottomStart = [NSNumber numberWithFloat:0.6];
    NSNumber *gradBottomEnd = [NSNumber numberWithFloat:1.0];
    maskLayer.locations = @[gradTopStart, gradTopEnd, gradBottomStart, gradBottomEnd];

    maskLayer.bounds = container.bounds;
    maskLayer.anchorPoint = CGPointZero;
    [container.layer addSublayer:maskLayer];

我不确定为什么您的代码不起作用，但是如果我不设置锚点，我会得到奇怪的行为 - 虽然渐变仍然是水平的。也许它与作为单元格背景视图有关 - 您可以尝试将渐变应用到基础表。

【讨论】：

请注意，[UIColor clearColor] 会产生奇怪的灰色细微差别。正如这个答案所做的那样，请改用[UIColor colorWithWhite:1.0 alpha:0.0]。这会给你一个透明的渐变。

【参考方案2】：

在 Swift 4 中，我实现了一个不错的扩展：

extension UIView 

    enum GradientColorDirection 
        case vertical
        case horizontal
    

    func showGradientColors(_ colors: [UIColor], opacity: Float = 1, direction: GradientColorDirection = .vertical) 
        let gradientLayer = CAGradientLayer()
        gradientLayer.opacity = opacity
        gradientLayer.colors = colors.map  $0.cgColor 

        if case .horizontal = direction 
            gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
            gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
        

        gradientLayer.bounds = self.bounds
        gradientLayer.anchorPoint = CGPoint.zero
        self.layer.addSublayer(gradientLayer)
    

【参考方案3】：

现在才发现，3 年后。感谢 Gord 提供的解决方案。这是在 Swift 3.0 中：

func drawGradientOver(container: UIView) 
    let transBgColor = UIColor.clear
    let black = UIColor.black
    let maskLayer = CAGradientLayer()
    maskLayer.opacity = 0.8
    maskLayer.colors = [black.cgColor, transBgColor.cgColor, transBgColor.cgColor, black.cgColor]

    // Hoizontal - commenting these two lines will make the gradient veritcal
    maskLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
    maskLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

    let gradTopStart = NSNumber(value: 0.0)
    let gradTopEnd = NSNumber(value: 0.4)
    let gradBottomStart = NSNumber(value: 0.6)
    let gradBottomEnd = NSNumber(value: 1.0)
    maskLayer.locations = [gradTopStart, gradTopEnd, gradBottomStart, gradBottomEnd]

    maskLayer.bounds = container.bounds
    maskLayer.anchorPoint = CGPoint.zero
    container.layer.addSublayer(maskLayer)