[iOS UI进阶 - 1] 自定义控件

A.关于Quiartz2D的一些细节

1.UIKit的工具已经封装了上下文引用，所以不用手动获取和渲染

 - (void)drawRect:(CGRect)rect {

     [[UIColor redColor] set];

     UIRectFill(CGRectMake(, , , ));

 }

 

 

2.多个path

 - (void)drawRect:(CGRect)rect {

     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 1.1创建第一个path

     CGMutablePathRef linePath = CGPathCreateMutable();

     // 1.2.描绘path

     CGPathMoveToPoint(linePath, NULL, , );

     CGPathAddLineToPoint(linePath, NULL, , );

     // 1.3.添加linePath到上下文

     CGContextAddPath(ctx, linePath);

     // 2添加一个圆的path

     CGMutablePathRef circlePath = CGPathCreateMutable();

     CGPathAddEllipseInRect(circlePath, NULL, CGRectMake(, , , ));

     CGContextAddPath(ctx, circlePath);

     // 渲染上下文

     CGContextStrokePath(ctx);

     // 释放path

     CGPathRelease(linePath);

     CGPathRelease(circlePath);

 }

 

 

B.自定义一个类似UIImageView的控件

 //

 //  MyImageView.h

 //  MyImageView

 //

 //  Created by hellovoidworld on 14/12/31.

 //  Copyright (c) 2014年 hellovoidworld. All rights reserved.

 //

 #import <UIKit/UIKit.h>

 @interface MyImageView : UIView

 @property(nonatomic, weak) UIImage *image;

 @end

 //

 //  MyImageView.m

 //  MyImageView

 //

 //  Created by hellovoidworld on 14/12/31.

 //  Copyright (c) 2014年 hellovoidworld. All rights reserved.

 //

 #import "MyImageView.h"

 @implementation MyImageView

 - (void)setImage:(UIImage *)image {

     _image = image;

     // 重新设置了图片的时候，重绘

     [self setNeedsDisplay];

 }

 - (void)drawRect:(CGRect)rect {

     [self.image drawInRect:rect];

 }

 @end

 controller:

 - (void)viewDidLoad {

     [super viewDidLoad];

     // Do any additional setup after loading the view, typically from a nib.

     MyImageView *imageView = [[MyImageView alloc] init];

     imageView.frame = CGRectMake(, , , );

     [self.view addSubview:imageView];

     imageView.image = [UIImage imageNamed:@"M4"];

 }

 

 

C.带有placeholder的TextView

 

 //

 //  MyTextView.h

 //  MyTextField

 //

 //  Created by hellovoidworld on 14/12/31.

 //  Copyright (c) 2014年 hellovoidworld. All rights reserved.

 //

 #import <UIKit/UIKit.h>

 @interface MyTextView : UITextView

 @property(nonatomic, copy) NSString *placeHolderText;

 @end

 

 //

 //  MyTextView.m

 //  MyTextField

 //

 //  Created by hellovoidworld on 14/12/31.

 //  Copyright (c) 2014年 hellovoidworld. All rights reserved.

 //

 #import "MyTextView.h"

 @interface MyTextView() <UITextViewDelegate>

 /** 原来的文本颜色 */

 @property(nonatomic, weak) UIColor *originalTextColor;

 @end

 @implementation MyTextView

 // 重写初始化方法，设置代理

 - (instancetype)init {

     if (self = [super init]) {

         self.returnKeyType = UIReturnKeyDone;

         self.delegate = self;

     }

     return self;

 }

 // 重新设置了placeHolderText的时候要重绘一下控件

 - (void)setPlaceHolderText:(NSString *)placeHolderText {

     _placeHolderText = placeHolderText;

     [self setNeedsDisplay];

 }

 // 开始编辑，消除placeHolder

 - (BOOL)textViewShouldBeginEditing:(UITextView *)textView {

     if ([self.text isEqualToString:self.placeHolderText]) {

         self.text = nil;

         self.textColor = self.originalTextColor;

     }

     return YES;

 }

 // 结束编辑，如果文本为空，设置placeHolder

 - (void)textViewDidEndEditing:(UITextView *)textView {

     [self setNeedsDisplay];

 }

 - (void)drawRect:(CGRect)rect {

     if (self.text.length == ) {

         self.text = self.placeHolderText;

         self.textColor = [UIColor grayColor];

     }

 }

 @end

 

 

