首页 > 代码库 > [iOS UI进阶 - 1] 自定义控件
[iOS UI进阶 - 1] 自定义控件
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 =http://www.mamicode.com/ 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 =http://www.mamicode.com/ 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 }
[iOS UI进阶 - 1] 自定义控件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。