iOS - Layer圖層學(xué)習(xí)

效果圖 Gif.gif

AppDelegate.m文件

#import "AppDelegate.h"

#import "NTESMaskLayerViewController.h"http://遮罩視圖
#import "NTESGradientLayerViewController.h"http://漸變視圖
#import "NTESGradientLayerMaskViewController.h"http://圖片鏡像遮罩
#import "NTESShapeLayerViewController.h"http://畫(huà)線條
#import "NTESShapeLayerMaskViewController.h"http://弧形線條遮罩
#import "NTESShapeLayerAnimationViewController.h" //初始界面跳過(guò)動(dòng)畫(huà)
#import "NTESTestLayer.h"




static NSString *const reuseIdentifier = @"cell";

@interface AppDelegate () <UITableViewDelegate, UITableViewDataSource> {
    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 - <UITableViewDataSource>
- (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 - <UITableViewDelegate>
- (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(@"不存在目標(biāo)控制器-- 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;//將原點(diǎn)移動(dòng)到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:@"imageMask@3x.png"];
    //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];
    //漸變分割線(默認(rèn)等分):
    //漸變開(kāi)始點(diǎn):
//    gradientLayer.startPoint = CGPointMake(0, 0);
    //漸變終止點(diǎn):
//    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);//旋轉(zhuǎn)180度;
    mirrorImageView.center = CGPointMake(imageView.center.x, imageView.center.y + imageView.frame.size.height);
    [self.view addSubview:mirrorImageView];
    
    //對(duì) mirrorImageView 進(jìn)行 顏色漸變 外加 遮罩 處理:
    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
                            ];
    //數(shù)值變化: 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 個(gè)控制點(diǎn)的情況:
    [path addCurveToPoint:endPoint controlPoint1:ctrlPoint1 controlPoint2:ctrlPoint2];
    //有 1 個(gè)控制點(diǎn)的情況:
    //[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];
    
    //畫(huà)貝塞爾曲線:
    UIBezierPath *maskPath = [UIBezierPath bezierPath];
    [maskPath moveToPoint:CGPointZero];
    //繪制帶弧形效果的區(qū)域:
    CGFloat curveHeight = 40;
    //起始點(diǎn)(左上角點(diǎn)):
    CGFloat curveBeginHeight = imageView.frame.size.height - curveHeight;
    //左下角點(diǎn)向上移動(dòng)40:
    [maskPath addLineToPoint:CGPointMake(0, curveBeginHeight)];
    //右下角點(diǎn):
    CGPoint curveEndPoint = CGPointMake(imageView.frame.size.width, imageView.frame.size.height - curveHeight);
    //加控制點(diǎn)保證左下角點(diǎn)與右下角點(diǎn)的連線是弧線:
    CGPoint ctrlPoint = CGPointMake(imageView.frame.size.width / 2, imageView.frame.size.height + curveHeight);
    //添加這條弧線:
    [maskPath addQuadCurveToPoint:curveEndPoint controlPoint:ctrlPoint];
    //右上角點(diǎn):
    [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文件
圓圈動(dòng)畫(huà)

#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];
}


/*
 如果事與愿違，就相信上天一定另有安排；所有失去的，都會(huì)以另外一種方式歸來(lái)。相信自己，相信時(shí)間不會(huì)虧待你。
 美好一天從“相信自己”開(kāi)始！
 */
#pragma mark - 測(cè)試動(dòng)畫(huà)
- (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;
    //一開(kāi)始不顯示橙色圓圈線條:
    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;
    //動(dòng)畫(huà)完成后移除:
    pathAnimation.removedOnCompletion = NO;
    [shapeLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
    
}

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

@end

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

#import "NTESTestLayer.h"
//#import <CoreText/CTStringAttributes.h>//導(dǎo)入 coreText 庫(kù);
#import <CoreText/CoreText.h>

@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 = @"它聰明、熟悉每個(gè)用戶(hù)的喜好，從海量音樂(lè)中挑選出你可能喜歡的音樂(lè)。它通過(guò)你每一次操作來(lái)記錄你的口味。你提供給云音樂(lè)的信息越多，它就越了解你的音樂(lè)喜好。";
    textLayer.string = text;
    
    //以上內(nèi)容與 UILabel 相似;
    //下面的內(nèi)容給文字設(shè)置富文本屬性:
    
    //富文本 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

愿編程讓這個(gè)世界更美好

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容