• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

如何使用CAGradientLayer在iOS和macOS上绘制渐变

iOS rin, seun 1年前 (2020-06-15) 669次浏览 0个评论

iOS和macOS使用CAGradientLayer类在QuartzCore中内置了对渐变的支持,无需自定义绘图-rectdraw:

如何使用CAGradientLayer在iOS和macOS上绘制渐变

线性(轴向)渐变

要创建从一种颜色到另一种(或几种)颜色的线性渐变,type必须将图层的颜色设置为kCAGradientLayerAxial.axial)。颜色必须是CGColor的颜色,而不是UIColors。如果您忘记了这一点,则将完全忽略颜色对象。默认情况下,起点是(X:0.5, Y:0.0)水平方向的一半,垂直方向是顶部,终点是视图的底部中间。

在示例图像左侧创建示例渐变的代码为:

// Objective C

// Set type (this is also the default value)
gradientLayer.type = kCAGradientLayerAxial;
// Set the colors (these need to be CGColor's, not UIColor's)
gradientLayer.colors =
@[
    (id)[UIColor colorWithRed: 48.0/255.0 green: 35.0/255.0 blue: 174.0/255.0 alpha: 1.0].CGColor,
    (id)[UIColor colorWithRed: 200.0/255.0 green: 109.0/255.0 blue: 215.0/255.0 alpha: 1.0].CGColor
];
// Set the start and end points (x:0 left - x:1 right) (y:0 top - y:1 bottom)
gradientLayer.startPoint = CGPointZero;
gradientLayer.endPoint = CGPointMake(1, 1);
// Swift

// Set type (this is also the default value)
gradientLayer.type = CAGradientLayerType.axial
// Set the colors (these need to be CGColor's, not UIColor's)
gradientLayer.colors =
[
    UIColor(red: 48.0/255.0, green: 35.0/255.0, blue: 174.0/255.0, alpha: 1.0).cgColor,
    UIColor(red: 200.0/255.0, green: 109.0/255.0, blue: 215.0/255.0, alpha: 1.0).cgColor
]
// Set the start and end points (x:0 left - x:1 right) (y:0 top - y:1 bottom)
gradientLayer.startPoint = CGPoint.zero
gradientLayer.endPoint = CGPoint(x: 1, y: 1)

径向渐变

要从一个点创建一个径向渐变,type必须将图层的渐变设置为kCAGradientLayerRadial.radial)。
起点和终点很重要,因为它们endPointxy定义第二种颜色的终点。

startPoint中心为a 时,endPoint x从水平中心到视图的外边缘将水平绘制0或1。0.25或0.75的
an endPoint Y只会绘制渐变高度为视图高度的一半。

在中间示例图像中创建示例渐变的代码为:

// Objective C

// Set type to radial
gradientLayer.type = kCAGradientLayerRadial;
// Set the colors
gradientLayer.colors =
@[
    (id)[UIColor colorWithRed: 0.0/255.0 green: 101.0/255.0 blue: 255.0/255.0 alpha: 1.0].CGColor,
    (id)[UIColor colorWithRed: 0.0/255.0 green: 40.0/255.0 blue: 101.0/255.0 alpha: 1.0].CGColor
];
// Start point of first color in the middle of the view
gradientLayer.startPoint = CGPointMake(0.5, 0.5);
// End points to the edges of the view
gradientLayer.endPoint = CGPointMake(0, 1);
// Swift

// Set type to radial
gradientLayer.type = CAGradientLayerType.radial
// Set the colors
gradientLayer.colors =
[
    UIColor(red: 0.0/255.0, green: 101.0/255.0, blue: 255.0/255.0, alpha: 1.0).cgColor,
    UIColor(red: 0.0/255.0, green: 40.0/255.0, blue: 101.0/255.0, alpha: 1.0).cgColor
]
// Start point of first color in the middle of the view
gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.5)
// End points to the edges of the view
gradientLayer.endPoint = CGPoint(x: 0, y: 1)

Angluar(Conic)渐变

线性和径向渐变永远是iOS SDK(分别为iOS 3.0和3.2和macOS 10.6)角度的一部分,或者称为CoreAnimation称为圆锥曲线的圆锥形,而渐变仅在iOS 12.0(macOS 10.14)中添加。

startPoint是所述梯度绘制围绕的点。
endPoint是起点/终点线瞄准的点。

在示例图像右侧创建示例渐变的代码为:

// Objective C
gradientLayer.type = kCAGradientLayerConic;
gradientLayer.colors =
@[
    (id)[UIColor colorWithRed: 245.0/255.0 green: 81.0/255.0 blue: 95.0/255.0 alpha: 1.0].CGColor,
    (id)[UIColor colorWithRed: 159.0/255.0 green: 4.0/255.0 blue: 27.0/255.0 alpha: 1.0].CGColor
];
gradientLayer.startPoint = CGPointMake(0.5, 0.5);
gradientLayer.endPoint = CGPointMake(1, 0.5);
// Swift
gradientLayer.type = CAGradientLayerType.conic
gradientLayer.colors =
[
    UIColor(red: 245.0/255.0, green: 81.0/255.0, blue: 95.0/255.0, alpha: 1.0).cgColor,
    UIColor(red: 159.0/255.0, green: 4.0/255.0, blue: 27.0/255.0, alpha: 1.0).cgColor
]
gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)

UIView包装器

由于在UIKit中使用隐式动画和单独的布局来处理图层有些烦人,因此我几乎总是通过将其包装在自定义UIView子类中来使用它。
实际上,您可以UIView通过覆盖+(Class)layerClass类方法并返回任何CALayer子类来更改a的基础类型。

目标C子类。重新定义layer属性意味着view.layer将愉快地返回正确的layer类,并@dynamic layer;告诉它不要为该减速自动合成任何东西。

// KHGradientView.h
@import UIKit;
@import QuartzCore;

@interface KHGradientView : UIView
@property(nonatomic, readonly, strong) CAGradientLayer *layer;
@end


// KHGradientView.m
#import "KHGradientView.h"

@implementation KHGradientView
@dynamic layer;

+(Class)layerClass{
    return [CAGradientLayer class];
}

@end

斯威夫特子类

import UIKit

class KHGradientView: UIView {
    override open class var layerClass: AnyClass {
       return CAGradientLayer.classForCoder()
    }
    var gradientLayer : CAGradientLayer {
        return self.layer as! CAGradientLayer
    }
}

它极少,但在其余的代码库中使事情变得容易得多。

示例项目

如何使用CAGradientLayer在iOS和macOS上绘制渐变

ObjCSwift中提供了用于生成开头示例图像的示例代码Xcode Project 。

喜欢 (0)

您必须 登录 才能发表评论!