[iOSUI進階-1]自定義控件

2019-11-14 19:41:50

字體：大中小

來源：轉載

供稿：網友

A.關于Quiartz2D的一些細節

1.UIKit的工具已經封裝了上下文引用，所以不用手動獲取和渲染

1 - (void)drawRect:(CGRect)rect {2     [[UIColor redColor] set];3     UIRectFill(CGRectMake(0, 0, 100, 100));4 }

2.多個path

 1 - (void)drawRect:(CGRect)rect { 2     CGContextRef ctx = UIGraphicsGetCurrentContext(); 3     4     // 1.1創建第一個path 5     CGMutablePathRef linePath = CGPathCreateMutable(); 6     7     // 1.2.描繪path 8     CGPathMoveToPoint(linePath, NULL, 0, 0); 9     CGPathAddLineToPoint(linePath, NULL, 100, 100);10    11     // 1.3.添加linePath到上下文12     CGContextAddPath(ctx, linePath);13    14     // 2添加一個圓的path15     CGMutablePathRef circlePath = CGPathCreateMutable();16     CGPathAddEllipseInRect(circlePath, NULL, CGRectMake(0, 0, 50, 50));17     CGContextAddPath(ctx, circlePath);18    19     // 渲染上下文20     CGContextStrokePath(ctx);21    22     // 釋放path23     CGPathRelease(linePath);24     CGPathRelease(circlePath);25 }

B.自定義一個類似UIImageView的控件

 1 // 2 //  MyImageView.h 3 //  MyImageView 4 // 5 //  Created by hellovoidworld on 14/12/31. 6 //  Copyright (c) 2014年 hellovoidworld. All rights reserved. 7 // 8  9 #import <UIKit/UIKit.h>10 11 @interface MyImageView : UIView12 13 @PRoperty(nonatomic, weak) UIImage *image;14 15 @end

 1 // 2 //  MyImageView.m 3 //  MyImageView 4 // 5 //  Created by hellovoidworld on 14/12/31. 6 //  Copyright (c) 2014年 hellovoidworld. All rights reserved. 7 // 8  9 #import "MyImageView.h"10 11 @implementation MyImageView12 13 - (void)setImage:(UIImage *)image {14     _image = image;15    16     // 重新設置了圖片的時候，重繪17     [self setNeedsDisplay];18 }19 20 - (void)drawRect:(CGRect)rect {21     [self.image drawInRect:rect];22 }23 24 @end25  26 controller:27 - (void)viewDidLoad {28     [super viewDidLoad];29     // Do any additional setup after loading the view, typically from a nib.30    31     MyImageView *imageView = [[MyImageView alloc] init];32     imageView.frame = CGRectMake(0, 0, 200, 320);33     [self.view addSubview:imageView];34     imageView.image = [UIImage imageNamed:@"M4"];35 }

C.帶有placeholder的TextView

 1 // 2 //  MyTextView.h 3 //  MyTextField 4 // 5 //  Created by hellovoidworld on 14/12/31. 6 //  Copyright (c) 2014年 hellovoidworld. All rights reserved. 7 // 8  9 #import <UIKit/UIKit.h>10 11 @interface MyTextView : UITextView12 13 @property(nonatomic, copy) NSString *placeHolderText;14 15 @end

 1 // 2 //  MyTextView.m 3 //  MyTextField 4 // 5 //  Created by hellovoidworld on 14/12/31. 6 //  Copyright (c) 2014年 hellovoidworld. All rights reserved. 7 // 8  9 #import "MyTextView.h"10 11 @interface MyTextView() <UITextViewDelegate>12 13 /** 原來的文本顏色 */14 @property(nonatomic, weak) UIColor *originalTextColor;15 16 @end17 18 @implementation MyTextView19 20 // 重寫初始化方法，設置代理21 - (instancetype)init {22     if (self = [super init]) {23         self.returnKeyType = UIReturnKeyDone;24         self.delegate = self;25     }26    27     return self;28 }29 30 // 重新設置了placeHolderText的時候要重繪一下控件31 - (void)setPlaceHolderText:(NSString *)placeHolderText {32     _placeHolderText = placeHolderText;33     [self setNeedsDisplay];34 }35 36 // 開始編輯，消除placeHolder37 - (BOOL)textViewShouldBeginEditing:(UITextView *)textView {38     if ([self.text isEqualToString:self.placeHolderText]) {39         self.text = nil;40         self.textColor = self.originalTextColor;41     }42    43     return YES;44 }45 46 // 結束編輯，如果文本為空，設置placeHolder47 - (void)textViewDidEndEditing:(UITextView *)textView {48     [self setNeedsDisplay];49 }50 51 - (void)drawRect:(CGRect)rect {52     if (self.text.length == 0) {53         self.text = self.placeHolderText;54         self.textColor = [UIColor grayColor];55     }56 }57 58 59 @end

D. 圖片水印

1.步驟

（1）在storyboard拖入一個UIImageView，在控制器代碼創建圖片上下文

創建一個基于位圖的上下文 --> 系統創建一個位圖對象

相當于創建了一個新的UIImage對象

（2）畫背景

（3）畫水印

（4）從上下文取得制作完畢的UIImage對象

（5）結束圖片上下文

 1 // 2 //  UIImage+HW.m 3 //  Watermark 4 // 5 //  Created by hellovoidworld on 14/12/31. 6 //  Copyright (c) 2014年 hellovoidworld. All rights reserved. 7 // 8  9 #import "UIImage+HW.h"10 11 @implementation UIImage(HW)12 13 + (instancetype) image:(NSString *) image withWatermark:(NSString *) watermark {14     // 取得背景圖片15     UIImage *bgImage = [UIImage imageNamed:image];16    17     // 1.開啟一個位圖上下文18     UIGraphicsBeginImageContextWithOptions(bgImage.size, NO, 0.0);19    20     // 2.添加背景圖片到位圖上下文21     [bgImage drawInRect:CGRectMake(0, 0, bgImage.size.width, bgImage.size.height)];22    23     // 3.添加水印圖片24     UIImage *watermarkImage = [UIImage imageNamed:watermark];25     CGFloat scale = 0.5;26     CGFloat margin = 50;27     CGFloat watermarkWidth = watermarkImage.size.width * scale;28     CGFloat watermarkHeight = watermarkImage.size.width *scale;29     CGFloat watermarkX = bgImage.size.width - watermarkWidth - margin;30     CGFloat watermarkY = bgImage.size.height - watermarkHeight - margin;31     [watermarkImage drawInRect:CGRectMake(watermarkX, watermarkY, watermarkWidth, watermarkHeight)];32    33    34     // 4.取得合成后的圖片35     UIImage *resultImage = UIGraphicsGetImageFromCurrentImageContext();36    37     // 5.關閉圖文上下文38     UIGraphicsEndImageContext();39    40     return resultImage;41 }42 43 @end

（6）顯示到UIImageView

 1 - (void)viewDidLoad { 2     [super viewDidLoad]; 3     // Do any additional setup after loading the view, typically from a nib. 4     5     UIImage *watermarkedImage = [UIImage image:@"M4" withWatermark:@"a9ec8a13632762d0092abc3ca2ec08fa513dc619"]; 6     7     UIImageView *imageView = [[UIImageView alloc] initWithImage:watermarkedImage]; 8     imageView.frame = CGRectMake(0, 0, 200, 320); 9     [self.view addSubview:imageView];10 }

（7）保存圖片

a.將image壓縮

b.寫入文件

1     // 壓縮圖片為PNG格式的二進制數據2     NSData *data = UIImagePNGRepresentation(watermarkedImage);3    4     // 寫入文件5     NSString *path =[[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject] stringByAppendingPathComponent:@"watermarkedImage.png"];6     NSLog(@"%@", path);7     [data writeToFile:path atomically:YES];

E.頭像圖片裁剪

裁剪的圖片形成新的圖片，這里是講矩形圖片裁剪成圓形并帶白色邊框

1.步驟

（1）背景大圓

（2）小圓裁剪

（3）加入圖片

 1 /**  創建帶有指定寬度和顏色邊框的圓形頭像圖片 */ 2 + (instancetype) imageOfCircleHeadIcon:(NSString *) image withBorderWidth:(CGFloat) borderWidth borderColor:(UIColor *) borderColor { 3     //  取得圖片 4     UIImage *headIconImage = [UIImage imageNamed:image]; 5     6     // 開啟圖片上下文 7     CGFloat backImageWidth = headIconImage.size.width + 2 * borderWidth; 8     CGFloat backImageHeight = headIconImage.size.height + 2 * borderWidth; 9     CGSize backImageSize = CGSizeMake(backImageWidth, backImageHeight);10     UIGraphicsBeginImageContextWithOptions(backImageSize, NO, 0.0);11    12     // 描繪背景大圓13     [borderColor set]; // 設置圓環顏色14     CGContextRef ctx = UIGraphicsGetCurrentContext();15     CGFloat backCircleRadius = backImageWidth * 0.5; // 大圓半徑16     CGFloat backCircleX = backCircleRadius; // 大圓圓心X17     CGFloat backCircleY = backCircleRadius; // 大圓圓心Y18     CGContextAddArc(ctx, backCircleX, backCircleY, backCircleRadius, 0, M_PI * 2, 0);19     CGContextFillPath(ctx);20    21     // 描繪用來顯示圖片的小圓22     CGFloat frontCircleRadius = backCircleRadius - borderWidth; // 圖片小圓半徑23     CGFloat frontCircleX = backCircleX;24     CGFloat frontCircleY = backCircleY;25     CGContextAddArc(ctx, frontCircleX, frontCircleY, frontCircleRadius, 0, M_PI * 2, 0);26    27     // 裁剪（后面描繪的將會受到裁剪）28     CGContextClip(ctx);29    30     // 添加圖片到上下文31     [headIconImage drawInRect:CGRectMake(borderWidth, borderWidth, headIconImage.size.width, headIconImage.size.height)];32    33     // 取得合成后的圖片34     UIImage *headIconResultImage = UIGraphicsGetImageFromCurrentImageContext();35    36     // 關閉圖片上下文37     UIGraphicsEndImageContext();38    39     return headIconResultImage;40 }

F.屏幕截圖

1.步驟

（1）使用位圖上下文

（2）將控制器view的layer渲染到上下文

[self.view.layer renderInContext:UIGraphicsGetCurrentContext()];

（3）取出圖片，保存圖片

（4）結束位圖上下文

 1 /** 點擊“屏幕截圖” */ 2 - (IBAction)screenShotcut { 3     // 延遲截圖， 防止截到的時按鈕被按下的狀態 4     dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ 5         6         UIView *view = self.view; 7         8         // 1.開啟位圖上下文 9         UIGraphicsBeginImageContextWithOptions(view.frame.size, NO, 0.0);10        11         // 2.渲染控制器view的layer到上下文12         [view.layer renderInContext:UIGraphicsGetCurrentContext()];13        14         // 3.從上下文取得圖片15         UIImage *screenImage = UIGraphicsGetImageFromCurrentImageContext();16        17         // 4.結束上下文18         UIGraphicsEndImageContext();19        20         // 存儲圖片21         NSData *data = UIImagePNGRepresentation(screenImage);22         NSString *path = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject] stringByAppendingPathComponent:@"screenShot.png"];23         NSLog(@"%@", path);24         [data writeToFile:path atomically:YES];    });25 26 }

G.drawRect原理

為什么要實現drawRect才能繪圖到view上

因為在drawRect方法中才能取得圖文相關的上下文

H.背景平鋪

1.條紋背景

 1 - (void)viewDidLoad { 2     [super viewDidLoad]; 3     // Do any additional setup after loading the view, typically from a nib. 4     5     // 開啟圖片上下文 6     CGFloat rowW = self.view.frame.size.width; 7     CGFloat rowH = 30; 8     UIGraphicsBeginImageContextWithOptions(CGSizeMake(rowW, rowH), NO, 0.0); 9    10     CGContextRef ctx = UIGraphicsGetCurrentContext();11     // 畫色塊背景12     [[UIColor redColor] set];13     CGContextAddRect(ctx, CGRectMake(0, 0, rowW, rowH));14     CGContextFillPath(ctx);15    16     // 畫線17     [[UIColor greenColor] set];18     CGFloat lineWidth = 2;19     CGContextSetLineWidth(ctx, lineWidth);20     CGFloat lineX = 0;21     CGFloat lineY = rowH - lineWidth;22     CGContextMoveToPoint(ctx, lineX, lineY);23     CGContextAddLineToPoint(ctx, rowW - lineX, lineY);24     CGContextStrokePath(ctx);25    26     UIImage *image = UIGraphicsGetImageFromCurrentImageContext();27    28     // 使用平鋪方式鋪滿屏幕29     [self.view setBackgroundColor:[UIColor colorWithPatternImage:image]];30    31     UIGraphicsEndImageContext();32 }