D. 图片水印

1.步骤

（1）在storyboard拖入一个UIImageView， 在控制器代码创建图片上下文

创建一个基于位图的上下文 --> 系统创建一个位图对象

相当于创建了一个新的UIImage对象

（2）画背景

（3）画水印

（4）从上下文取得制作完毕的UIImage对象

（5）结束图片上下文

 //

 //  UIImage+HW.m

 //  Watermark

 //

 //  Created by hellovoidworld on 14/12/31.

 //  Copyright (c) 2014年 hellovoidworld. All rights reserved.

 //

 #import "UIImage+HW.h"

 @implementation UIImage(HW)

 + (instancetype) image:(NSString *) image withWatermark:(NSString *) watermark {

     // 取得背景图片

     UIImage *bgImage = [UIImage imageNamed:image];

     // 1.开启一个位图上下文

     UIGraphicsBeginImageContextWithOptions(bgImage.size, NO, 0.0);

     // 2.添加背景图片到位图上下文

     [bgImage drawInRect:CGRectMake(, , bgImage.size.width, bgImage.size.height)];

     // 3.添加水印图片

     UIImage *watermarkImage = [UIImage imageNamed:watermark];

     CGFloat scale = 0.5;

     CGFloat margin = ;

     CGFloat watermarkWidth = watermarkImage.size.width * scale;

     CGFloat watermarkHeight = watermarkImage.size.width *scale;

     CGFloat watermarkX = bgImage.size.width - watermarkWidth - margin;

     CGFloat watermarkY = bgImage.size.height - watermarkHeight - margin;

     [watermarkImage drawInRect:CGRectMake(watermarkX, watermarkY, watermarkWidth, watermarkHeight)];

     // 4.取得合成后的图片

     UIImage *resultImage = UIGraphicsGetImageFromCurrentImageContext();

     // 5.关闭图文上下文

     UIGraphicsEndImageContext();

     return resultImage;

 }

 @end

 

（6）显示到UIImageView

 - (void)viewDidLoad {

     [super viewDidLoad];

     // Do any additional setup after loading the view, typically from a nib.

     UIImage *watermarkedImage = [UIImage image:@"M4" withWatermark:@"a9ec8a13632762d0092abc3ca2ec08fa513dc619"];

     UIImageView *imageView = [[UIImageView alloc] initWithImage:watermarkedImage];

     imageView.frame = CGRectMake(, , , );

     [self.view addSubview:imageView];

 }

 

（7）保存图片

a.将image压缩

b.写入文件

     // 压缩图片为PNG格式的二进制数据

     NSData *data = UIImagePNGRepresentation(watermarkedImage);

     // 写入文件

     NSString *path =[[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject] stringByAppendingPathComponent:@"watermarkedImage.png"];

     NSLog(@"%@", path);

     [data writeToFile:path atomically:YES];

 

 

 

E.头像图片裁剪

裁剪的图片形成新的图片，这里是讲矩形图片裁剪成圆形并带白色边框

1.步骤

（1）背景大圆

（2）小圆裁剪

