iOS Development UI Chapter-quartz2d use (Stationery stripe)

First, the preamble procedure

Create a new project and implement the following lines of code in the main controller file to easily tile the picture in the view.

1 #import "YYViewController.h" 2  3 @interface Yyviewcontroller () 4  5 @end 6  7 @implementation Yyviewcontroll ER 8  9-(void) VIEWDIDLOAD10 {one     [super viewdidload];12     UIImage *image=[uiimage imagenamed:@ "Me"];14     uicolor *color=[uicolor colorwithpatternimage:image];15     self.view.backgroundcolor=color;16}17 @end

Effect:

Second, the realization of stationery stripe effect

Use the above feature to make a stationery effect. There are no split lines on the default view, there are two ways to add split lines to the View: (1) Let the artist make a picture that is used to make the background, and set the picture as the background. Cons: The length of the letter is uncertain, so the length of the background image is difficult to determine. (2) Create a color with a small picture and tile to achieve the background effect. Step one: Create a small image to be tiled later. Draw a rectangle. Draw lines. Step two: Remove the picture from the context to set the background. Dark piece? (Other places when transparent, the controller's color, if not set then the default is black) implementation code:

 1//2//YYVIEWCONTROLLER.M 3//01-Stationery stripe 4//5//Created by hole Medical self on 14-6-11. 6//Copyright (c) 2014 itcast. All rights reserved. 7//8 9 #import "YYViewController.h" @interface Yyviewcontroller () @end14 @implementation Yyviewcontroller (void) ViewDidLoad18 {[viewdidload];20] 21 22//1. Generate a small picture for tiling later cgsize size = Cgsizemak     E (self.view.frame.size.width); uigraphicsbeginimagecontextwithoptions (size, NO, 0); 25 26//2. Draw Rectangle 27  Cgcontextref CTX = Uigraphicsgetcurrentcontext (); cgfloat height = 35;29 cgcontextaddrect (ctx, cgrectmake (0, 0, Self.view.frame.size.width, height)); [[Uicolor Whitecolor] set];31 cgcontextfillpath (CTX); 32 33//3. Painting Line CGFloat linewidth = 2;36 cgfloat Liney = height-linewidth;37 cgfloat LineX = 0;38 Cgcontextm Ovetopoint (CTX, LineX, Liney), Cgcontextaddlinetopoint (CTX,, Liney), [[Uicolor Blackcolor] set];41 CGC OntextstRokepath (CTX); UIImage *image=uigraphicsgetimagefromcurrentimagecontext (); Uicolor *color=[uicol or colorwithpatternimage:image];46 self.view.backgroundcolor=color;47}48 @end

Effect:

Third, the application scenario

Complete a humble ebook reader

Code:

 1//2//YYVIEWCONTROLLER.M 3//01-Stationery stripe 4//5//Created by hole Medical self on 14-6-11. 6//Copyright (c) 2014 itcast. All rights reserved. 7//8 9 #import "YYViewController.h" @interface Yyviewcontroller () @property (weak, nonatomic) Iboutlet Uitex TView *textview;14-(ibaction) Perbtnclick: (UIButton *) sender;15-(Ibaction) Nextbtnclick: (UIButton *) sender;16 @ Property (nonatomic,assign) int index;17 @end18 @implementation YYViewController20-(void) ViewDidLoad22 {Supe     R viewdidload];24 25 26//1. Generate a small picture for tiling later cgsize size = Cgsizemake (Self.view.frame.size.width, 26); 28 Uigraphicsbeginimagecontextwithoptions (size, NO, 0); 29 30//2. Draw rectangle to Cgcontextref ctx = UIGRAPHICSGETCURRENTC     Ontext (); 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. Draw lines CGFloat linewidth = 2;40 CGFloat Liney = height-linewidth;41 CGFloat LineX = 0;42 cgcontextmovetopoint (CTX, LineX, Liney); Cgcontextaddlinetopoi NT (CTX, Liney); [[Uicolor Blackcolor] set];45 cgcontextstrokepath (CTX); UIImage *image= Uigraphicsgetimagefromcurrentimagecontext (); Uicolor *color=[uicolor colorwithpatternimage:image];50//self.view . backgroundcolor=color;51 self.textview.backgroundcolor=color;52}53-(ibaction) Perbtnclick: (UIButton *) Sender {5 5 self.index--;56 self.textview.text=[nsstring stringwithformat:@ "page%d", self.index];57 CATransition *ca = [[CA     Transition alloc] init];58 ca.type = @ "Pagecurl"; [Self.textview.layer ADDANIMATION:CA forkey:nil];61 }63-(Ibaction) Nextbtnclick: (UIButton *) Sender {self.index++;66 self.textview.text=[nsstring stringwith     format:@ "Page%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 

The interface layout in storyboard

The simple effect of the implementation:

iOS Development UI Chapter-quartz2d use (Stationery stripe)