iOS開發UI篇—Quartz2D使用(信紙條紋)

 
 一、前置程式 建立一個項目，在主控制器檔案中實現以下幾行代碼，就能輕鬆的完成圖片在視圖中的平鋪。 複製代碼 1 #import "YYViewController.h" 2  3 @interface YYViewController () 4  5 @end 6  7 @implementation YYViewController 8  9 - (void)viewDidLoad10 {11     [super viewDidLoad];12 13     UIImage *image=[UIImage imageNamed:@"me"];14     UIColor *color=[UIColor colorWithPatternImage:image];15     self.view.backgroundColor=color;16 }17 18 @end      二、實現信紙條紋的效果 利用上面的這種特性來做一個信紙的效果。預設的view上沒有分割線，要在view上加上分割線有兩種方式：（1）讓美工做一張專門用來做背景的圖片，把圖片設定為背景。缺點：信的長度不確定，所以背景圖片的長度也難以確定。（2）通過一張小的圖片來建立一個顏色，平鋪實現背景效果。 第一步：產生一張以後用以平鋪的小圖片。畫矩形。畫線條。第二步：從上下文中取出圖片設定為背景。黑乎乎一片？（其他地方時透明的，控制器的顏色，如果不設定那麼預設為黑色的）實現代碼：複製代碼 1 // 2 //  YYViewController.m 3 //  01-信紙條紋 4 // 5 //  Created by 孔醫己 on 14-6-11. 6 //  Copyright (c) 2014年 itcast. All rights reserved. 7 // 8  9 #import "YYViewController.h"10 11 @interface YYViewController ()12 13 @end14 15 @implementation YYViewController16 17 - (void)viewDidLoad18 {19     [super viewDidLoad];20 21     22     // 1.產生一張以後用於平鋪的小圖片23     CGSize size = CGSizeMake(self.view.frame.size.width, 35);24     UIGraphicsBeginImageContextWithOptions(size , NO, 0);25     26     // 2.畫矩形27     CGContextRef ctx = UIGraphicsGetCurrentContext();28     CGFloat height = 35;29     CGContextAddRect(ctx, CGRectMake(0, 0, self.view.frame.size.width, height));30     [[UIColor whiteColor] set];31     CGContextFillPath(ctx);32     33     // 3.畫線條34     35     CGFloat lineWidth = 2;36     CGFloat lineY = height - lineWidth;37     CGFloat lineX = 0;38     CGContextMoveToPoint(ctx, lineX, lineY);39     CGContextAddLineToPoint(ctx, 320, lineY);40     [[UIColor blackColor] set];41     CGContextStrokePath(ctx);42     43     44     UIImage *image=UIGraphicsGetImageFromCurrentImageContext();45     UIColor *color=[UIColor colorWithPatternImage:image];46     self.view.backgroundColor=color;47 }48 49 @end   三、應用情境 完成一個簡陋的電子書閱讀器 代碼： 複製代碼 1 // 2 //  YYViewController.m 3 //  01-信紙條紋 4 // 5 //  Created by 孔醫己 on 14-6-11. 6 //  Copyright (c) 2014年 itcast. All rights reserved. 7 // 8  9 #import "YYViewController.h"10 11 @interface YYViewController ()12 13 @property (weak, nonatomic) IBOutlet UITextView *textview;14 - (IBAction)perBtnClick:(UIButton *)sender;15 - (IBAction)nextBtnClick:(UIButton *)sender;16 @property(nonatomic,assign)int index;17 @end18 19 @implementation YYViewController20 21 - (void)viewDidLoad22 {23     [super viewDidLoad];24 25     26     // 1.產生一張以後用於平鋪的小圖片27     CGSize size = CGSizeMake(self.view.frame.size.width, 26);28     UIGraphicsBeginImageContextWithOptions(size , NO, 0);29     30     // 2.畫矩形31     CGContextRef ctx = UIGraphicsGetCurrentContext();32     CGFloat height = 26;33     CGContextAddRect(ctx, CGRectMake(0, 0, self.view.frame.size.width, height));34     [[UIColor brownColor] set];35     CGContextFillPath(ctx);36     37     // 3.畫線條38     39     CGFloat lineWidth = 2;40     CGFloat lineY = height - lineWidth;41     CGFloat lineX = 0;42     CGContextMoveToPoint(ctx, lineX, lineY);43     CGContextAddLineToPoint(ctx, 320, lineY);44     [[UIColor blackColor] set];45     CGContextStrokePath(ctx);46     47     48     UIImage *image=UIGraphicsGetImageFromCurrentImageContext();49     UIColor *color=[UIColor colorWithPatternImage:image];50     //self.view.backgroundColor=color;51     self.textview.backgroundColor=color;52 }53 54 - (IBAction)perBtnClick:(UIButton *)sender {55     self.index--;56     self.textview.text=[NSString stringWithFormat:@"第%d頁",self.index];57     CATransition *ca = [[CATransition alloc] init];58     ca.type = @"pageCurl";59     60     [self.textview.layer addAnimation:ca forKey:nil];61     62 }63 64 - (IBAction)nextBtnClick:(UIButton *)sender {65     self.index++;66     self.textview.text=[NSString stringWithFormat:@"第%d頁",self.index];67     CATransition *ca = [[CATransition alloc] init];68     ca.type = @"pageCurl";69     70     [self.textview.layer addAnimation:ca forKey:nil];71 }72 @end