iOS - Layer图层学习

效果图 Gif.gif

AppDelegate.m文件

#import "AppDelegate.h"

#import "NTESMaskLayerViewController.h"//遮罩视图
#import "NTESGradientLayerViewController.h"//渐变视图
#import "NTESGradientLayerMaskViewController.h"//图片镜像遮罩
#import "NTESShapeLayerViewController.h"//画线条
#import "NTESShapeLayerMaskViewController.h"//弧形线条遮罩
#import "NTESShapeLayerAnimationViewController.h" //初始界面跳过动画
#import "NTESTestLayer.h"




static NSString *const reuseIdentifier = @"cell";

@interface AppDelegate ()  {
    UITableViewController *_tableVC;
}
@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    _tableVC = [[UITableViewController alloc] initWithStyle:UITableViewStylePlain];
    _tableVC.tableView.delegate = self;
    _tableVC.tableView.dataSource = self;
    _tableVC.edgesForExtendedLayout = UIRectEdgeNone;
    UINavigationController *navVC = [[UINavigationController alloc] initWithRootViewController:_tableVC];
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.window.rootViewController = navVC;
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;
}


#pragma mark - 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 8;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reuseIdentifier];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseIdentifier];
    }
    NSString *title = nil;
    switch (indexPath.row) {
        case 0:
            title = @"Image mask";
            break;
        case 1:
            title = @"CAGradientLayer";
            break;
        case 2:
            title = @"CAGradientLayer - mask";
            break;
        case 3:
            title = @"CAShapeLayer";
            break;
        case 4:
            title = @"CAShapeLayer - mask";
            break;
        case 5:
            title = @"CAShapeLayer - animation";
            break;
        case 6:
            title = @"CATextLayer";
            break;
        case 7:
            title = @"Custom Layer";
            break;
        default:
            break;
    }
    cell.textLabel.text = title;
    return cell;
}


#pragma mark - 
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewController *targetVC = nil;
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    switch (indexPath.row) {
        case 0:
            targetVC = (UITableViewController *)[[NTESMaskLayerViewController alloc] init];
            break;
        case 1:
            targetVC = (UITableViewController *)[[NTESGradientLayerViewController alloc] init];
            break;
        case 2:
            targetVC = (UITableViewController *)[[NTESGradientLayerMaskViewController alloc] init];
            break;
        case 3:
            targetVC = (UITableViewController *)[[NTESShapeLayerViewController alloc] init];
            break;
        case 4:
            targetVC = (UITableViewController *)[[NTESShapeLayerMaskViewController alloc] init];
            break;
        case 5:
            targetVC = (UITableViewController *)[[NTESShapeLayerAnimationViewController alloc] init];
            break;
        case 6:
            targetVC = (UITableViewController *)[[NTESTestLayer alloc] init];
            break;
        case 7:
            targetVC = (UITableViewController *)[[NTESMaskLayerViewController alloc] init];
            break;
        default:
            break;
    }
    if (targetVC) {
        [_tableVC.navigationController pushViewController:targetVC animated:YES];
    } else {
        return NSLog(@"不存在目标控制器-- targetVC ");
    }
    
}


#pragma mark - Other Methods
- (void)applicationWillResignActive:(UIApplication *)application {
    
}
- (void)applicationDidEnterBackground:(UIApplication *)application {
    
}
- (void)applicationWillEnterForeground:(UIApplication *)application {
    
}
- (void)applicationDidBecomeActive:(UIApplication *)application {
    
}
- (void)applicationWillTerminate:(UIApplication *)application {
    
}

@end

NTESMaskLayerViewController.m文件

#import "NTESMaskLayerViewController.h"

@interface NTESMaskLayerViewController ()

@end

@implementation NTESMaskLayerViewController

#pragma mark - init
- (instancetype)init {
    if (self = [super init]) {
        self.navigationItem.title = @"Image Mask Layer";
        self.edgesForExtendedLayout = UIRectEdgeNone;//将原点移动到navigationBar下面
    }
    return self;
}

#pragma mark - laifCycle
- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    [self testImageMask];
}


