iOS開發UI篇—Quartz2D(自訂UIImageView控制項)

標籤：

iOS開發UI篇—Quartz2D(自訂UIImageView控制項)

一、實現思路

Quartz2D最大的用途在於自訂View(自訂UI控制項)，當系統的View不能滿足我們使用需求的時候，自訂View。使用Quartz2D自訂View，可以從模仿系統的ImageView的使用開始。需求驅動開發：模仿系統的imageview的使用過程1.建立2.設定圖片3.設定frame4.把建立的自訂的view添加到介面上（在自訂的View中，需要一個image屬性接收image圖片參數->5)。5.添加一個image屬性(接下來，拿到image之後，應該把拿到的這個image給渲染出來。怎麼渲染？自訂的view怎麼把圖片顯示出來？->把圖片給畫出來，所以需要重寫自訂View的drawRect:方法)。6.重寫自訂View的drawRect:方法，在該方法內部畫出圖形。 二、代碼實現　　系統內建的ImageView的使用

////  YYViewController.m//  02-自訂UIimageview////  Created by apple on 14-6-22.//  Copyright (c) 2014年 itcase. All rights reserved.//#import "YYViewController.h"@interface YYViewController ()@end@implementation YYViewController- (void)viewDidLoad{    [super viewDidLoad];    //系統的UIImageview的使用//    1.建立一個UIImageView    UIImageView *iv=[[UIImageView alloc]init];//    2.設定圖片    iv.image=[UIImage imageNamed:@"me"];//    3.設定frame    iv.frame=CGRectMake(100, 100, 100, 100);//    4.把建立的自訂的view添加到介面上    [self.view addSubview:iv];}@end

實現效果：

使用Quartz2D自訂View，代碼如下：

建立一個自訂的類，讓其繼承自UIView,YYimageView.h檔案代碼如下：

 1 // 2 //  YYimageView.h 3 //  02-自訂UIimageview 4 // 5 //  Created by apple on 14-6-22. 6 //  Copyright (c) 2014年 itcase. All rights reserved. 7 // 8  9 #import <UIKit/UIKit.h>10 11 @interface YYimageView : UIView12 @property(nonatomic,strong)UIImage *image;13 @end

　　在自訂類的實現中，重寫DrawRect:方法繪製並渲染圖形。YYimageView.m檔案代碼如下：

 1 // 2 //  YYimageView.m 3 //  02-自訂UIimageview 4 // 5 //  Created by apple on 14-6-22. 6 //  Copyright (c) 2014年 itcase. All rights reserved. 7 // 8  9 #import "YYimageView.h"10 11 @implementation YYimageView12 13 //重寫drawRect:方法14 - (void)drawRect:(CGRect)rect15 {16     [self.image drawInRect:rect];17 }18 19 @end

在主控制器中，模仿系統內建的UIImageView的使用過程，實現同樣的效果。

 1 // 2 //  YYViewController.m 3 //  02-自訂UIimageview 4 // 5 //  Created by apple on 14-6-22. 6 //  Copyright (c) 2014年 itcase. All rights reserved. 7 // 8  9 #import "YYViewController.h"10 #import "YYimageView.h"11 12 @interface YYViewController ()13 14 @end15 16 @implementation YYViewController17 18 - (void)viewDidLoad19 {20     [super viewDidLoad];21     22 //    //系統的UIImageview的使用23 ////    1.建立一個UIImageView24 //    UIImageView *iv=[[UIImageView alloc]init];25 ////    2.設定圖片26 //    iv.image=[UIImage imageNamed:@"me"];27 ////    3.設定frame28 //    iv.frame=CGRectMake(100, 100, 100, 100);29 ////    4.把建立的自訂的view添加到介面上30 //    [self.view addSubview:iv];31     32     33     //自訂UIImageView34     //1.建立35     //2.設定圖片36     //3.設定frame37     //4.把建立的自訂的view添加到介面上38     YYimageView *yyiv=[[YYimageView alloc]init];39     yyiv.image=[UIImage imageNamed:@"me"];40     yyiv.frame=CGRectMake(100, 100, 100, 100);41     [self.view addSubview:yyiv];42 43 }44 @end

三、完善

存在的問題？

