[IOS UI advanced, iosui advanced

[IOS UI advanced, iosui advanced
A. Introduction1. What you need to know

• DrawRect: Method usage
• Draw common images: lines, polygon, and circle
• Drawing status settings: text color, line width, etc.
• Save and restore the graph context status
• Graphical context Stack
  
  

1. Basic Drawing
* Line segments (line width and line segment style)
* Rectangle (hollow, solid, color)
* Triangle, trapezoid, and other shapes
* Elliptic \ circle
* ARC
* Text drawing
* Pattern)
* Graphic context Stack

2. Exercise (painter) 3. Imitate UIImageView4. customize checkbox5. crop the image 6. Watermark 7. Striped Background 8.     2. ConceptsQuartz 2D is a two-dimensional Drawing Engine that supports both iOS and Mac systems.

• Drawing: lines, triangles, rectangles, circles, and Arcs
• Draw text
• Draw \ generate image (image)
• Read \ generate PDF
• \ Crop an image
• Custom UI controls
• ... ...

Quartz 2D can do many powerful tasks, such

• Crop Images
• Graffiti/canvas
• Gesture unlocking

  B. z2dIOSValue in development

• To facilitate the construction of beautiful UI interfaces, iOS provides the UIKit framework, which contains a variety of UI controls
• UILabel: display text
• UIImageView: displays images
• UIButton: displays images and text at the same time (can be clicked)
• ... ...

Using the controls provided by the UIKit framework, you can combine them to build simple and common UI interfaces.

However, some UI interfaces are extremely complex and personalized, and cannot be implemented using common UI controls. In this case, you can use Quartz2D technology to draw the internal structure of the control and customize the display of the control.

In fact, most of the controls in iOS are drawn through Quartz2D.

Therefore, one important value of Quartz2D in iOS development is: Custom view (custom UI control) C. Graphic Context
Graphics Context: A CGContextRef type data.

Role of image Context
Save drawing information and drawing status
Determine the output target (where to draw ?)
(The output target can be a PDF file, Bitmap, or display window) 1 // rewrite drawRect: 2-(void) drawRect :( CGRect) rect {3 // 1. obtain the graphic context 4 CGContextRef ctx = UIGraphicsGetCurrentContext (); 5 6 // 2. splicing Graph 7 // 2.1 set a starting point 8 CGContextMoveToPoint (ctx, 10, 10); 9 10 // 2.2 add a line segment from (100,100)) 11 CGContextAddLineToPoint (ctx, 100,100); 12 13 // 2.3 add another line segment from the last position, from (100,100) to (150) 14 CGContextAddLineToPoint (ctx, 40); 15 16 // 2.4 draw a straight line link to form a triangle 17 // CGContextAddLineToPoint (ctx, 10, 10); 18 CGContextClosePath (ctx ); // return to start point 19 20 // 3. rendering to view 21 CGContextStrokePath (ctx); 22}1-(void) drawRect :( CGRect) rect {2 // 1. obtain the context 3 CGContextRef ctx = UIGraphicsGetCurrentContext (); 4 5 // 2. draw a quadrilateral 6 CGContextAddRect (ctx, CGRectMake (10, 10, 80,100); 7 8 // draw a hollow Figure 9 // CGContextStrokePath (ctx ); 10 11 // draw solid figure 12 CGContextFillPath (ctx); 13}1-(void) drawRound {2 // 1. obtain context 3 CGContextRef ctx = UIGraphicsGetCurrentContext (); 4 5 // 2.1 circle 6 CGContextAddEllipseInRect (ctx, CGRectMake (0, 0,100,100); 7 8 // 2.2 elliptical 9 round (ctx, CGRectMake (0, 0,150,100); 10 11 // rendering 12 CGContextStrokePath (ctx); 13}1-(void) drawArc {2 // 1. obtain the context 3 CGContextRef ctx = UIGraphicsGetCurrentContext (); 4 5 // 2. ARC 6 // The positive direction of the X axis is 0, and the last parameter 1 represents the clockwise direction 7 CGContextAddArc (ctx, 100,100, 50, 0,-M_PI, 1 ); 8 9 // render 10 CGContextStrokePath (ctx); 11}

 

1 // 2. ARC 2 // The positive direction of the X axis is 0, and the last parameter 1 represents the clockwise direction 3 CGContextAddArc (ctx, 100,100, 50, 0,-M_PI, 0 );

 

1-(void) drawText {2 // 1. obtain the context 3 CGContextRef ctx = UIGraphicsGetCurrentContext (); 4 5 // 2. draw text 6/** 7 * if you use the expired CGContextShowText method, the CG canvas is set to zero in the lower left corner, so the words will be reversed up and down 8 */9 NSString * text = @ "hello, hello"; 10 // [text drawAtPoint: CGPointZero withAttributes: nil]; 11 12 CGRect r = CGRectMake (50, 50,100,100); 13 CGContextAddRect (ctx, r); 14 CGContextFillPath (ctx); 15 16 NSMutableDictionary * dict = [NSMutableDictionary]; 17 dict [NSForegroundColorAttributeName] = [UIColor redColor]; // foreground color, that is, the font color 18 dict [NSFontAttributeName] = [UIFont systemFontOfSize: 20]; // 19 [text drawInRect: r withAttributes: dict]; 20 21 // render 22 CGContextStrokePath (ctx); 23}1-(void) drawImg {2 // 1. get context 3 CGContextRef ctx = UIGraphicsGetCurrentContext (); 4 5 // get image 6 UIImage * img = [UIImage imageNamed: @ "M4"]; 7 8 // picture 9 // [img drawAtPoint: CGPointZero]; // source image size, may be incomplete 10 [img drawInRect: CGRectMake (0, 0,100,200)]; // The default filling mode is to stretch 11 12 // render 13 CGContextStrokePath (ctx); 14}(2) Filling Method. the default value of drawAtPoint is the source image [img drawAtPoint: CGPointZero]; // the size of the source image, which may be 1-(void) drawImg {2 // 1. get context 3 CGContextRef ctx = UIGraphicsGetCurrentContext (); 4 5 // get image 6 UIImage * img = [UIImage imageNamed: @ "M4Mini"]; // thumbnail 7 8 // image 9 [img drawAsPatternInRect: CGRectMake (0, 0,200,200)]; // repeated, can be used for pattern 10 11 // rendering 12 CGContextStrokePath (ctx ); 13}(3) text watermark

1-(void) drawImg {2 // 1. get context 3 CGContextRef ctx = UIGraphicsGetCurrentContext (); 4 5 // get image 6 UIImage * img = [UIImage imageNamed: @ "M4"]; // large image 7 // UIImage * img = [UIImage imageNamed: @ "M4Mini"]; // thumbnail 8 9 // image 10 // [img drawAtPoint: CGPointZero]; // original image size, may not show completely 11 [img drawInRect: CGRectMake (0, 0,100,200)]; // The filling method defaults to stretch 12 // [img drawAsPatternInRect: CGRectMake (0, 0,200,200)]; // repeated, can be used for pattern 13 14 // text 15 NSString * text = @ "this is a beauty"; 16 [text drawInRect: CGRectMake (0, 0,100, 30) withAttributes: nil]; 17 18 // rendering 19 CGContextStrokePath (ctx); 20}

 

1-(void) contextStackDemo {2 // 1. obtain the context 3 CGContextRef ctx = UIGraphicsGetCurrentContext (); 4 5 // 2. storage context 6 CGContextSaveGState (ctx); 7 8 // 3. set Context 9 CGContextSetLineCap (ctx, kCGLineCapRound); 10 CGContextSetLineWidth (ctx, 10); 11 [[UIColor redColor] set]; 12 13 // 4. draw the first line 14 CGContextMoveToPoint (ctx, 10, 10); 15 CGContextAddLineToPoint (ctx, 100,100); 16 17 // render 18 CGContextStrokePath (ctx); 19 20 // 5. restore context 21 CGContextRestoreGState (ctx); 22 23 // 6. the second line is 24 CGContextMoveToPoint (ctx, 100, 10); 25 CGContextAddLineToPoint (ctx, 10,100); 26 27 // render 28 CGContextStrokePath (ctx); 29}1-(void) testCTM {2 CGContextRef ctx = UIGraphicsGetCurrentContext (); 3 4 CGContextSaveGState (ctx); 5 6 CGContextRotateCTM (ctx, M_PI_4 * 0.3 ); // rotate 7 CGContextScaleCTM (ctx, 0.5, 0.5); // scale 8 CGContextTranslateCTM (ctx, 100, 0); // move 9 10 CGContextAddRect (ctx, CGRectMake (10, 10,100,100); 11 CGContextAddEllipseInRect (ctx, CGRectMake (100,100, 60, 60); 12 13 CGContextMoveToPoint (ctx, 200,100); 14 CGContextAddLineToPoint (ctx, 50,200 ); 15 16 CGContextStrokePath (ctx); 17 18}1-(void) testClip {2 CGContextRef ctx = UIGraphicsGetCurrentContext (); 3 4 // draw a circle of 5 CGContextAddEllipseInRect (ctx, CGRectMake (0, 0,150,150 )); 6 7 // crop 8 CGContextClip (ctx); 9 10 // Add piece 11 UIImage * img = [UIImage imageNamed: @ "resize"]; 12 [img drawInRect: CGRectMake (0, 0,150,150)]; 13 14 CGContextStrokePath (ctx); 15}1-(void) setRadius :( CGFloat) radius {2 _ radius = radius; 3 4 // call the repainting/frame swiping Method 5 [self setNeedsDisplay]; 6} 7 8 // when initializing the control, drawRect will only call 9-(void) drawRect :( CGRect) rect {10 CGContextRef ctx = UIGraphicsGetCurrentContext (); 11 12 CGContextAddArc (ctx, 125,125, self. radius, M_PI * 2, 0, 1); 13 CGContextFillPath (ctx); // solid circle 14}ViewController:

 1 @interface ViewController () 2 - (IBAction)onSlideChange:(UISlider *)sender; 3 @property (weak, nonatomic) IBOutlet MyView *circleView; 4  5 @end 6  7 @implementation ViewController 8  9 - (void)viewDidLoad {10     [super viewDidLoad];11     // Do any additional setup after loading the view, typically from a nib.12 }13 14 - (void)didReceiveMemoryWarning {15     [super didReceiveMemoryWarning];16     // Dispose of any resources that can be recreated.17 }18 19 - (IBAction)onSlideChange:(UISlider *)sender {20     self.circleView.radius = sender.value * 100;21 }22 @end

You can use slide bars to control the circle size 1-(void) awakeFromNib {2 // Add a timer 3 // [nst1_scheduledtimerwithtimeinterval: 0.1 target: self selector: @ selector (setNeedsDisplay) userInfo: nil repeats: YES]; 4 5 // tool for refreshing faster 6 CADisplayLink * link = [CADisplayLink displayLinkWithTarget: self selector: @ selector (setNeedsDisplay)]; // create 7 8 // Add to message loop, start 9 [link addToRunLoop: [nsunloop mainRunLoop] forMode: NSDefaultRunLoopMode]; 10} 11 12-(void) drawRect :( CGRect) rect {13 self. snowY + = 1; 14 if (self. snowY> = self. frame. size. height) {15 self. snowY =-100; 16} 17 UIImage * image = [UIImage imageNamed: @ "M2Mini"]; 18 [image drawAtPoint: CGPointMake (100, self. snowY)]; 19}