- (void)testImageMask {
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(50, 50, 200, 250)];
    imageView.image = [UIImage imageNamed:@"chatImage.JPG"];
    imageView.contentMode = UIViewContentModeScaleAspectFill;
    [self.view addSubview:imageView];
    
    //MaskImage:
    UIImageView *maskImageView = [[UIImageView alloc] initWithFrame:imageView.bounds];
    UIImage *maskImage = [UIImage imageNamed:@"[email protected]"];
    //MaskImage 较小需要拉伸它:
    maskImage = [maskImage stretchableImageWithLeftCapWidth:20 topCapHeight:20];
    maskImageView.image = maskImage;
    
    //把黑框遮罩视图的图层赋值给显示图片的图层的遮罩属性:
    imageView.layer.mask = maskImageView.layer;    
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    
}

@end

NTESGradientLayerViewController.m文件

#import "NTESGradientLayerViewController.h"

@interface NTESGradientLayerViewController ()

@end

@implementation NTESGradientLayerViewController

#pragma mark - init
- (instancetype)init {
    if (self = [super init]) {
        self.navigationItem.title = @"Gradient Layer";
        self.edgesForExtendedLayout = UIRectEdgeNone;
    }
    return self;
}


#pragma mark - lifeCycle
- (void)viewDidLoad {
    [super viewDidLoad];
    
    CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init];
    gradientLayer.frame = CGRectMake(100, 100, 150, 150);
    
//    gradientLayer.colors = @[(id)[UIColor yellowColor].CGColor,
//                             (id)[UIColor greenColor].CGColor,
//                             (id)[UIColor blueColor].CGColor];
//    gradientLayer.locations = @[@0.25,
//                                @0.5,
//                                @0.75];
    //渐变分割线(默认等分):
    //渐变开始点:
//    gradientLayer.startPoint = CGPointMake(0, 0);
    //渐变终止点:
//    gradientLayer.endPoint = CGPointMake(1, 0);
    
    gradientLayer.colors = @[(id)[UIColor yellowColor].CGColor,
                             (id)[UIColor greenColor].CGColor];
    gradientLayer.locations = @[@0.25, @0.75];
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1, 1);
    [self.view.layer addSublayer:gradientLayer];
    
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    
}

@end

NTESGradientLayerMaskViewController.m文件

#import "NTESGradientLayerMaskViewController.h"

@interface NTESGradientLayerMaskViewController ()

@end

@implementation NTESGradientLayerMaskViewController


- (instancetype)init
{
    self = [super init];
    if (self) {
        self.navigationItem.title = @"Gradient Layer - Mask";
        self.edgesForExtendedLayout = UIRectEdgeNone;
    }
    return self;
}

#pragma mark - lifeCycle
- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    [self testGradientLayer];
}

- (void)testGradientLayer {
    //原始图片:
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 150, 100)];
    imageView.image = [UIImage imageNamed:@"nature.jpg"];
    imageView.contentMode = UIViewContentModeScaleAspectFill;
    [self.view addSubview:imageView];
    
    //镜像图片:
    UIImageView *mirrorImageView = [[UIImageView alloc] initWithFrame:imageView.bounds];
    mirrorImageView.image = imageView.image;
    mirrorImageView.contentMode = UIViewContentModeScaleAspectFill;
    mirrorImageView.transform = CGAffineTransformMakeScale(1, -1);//镜像;
//    mirrorImageView.transform = CGAffineTransformMakeRotation(M_PI);//旋转180度;
    mirrorImageView.center = CGPointMake(imageView.center.x, imageView.center.y + imageView.frame.size.height);
    [self.view addSubview:mirrorImageView];
    
    //对 mirrorImageView 进行 颜色渐变 外加 遮罩 处理:
    CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init];
    gradientLayer.frame = CGRectMake(0, 0, imageView.frame.size.width, imageView.frame.size.height);
    //alpha 值介于 0~1 之间:
    gradientLayer.colors =@[
                            (id)[UIColor clearColor].CGColor,
                            (id)[UIColor colorWithWhite:0 alpha:0.4].CGColor
                            ];
    //数值变化: x 值为0;
    gradientLayer.startPoint = CGPointMake(0, 0.7);
    gradientLayer.endPoint = CGPointMake(0, 1);
    mirrorImageView.layer.mask = gradientLayer;
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    
}

@end

NTESShapeLayerViewController.m文件

#import "NTESShapeLayerViewController.h"

@interface NTESShapeLayerViewController ()

@end

@implementation NTESShapeLayerViewController

#pragma mark - init
- (instancetype)init
{
    self = [super init];
    if (self) {
        self.navigationItem.title = @"Shape Layer";
        self.edgesForExtendedLayout = UIRectEdgeNone;
    }
    return self;
}


#pragma mark - lifeCycle
- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor whiteColor];
    
