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, );
     UIGraphicsBeginImageContextWithOptions(size , NO, );

     // 2.画矩形
     CGContextRef ctx = UIGraphicsGetCurrentContext();
     CGFloat height = ;
     CGContextAddRect(ctx, CGRectMake(, , self.view.frame.size.width, height));
     [[UIColor whiteColor] set];
     CGContextFillPath(ctx);

     // 3.画线条

     CGFloat lineWidth = ;
     CGFloat lineY = height - lineWidth;
     CGFloat lineX = ;
     CGContextMoveToPoint(ctx, lineX, lineY);
     CGContextAddLineToPoint(ctx, , 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, );
     UIGraphicsBeginImageContextWithOptions(size , NO, );

     // 2.画矩形
     CGContextRef ctx = UIGraphicsGetCurrentContext();
     CGFloat height = ;
     CGContextAddRect(ctx, CGRectMake(, , self.view.frame.size.width, height));
     [[UIColor brownColor] set];
     CGContextFillPath(ctx);

     // 3.画线条

     CGFloat lineWidth = ;
     CGFloat lineY = height - lineWidth;
     CGFloat lineX = ;
     CGContextMoveToPoint(ctx, lineX, lineY);
     CGContextAddLineToPoint(ctx, , 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中的界面布局

实现的简单效果：