（3）加入图片

 

 /**  创建带有指定宽度和颜色边框的圆形头像图片 */

 + (instancetype) imageOfCircleHeadIcon:(NSString *) image withBorderWidth:(CGFloat) borderWidth borderColor:(UIColor *) borderColor {

     //  取得图片

     UIImage *headIconImage = [UIImage imageNamed:image];

     // 开启图片上下文

     CGFloat backImageWidth = headIconImage.size.width +  * borderWidth;

     CGFloat backImageHeight = headIconImage.size.height +  * borderWidth;

     CGSize backImageSize = CGSizeMake(backImageWidth, backImageHeight);

     UIGraphicsBeginImageContextWithOptions(backImageSize, NO, 0.0);

     // 描绘背景大圆

     [borderColor set]; // 设置圆环颜色

     CGContextRef ctx = UIGraphicsGetCurrentContext();

     CGFloat backCircleRadius = backImageWidth * 0.5; // 大圆半径

     CGFloat backCircleX = backCircleRadius; // 大圆圆心X

     CGFloat backCircleY = backCircleRadius; // 大圆圆心Y

     CGContextAddArc(ctx, backCircleX, backCircleY, backCircleRadius, , M_PI * , );

     CGContextFillPath(ctx);

     // 描绘用来显示图片的小圆

     CGFloat frontCircleRadius = backCircleRadius - borderWidth; // 图片小圆半径

     CGFloat frontCircleX = backCircleX;

     CGFloat frontCircleY = backCircleY;

     CGContextAddArc(ctx, frontCircleX, frontCircleY, frontCircleRadius, , M_PI * , );

     // 裁剪（后面描绘的将会受到裁剪）

     CGContextClip(ctx);

     // 添加图片到上下文

     [headIconImage drawInRect:CGRectMake(borderWidth, borderWidth, headIconImage.size.width, headIconImage.size.height)];

     // 取得合成后的图片

     UIImage *headIconResultImage = UIGraphicsGetImageFromCurrentImageContext();

     // 关闭图片上下文

     UIGraphicsEndImageContext();

     return headIconResultImage;

 }

 

 

 

F.屏幕截图

1.步骤

（1）使用位图上下文

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

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

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

（4）结束位图上下文

 

 

 /** 点击“屏幕截图” */

 - (IBAction)screenShotcut {

     // 延迟截图， 防止截到的时按钮被按下的状态

     dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

         UIView *view = self.view;

         // 1.开启位图上下文

         UIGraphicsBeginImageContextWithOptions(view.frame.size, NO, 0.0);

         // 2.渲染控制器view的layer到上下文

         [view.layer renderInContext:UIGraphicsGetCurrentContext()];

         // 3.从上下文取得图片

         UIImage *screenImage = UIGraphicsGetImageFromCurrentImageContext();

         // 4.结束上下文

         UIGraphicsEndImageContext();

         // 存储图片

         NSData *data = UIImagePNGRepresentation(screenImage);

         NSString *path = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject] stringByAppendingPathComponent:@"screenShot.png"];

         NSLog(@"%@", path);

         [data writeToFile:path atomically:YES];    });

 }

 

 

 

 

G.drawRect原理

为什么要实现drawRect才能绘图到view上

因为在drawRect方法中才能取得图文相关的上下文

 

 

H.背景平铺

1.条纹背景

 - (void)viewDidLoad {

     [super viewDidLoad];

     // Do any additional setup after loading the view, typically from a nib.

     // 开启图片上下文

     CGFloat rowW = self.view.frame.size.width;

     CGFloat rowH = ;

     UIGraphicsBeginImageContextWithOptions(CGSizeMake(rowW, rowH), NO, 0.0);

     CGContextRef ctx = UIGraphicsGetCurrentContext();

     // 画色块背景

     [[UIColor redColor] set];

     CGContextAddRect(ctx, CGRectMake(, , rowW, rowH));

     CGContextFillPath(ctx);

     // 画线

     [[UIColor greenColor] set];

     CGFloat lineWidth = ;

     CGContextSetLineWidth(ctx, lineWidth);

     CGFloat lineX = ;

     CGFloat lineY = rowH - lineWidth;

     CGContextMoveToPoint(ctx, lineX, lineY);

     CGContextAddLineToPoint(ctx, rowW - lineX, lineY);

     CGContextStrokePath(ctx);

     UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

     // 使用平铺方式铺满屏幕

     [self.view setBackgroundColor:[UIColor colorWithPatternImage:image]];

     UIGraphicsEndImageContext();

 }