你好,歡迎來到IOS教程網

 Ios教程網 >> IOS訊息 >> 關於IOS >> iOS開發UI篇―Quartz2D使用(信紙條紋)

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

編輯:關於IOS

 

  一、前導程序   新建一個項目,在主控制器文件中實現以下幾行代碼,就能輕松的完成圖片在視圖中的平鋪。   復制代碼  1 #import "YYViewController.h"  2   3 @interface YYViewController ()  4   5 @end  6   7 @implementation YYViewController  8   9 - (void)viewDidLoad 10 { 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 @end 14  15 @implementation YYViewController 16  17 - (void)viewDidLoad 18 { 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 @end 18  19 @implementation YYViewController 20  21 - (void)viewDidLoad 22 { 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
  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved