[iOS UI進階，iosui進階

[iOS UI進階，iosui進階
A.簡介1. 需要掌握的

• drawRect:方法的使用
• 常見圖形的繪製：線條、多邊形、圓
• 繪圖狀態的設定：文字顏色、線寬等
• 圖形上下文狀態的儲存與恢複
• 圖形上下文棧
  
  

1.基本圖形繪製
* 線段（線寬、線段樣式）
* 矩形（空心、實心、顏色）
* 三角形、梯形等形狀
* 橢圓\圓
* 圓弧
* 文字繪製
* 圖片繪製（pattern）
* 圖形上下文棧

2.練習（畫人）3.模仿UIImageView4.自訂checkbox5.圖片裁剪6.圖片浮水印7.條紋背景8.     2.概念Quartz 2D是一個二維繪圖引擎，同時支援iOS和Mac系統Quartz 2D能完成的工作

• 繪製圖形 : 線條\三角形\矩形\圓\弧等
• 繪製文字
• 繪製\產生圖片(映像)
• 讀取\產生PDF
• \裁剪圖片
• 自訂UI控制項
• … …

 Quartz 2D能做很多強大的事情,例如

• 裁剪圖片
• 塗鴉\畫板
• 手勢解鎖

  B.Quartz2D在iOS開發中的價值

• 為了便於搭建美觀的UI介面，iOS提供了UIKit架構，裡面有各種各樣的UI控制項
• UILabel：顯示文字
• UIImageView：顯示圖片
• UIButton：同時顯示圖片和文字（能點擊）
• … …

利用UIKit架構提供的控制項，拼拼湊湊，能搭建和現實一些簡單、常見的UI介面

但是，有些UI介面極其複雜、而且比較個人化，用普通的UI控制項無法實現，這時可以利用Quartz2D技術將控制項內部的結構畫出來，自訂控制項的樣子

其實，iOS中大部分控制項的內容都是通過Quartz2D畫出來的

因此，Quartz2D在iOS開發中很重要的一個價值是：自訂view（自訂UI控制項）  C.圖形上下文
圖形上下文（Graphics Context）：是一個CGContextRef類型的資料

圖形內容相關的作用
儲存繪圖資訊、繪圖狀態
決定繪製的輸出目標（繪製到什麼地方去？）
（輸出目標可以是PDF檔案、Bitmap或者顯示器的視窗上） 1 //重寫drawRect: 2 - (void)drawRect:(CGRect)rect { 3 // 1.獲得圖形上下文 4 CGContextRef ctx = UIGraphicsGetCurrentContext(); 5 6 // 2.拼接圖形 7 // 2.1設定一個起點 8 CGContextMoveToPoint(ctx, 10, 10); 9 10 // 2.2添加一條線段，是從(10,10)到(100,100)11 CGContextAddLineToPoint(ctx, 100, 100);12 13 // 2.3從上次的位置開始再添加一條線段，是從(100,100)到(150,40)14 CGContextAddLineToPoint(ctx, 150, 40);15 16 // 2.4最後畫一條直線串連會原處，形成一個三角形17 // CGContextAddLineToPoint(ctx, 10, 10);18 CGContextClosePath(ctx); // 回到起點19 20 // 3.渲染顯示到view上面21 CGContextStrokePath(ctx);22 }  1 - (void)drawRect:(CGRect)rect { 2 // 1.獲得上下文 3 CGContextRef ctx = UIGraphicsGetCurrentContext(); 4 5 // 2.畫四邊形 6 CGContextAddRect(ctx, CGRectMake(10, 10, 80, 100)); 7 8 // 繪製空心圖形 9 // CGContextStrokePath(ctx);10 11 // 繪製實心圖形12 CGContextFillPath(ctx);13 }  1 - (void) drawRound { 2 // 1.獲得上下文 3 CGContextRef ctx = UIGraphicsGetCurrentContext(); 4 5 // 2.1畫圓 6 CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 100, 100)); 7 8 // 2.2橢圓 9 CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 150, 100));10 11 // 渲染12 CGContextStrokePath(ctx);13 }  1 - (void) drawArc { 2 // 1.獲得上下文 3 CGContextRef ctx = UIGraphicsGetCurrentContext(); 4 5 // 2.圓弧 6 // X軸正方向為0角度，最後一個參數1代表逆時針方向 7 CGContextAddArc(ctx, 100, 100, 50, 0, -M_PI, 1); 8 9 // 渲染10 CGContextStrokePath(ctx);11 }

 

1 // 2.圓弧2 // X軸正方向為0角度，最後一個參數1代表逆時針方向3 CGContextAddArc(ctx, 100, 100, 50, 0, -M_PI, 0);

 

1 - (void) drawText { 2 // 1.獲得上下文 3 CGContextRef ctx = UIGraphicsGetCurrentContext(); 4 5 // 2.畫上文字 6 /** 7 * 如果使用已經到期的方法 CGContextShowText，由於CG畫板是以左下角為零點，所以字會上下顛倒過來 8 */ 9 NSString *text = @"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 dictionary];17 dict[NSForegroundColorAttributeName] = [UIColor redColor]; // 前景色彩，就是字型顏色18 dict[NSFontAttributeName] = [UIFont systemFontOfSize:20]; // 字型19 [text drawInRect:r withAttributes:dict];20 21 // 渲染22 CGContextStrokePath(ctx);23 }  1 - (void) drawImg { 2 // 1.獲得上下文 3 CGContextRef ctx = UIGraphicsGetCurrentContext(); 4 5 // 取得圖片 6 UIImage *img = [UIImage imageNamed:@"M4"]; 7 8 // 畫片 9 // [img drawAtPoint:CGPointZero]; // 原圖大小，可能顯示不全10 [img drawInRect:CGRectMake(0, 0, 100, 200)]; // 填充方式預設是展開11 12 // 渲染13 CGContextStrokePath(ctx);14 } （2）填充方式a.drawAtPoint 預設是原圖    [img drawAtPoint:CGPointZero]; // 原圖大小，可能顯示不全 1 - (void) drawImg { 2 // 1.獲得上下文 3 CGContextRef ctx = UIGraphicsGetCurrentContext(); 4 5 // 取得圖片 6 UIImage *img = [UIImage imageNamed:@"M4Mini"]; // 小圖 7 8 // 畫片 9 [img drawAsPatternInRect:CGRectMake(0, 0, 200, 200)]; // 重複，可以用來做花紋10 11 // 渲染12 CGContextStrokePath(ctx);13 } （3）文字浮水印

 1 - (void) drawImg { 2     // 1.獲得上下文 3     CGContextRef ctx = UIGraphicsGetCurrentContext(); 4     5     // 取得圖片 6     UIImage *img = [UIImage imageNamed:@"M4"]; // 大圖 7 //    UIImage *img = [UIImage imageNamed:@"M4Mini"]; // 小圖 8     9     // 畫片10 //    [img drawAtPoint:CGPointZero]; // 原圖大小，可能顯示不全11     [img drawInRect:CGRectMake(0, 0, 100, 200)]; // 填充方式預設是展開12 //    [img drawAsPatternInRect:CGRectMake(0, 0, 200, 200)]; // 重複，可以用來做花紋13    14     // 文字15     NSString *text = @"這是一個美女";16     [text drawInRect:CGRectMake(0, 0, 100, 30) withAttributes:nil];17    18     // 渲染19     CGContextStrokePath(ctx);20 }

 

1 - (void) contextStackDemo { 2 // 1.獲得上下文 3 CGContextRef ctx = UIGraphicsGetCurrentContext(); 4 5 // 2.儲存上下文 6 CGContextSaveGState(ctx); 7 8 // 3.設定上下文 9 CGContextSetLineCap(ctx, kCGLineCapRound);10 CGContextSetLineWidth(ctx, 10);11 [[UIColor redColor] set];12 13 // 4.畫第一條直線14 CGContextMoveToPoint(ctx, 10, 10);15 CGContextAddLineToPoint(ctx, 100, 100);16 17 // 渲染18 CGContextStrokePath(ctx);19 20 // 5.恢複上下文21 CGContextRestoreGState(ctx);22 23 // 6.第二條直線24 CGContextMoveToPoint(ctx, 100, 10);25 CGContextAddLineToPoint(ctx, 10, 100);26 27 // 渲染28 CGContextStrokePath(ctx);29 }  1 - (void) testCTM { 2 CGContextRef ctx = UIGraphicsGetCurrentContext(); 3 4 CGContextSaveGState(ctx); 5 6 CGContextRotateCTM(ctx, M_PI_4 * 0.3); // 旋轉 7 CGContextScaleCTM(ctx, 0.5, 0.5); // 縮放 8 CGContextTranslateCTM(ctx, 100, 0); // 移動 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 // 畫一個圓 5 CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 150, 150)); 6 7 // 裁剪 8 CGContextClip(ctx); 9 10 // 加片11 UIImage *img = [UIImage imageNamed:@"a9ec8a13632762d0092abc3ca2ec08fa513dc619"];12 [img drawInRect:CGRectMake(0, 0, 150, 150)];13 14 CGContextStrokePath(ctx); 15 }  1 - (void)setRadius:(CGFloat)radius { 2 _radius = radius; 3 4 // 調用重繪/刷幀方法 5 [self setNeedsDisplay]; 6 } 7 8 // 初始化控制項的時候, drawRect只會調用一次 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); // 實心圓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

 可以用滑條控制圓的大小 1 - (void)awakeFromNib { 2 // 添加定時器 3 // [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(setNeedsDisplay) userInfo:nil repeats:YES]; 4 5 // 重新整理更快的工具 6 CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)]; // 建立 7 8 // 添加到訊息迴圈，啟動 9 [link addToRunLoop:[NSRunLoop 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 }