iOS开发UI篇—Quartz2D使用(信纸条纹)

iOS开发UI篇—Quartz2D使用(信纸条纹)

一、前导程序

新建一个项目，在主控制器文件中实现以下几行代码，就能轻松的完成图片在视图中的平铺。

#import "YYViewController.h" @interface YYViewController () @end @implementation YYViewController - (void)viewDidLoad { [super viewDidLoad]; UIImage *image=[UIImage imageNamed:@"me"]; UIColor *color=[UIColor colorWithPatternImage:image]; self.view.backgroundColor=color; } @end

效果：

 

 

二、实现信纸条纹的效果

利用上面的这种特性来做一个信纸的效果。 默认的view上没有分割线，要在view上加上分割线有两种方式： （1）让美工做一张专门用来做背景的图片，把图片设置为背景。缺点：信的长度不确定，所以背景图片的长度也难以确定。 （2）通过一张小的图片来创建一个颜色，平铺实现背景效果。   第一步：生成一张以后用以平铺的小图片。 画矩形。 画线条。 第二步：从上下文中取出图片设置为背景。黑乎乎一片？（其他地方时透明的，控制器的颜色，如果不设置那么默认为黑色的） 实现代码： // // YYViewController.m // 01-信纸条纹 // // Created by 孔医己 on 14-6-11. // Copyright (c) 2014年 itcast. All rights reserved. // #import "YYViewController.h" @interface YYViewController () @end @implementation YYViewController - (void)viewDidLoad { [super viewDidLoad]; // 1.生成一张以后用于平铺的小图片 CGSize size = CGSizeMake(self.view.frame.size.width, 35); UIGraphicsBeginImageContextWithOptions(size , NO, 0); // 2.画矩形 CGContextRef ctx = UIGraphicsGetCurrentContext(); CGFloat height = 35; CGContextAddRect(ctx, CGRectMake(0, 0, self.view.frame.size.width, height)); [[UIColor whiteColor] set]; CGContextFillPath(ctx); // 3.画线条 CGFloat lineWidth = 2; CGFloat lineY = height - lineWidth; CGFloat lineX = 0; CGContextMoveToPoint(ctx, lineX, lineY); CGContextAddLineToPoint(ctx, 320, lineY); [[UIColor blackColor] set]; CGContextStrokePath(ctx); UIImage *image=UIGraphicsGetImageFromCurrentImageContext(); UIColor *color=[UIColor colorWithPatternImage:image]; self.view.backgroundColor=color; } @end

效果：

 

三、应用场景

完成一个简陋的电子书阅读器

代码：

// // YYViewController.m // 01-信纸条纹 // // Created by 孔医己 on 14-6-11. // Copyright (c) 2014年 itcast. All rights reserved. // #import "YYViewController.h" @interface YYViewController () @property (weak, nonatomic) IBOutlet UITextView *textview; - (IBAction)perBtnClick:(UIButton *)sender; - (IBAction)nextBtnClick:(UIButton *)sender; @property(nonatomic,assign)int index; @end @implementation YYViewController - (void)viewDidLoad { [super viewDidLoad]; // 1.生成一张以后用于平铺的小图片 CGSize size = CGSizeMake(self.view.frame.size.width, 26); UIGraphicsBeginImageContextWithOptions(size , NO, 0); // 2.画矩形 CGContextRef ctx = UIGraphicsGetCurrentContext(); CGFloat height = 26; CGContextAddRect(ctx, CGRectMake(0, 0, self.view.frame.size.width, height)); [[UIColor brownColor] set]; CGContextFillPath(ctx); // 3.画线条 CGFloat lineWidth = 2; CGFloat lineY = height - lineWidth; CGFloat lineX = 0; CGContextMoveToPoint(ctx, lineX, lineY); CGContextAddLineToPoint(ctx, 320, lineY); [[UIColor blackColor] set]; CGContextStrokePath(ctx); UIImage *image=UIGraphicsGetImageFromCurrentImageContext(); UIColor *color=[UIColor colorWithPatternImage:image]; //self.view.backgroundColor=color; self.textview.backgroundColor=color; } - (IBAction)perBtnClick:(UIButton *)sender { self.index--; self.textview.text=[NSString stringWithFormat:@"第%d页",self.index]; CATransition *ca = [[CATransition alloc] init]; ca.type = @"pageCurl"; [self.textview.layer addAnimation:ca forKey:nil]; } - (IBAction)nextBtnClick:(UIButton *)sender { self.index++; self.textview.text=[NSString stringWithFormat:@"第%d页",self.index]; CATransition *ca = [[CATransition alloc] init]; ca.type = @"pageCurl"; [self.textview.layer addAnimation:ca forKey:nil]; } @end

storyboard中的界面布局

 

实现的简单效果：

 

 

转载于:https://www.cnblogs.com/yipingios/p/5557038.html

相关资源：各显卡算力对照表！