//    [self testCAShapeLayerWithoutBezier];
    
    [self testCAShapeLayerWithBezier];
}

#pragma mark - 非贝塞尔曲线方法
- (void)testCAShapeLayerWithoutBezier {
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    //线框颜色:
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    [self.view.layer addSublayer:shapeLayer];
    
    //绘制:指定路径:
    CGMutablePathRef path = CGPathCreateMutable();
//    CGAffineTransform transform = CGAffineTransformMake(100, 100, 20, 20, 20, 20);
    CGPathMoveToPoint(path, nil, 50, 200);
    CGPathAddCurveToPoint(path, nil, 100, 100, 250, 300, 300, 200);
    shapeLayer.path = path;
    CGPathRelease(path);
}


#pragma mark - 贝塞尔曲线方法
- (void)testCAShapeLayerWithBezier {
    
    CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
    CGPoint startPoint = CGPointMake(50, 200);
    CGPoint endPoint = CGPointMake(300, 200);
    CGPoint ctrlPoint1 = CGPointMake(100, 100);
    CGPoint ctrlPoint2 = CGPointMake(250, 300);
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:startPoint];
    //有 2 个控制点的情况:
    [path addCurveToPoint:endPoint controlPoint1:ctrlPoint1 controlPoint2:ctrlPoint2];
    //有 1 个控制点的情况:
    //[path addQuadCurveToPoint:(CGPoint) controlPoint:(CGPoint)];
    shapeLayer.path = path.CGPath;
    
    shapeLayer.strokeColor = [UIColor orangeColor].CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
//    [self.view.layer addSublayer:shapeLayer];
    
    
    //其他效果:
    UIBezierPath *path1 = [UIBezierPath bezierPathWithRect:CGRectMake(99, 99, 99, 99)];
    shapeLayer.path = path1.CGPath;
    [self.view.layer addSublayer:shapeLayer];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    
}

@end

NTESShapeLayerMaskViewController.m文件

#import "NTESShapeLayerMaskViewController.h"

@interface NTESShapeLayerMaskViewController ()

@end

@implementation NTESShapeLayerMaskViewController

#pragma mark - init
- (instancetype)init
{
    self = [super init];
    if (self) {
        self.navigationItem.title = @"Shape Layer - mask";
        self.edgesForExtendedLayout = UIRectEdgeNone;
    }
    return self;
}


#pragma mark - lifeCycle
- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    [self testShapeLayerMask];
}


#pragma mark - testShapeLayerMask
- (void)testShapeLayerMask {
    //bgView:
    UIView *bgView = [[UIView alloc] initWithFrame:CGRectMake(50, 100, 300, 200)];
    bgView.backgroundColor = [UIColor clearColor];
    [self.view addSubview:bgView];
    //imageView:
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:bgView.bounds];
    imageView.image = [UIImage imageNamed:@"nature.jpg"];
    imageView.contentMode = UIViewContentModeScaleAspectFill;
    [bgView addSubview:imageView];
    
    //画贝塞尔曲线:
    UIBezierPath *maskPath = [UIBezierPath bezierPath];
    [maskPath moveToPoint:CGPointZero];
    //绘制带弧形效果的区域:
    CGFloat curveHeight = 40;
    //起始点(左上角点):
    CGFloat curveBeginHeight = imageView.frame.size.height - curveHeight;
    //左下角点向上移动40:
    [maskPath addLineToPoint:CGPointMake(0, curveBeginHeight)];
    //右下角点:
    CGPoint curveEndPoint = CGPointMake(imageView.frame.size.width, imageView.frame.size.height - curveHeight);
    //加控制点保证左下角点与右下角点的连线是弧线:
    CGPoint ctrlPoint = CGPointMake(imageView.frame.size.width / 2, imageView.frame.size.height + curveHeight);
    //添加这条弧线:
    [maskPath addQuadCurveToPoint:curveEndPoint controlPoint:ctrlPoint];
    //右上角点:
    [maskPath addLineToPoint:CGPointMake(imageView.frame.size.width, 0)];
    //闭合曲线:
    [maskPath closePath];
    
    //把这条封闭曲线作为遮罩视图:
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.frame = imageView.frame;
    shapeLayer.path = maskPath.CGPath;
//    shapeLayer.fillColor = [[UIColor redColor] CGColor];
//    [bgView.layer addSublayer:shapeLayer];
    //只显示里面的不显示外面的:
    bgView.layer.mask = shapeLayer;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    
}


