iOS開發UI篇—Quartz2D使用(信紙條紋) – iPhone手機開發技術文章 iPhone軟體開發教學課程

 

 

一、前導程序

 

新建一個項目,在主控制器文件中實現以下幾行代碼,就能輕松的完成圖片在視圖中的平鋪。

 

復制代碼

 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

You May Also Like