[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();
 }