@end

NTESShapeLayerAnimationViewController.m文件
圆圈动画

#import "NTESShapeLayerAnimationViewController.h"

@interface NTESShapeLayerAnimationViewController ()

@end

@implementation NTESShapeLayerAnimationViewController

#pragma mark - init
- (instancetype)init
{
    self = [super init];
    if (self) {
        self.navigationItem.title = @"Shape Layer Animation";
        self.edgesForExtendedLayout = UIRectEdgeNone;
    }
    return self;
}

#pragma mark - lifeCycle
- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    [self testCAShapeLayerAnimation];
}


/*
 如果事与愿违，就相信上天一定另有安排；所有失去的，都会以另外一种方式归来。相信自己，相信时间不会亏待你。
 美好一天从“相信自己”开始！
 */
#pragma mark - 测试动画
- (void)testCAShapeLayerAnimation {
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.frame = CGRectMake(100, 100, 100, 100);
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:shapeLayer.bounds];
    shapeLayer.path = path.CGPath;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.lineWidth = 2.0f;
    shapeLayer.strokeColor = [UIColor orangeColor].CGColor;
    //一开始不显示橙色圆圈线条:
    shapeLayer.strokeEnd = 0;
    [self.view.layer addSublayer:shapeLayer];
    
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 3.0f;
    pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    pathAnimation.fromValue = @0.0f;
    pathAnimation.toValue = @1.0f;
    pathAnimation.fillMode = kCAFillModeForwards;
    //动画完成后移除:
    pathAnimation.removedOnCompletion = NO;
    [shapeLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
    
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    
}

@end

NTESTestLayer.m文件
图文混排富文本

#import "NTESTestLayer.h"
//#import //导入 coreText 库;
#import 

@interface NTESTestLayer ()

@end

@implementation NTESTestLayer

- (instancetype)init
{
    self = [super init];
    if (self) {
        self.navigationItem.title = @"Text Layer";
        self.edgesForExtendedLayout = UIRectEdgeNone;
    }
    return self;
}


#pragma mark - lifeCycle
- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    [self testTextLayer];
}


#pragma mark - testTextLayer
- (void)testTextLayer {
    CATextLayer *textLayer = [CATextLayer layer];
    textLayer.contentsScale = [[UIScreen mainScreen] scale];
    textLayer.foregroundColor = [UIColor blackColor].CGColor;
    textLayer.backgroundColor = [[UIColor orangeColor] CGColor];
    textLayer.wrapped = YES;
    textLayer.alignmentMode = kCAAlignmentCenter;
    
    //font:
    UIFont *font = [UIFont systemFontOfSize:12.0f];
    CGFontRef fontRef = CGFontCreateWithFontName((__bridge_retained CFStringRef)font.fontName);
    textLayer.font = fontRef;
    textLayer.fontSize = font.pointSize;
    CGFontRelease(fontRef);
    
    textLayer.frame = CGRectMake(50, 50, 200, 200);
    [self.view.layer addSublayer:textLayer];
    NSString *text = @"它聪明、熟悉每个用户的喜好，从海量音乐中挑选出你可能喜欢的音乐。它通过你每一次操作来记录你的口味。你提供给云音乐的信息越多，它就越了解你的音乐喜好。";
    textLayer.string = text;
    
    //以上内容与 UILabel 相似;
    //下面的内容给文字设置富文本属性:
    
    //富文本 rich text:
    NSMutableAttributedString *attrStr = [[NSMutableAttributedString alloc] initWithString:textLayer.string];
    [attrStr addAttribute:(NSString *)kCTForegroundColorAttributeName value:(__bridge id)[UIColor yellowColor].CGColor range:NSMakeRange(1, 2)];
    [attrStr addAttribute:(NSString *)kCTFontAttributeName value:[UIFont fontWithName:@"Arial" size:20] range:NSMakeRange(8, 2)];
    NSDictionary *attrDic = @{
                              (__bridge id)kCTUnderlineStyleAttributeName:@(kCTUnderlineStyleSingle),
                              (__bridge id)kCTForegroundColorAttributeName:(__bridge id)[UIColor redColor].CGColor
                              };
    [attrStr setAttributes:attrDic range:NSMakeRange(text.length - 5, 4)];
    textLayer.string = attrStr;
    
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    
}


@end

iOS - Layer图层学习

愿编程让这个世界更美好

你可能感兴趣的:(iOS - Layer图层学习)