在介面上，添加一個按鈕，要求點擊按鈕，能夠實現圖片的切換。

 1 // 2 //  YYViewController.m 3 //  02-自訂UIimageview 4 // 5 //  Created by apple on 14-6-22. 6 //  Copyright (c) 2014年 itcase. All rights reserved. 7 // 8  9 #import "YYViewController.h"10 #import "YYimageView.h"11 12 @interface YYViewController ()13 @property(nonatomic,strong)UIImageView *imageView;14 @end15 16 @implementation YYViewController17 18 - (void)viewDidLoad19 {20     [super viewDidLoad];21     22     //系統的UIImageview的使用23 //    1.建立一個UIImageView24     UIImageView *iv=[[UIImageView alloc]init];25 //    2.設定圖片26     iv.image=[UIImage imageNamed:@"me"];27 //    3.設定frame28     iv.frame=CGRectMake(100, 100, 100, 100);29 //    4.把建立的自訂的view添加到介面上30     [self.view addSubview:iv];31     self.imageView=iv;32     33     34     //自訂UIImageView35     //1.建立36     //2.設定圖片37     //3.設定frame38     //4.把建立的自訂的view添加到介面上39 //    YYimageView *yyiv=[[YYimageView alloc]init];40 //    yyiv.image=[UIImage imageNamed:@"me"];41 //    yyiv.frame=CGRectMake(100, 100, 100, 100);42 //    [self.view addSubview:yyiv];43     44     //添加一個button按鈕，當點擊button按鈕的時候，切換圖片45     UIButton *btn=[[UIButton alloc]initWithFrame:CGRectMake(100, 300, 100, 50)];46     [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];47     [btn setTitle:@"點擊切換" forState:UIControlStateNormal];48     [btn addTarget:self action:@selector(btnClick) forControlEvents:UIControlEventTouchUpInside];49     [self.view addSubview:btn];50 51 }52 53 -(void)btnClick54 {55     UIImage *image=[UIImage imageNamed:@"psb.jpeg"];56     self.imageView.image=image;57 }58 @end

點擊按鈕後，實現圖片的切換。

說明：系統的UIimage可以替換。而自訂imageview不會變換，因為自訂的view要想換圖片，需要重新繪製並渲染一次圖片。所以在拿到替換圖片的時候，需要重新繪製一次圖片，重寫setimage方法。

完善後的代碼如下：

主控制器中，YYViewController.m檔案的代碼：

 1 // 2 //  YYViewController.m 3 //  02-自訂UIimageview 4 // 5 //  Created by apple on 14-6-22. 6 //  Copyright (c) 2014年 itcase. All rights reserved. 7 // 8  9 #import "YYViewController.h"10 #import "YYimageView.h"11 12 @interface YYViewController ()13 @property(nonatomic,strong)UIImageView *imageView;14 @property(nonatomic,strong)YYimageView *yyimageView;15 @end16 17 @implementation YYViewController18 19 - (void)viewDidLoad20 {21     [super viewDidLoad];22     23 //    //系統的UIImageview的使用24 ////    1.建立一個UIImageView25 //    UIImageView *iv=[[UIImageView alloc]init];26 ////    2.設定圖片27 //    iv.image=[UIImage imageNamed:@"me"];28 ////    3.設定frame29 //    iv.frame=CGRectMake(100, 100, 100, 100);30 ////    4.把建立的自訂的view添加到介面上31 //    [self.view addSubview:iv];32 //    self.imageView=iv;33     34     35     //自訂UIImageView36     //1.建立37     //2.設定圖片38     //3.設定frame39     //4.把建立的自訂的view添加到介面上40     YYimageView *yyiv=[[YYimageView alloc]init];41     yyiv.image=[UIImage imageNamed:@"me"];42     yyiv.frame=CGRectMake(100, 100, 100, 100);43     [self.view addSubview:yyiv];44     self.yyimageView=yyiv;45     46     //添加一個button按鈕，當點擊button按鈕的時候，切換圖片47     UIButton *btn=[[UIButton alloc]initWithFrame:CGRectMake(100, 300, 100, 50)];48     [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];49     [btn setTitle:@"點擊切換" forState:UIControlStateNormal];50     [btn addTarget:self action:@selector(btnClick) forControlEvents:UIControlEventTouchUpInside];51     [self.view addSubview:btn];52 53 }54 55 -(void)btnClick56 {57     NSLog(@"按鈕被點擊了");58     UIImage *image=[UIImage imageNamed:@"psb.jpeg"];59 //    self.imageView.image=image;60     self.yyimageView.image=image;61 }62 @end

YYimageView.m檔案的代碼：

 1 // 2 //  YYimageView.m 3 //  02-自訂UIimageview 4 // 5 //  Created by apple on 14-6-22. 6 //  Copyright (c) 2014年 itcase. All rights reserved. 7 // 8  9 #import "YYimageView.h"10 11 @implementation YYimageView12 13 //重寫drawRect:方法14 - (void)drawRect:(CGRect)rect15 {16     [self.image drawInRect:rect];17 }18 19 //重寫set方法20 -(void)setImage:(UIImage *)image21 {22     _image=image;23     [self setNeedsDisplay];24 }25 @end

iOS開發UI篇—Quartz2D(自訂UIImageView控制項)