iOS Development UI Chapter-quartz2d (custom Uiimageview control)

First, the realization of ideas

The biggest purpose of quartz2d is to customize the view (custom UI control) to customize the view when the system view does not meet our usage requirements. Using quartz2d to customize the view, you can start with the use of ImageView that mimics the system. Demand-driven development: the process of imitating the imageview of the System 1. Create 2. Set the picture 3. Set Frame4. Add the created custom view to the interface (in a custom view, an image property is required to receive the image Image parameter->5). 5. Add an Image property (next, after you get the image, you should render the image you got.) How to render? How does the custom view show the picture? Draw the picture, so you need to rewrite the drawrect of the Custom View: method). 6. Rewrite the DrawRect: method of the custom view to draw a graphic inside the method. Second, the code to implement the system comes with the use of ImageView

  yyviewcontroller.m//  02-Custom 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];    Use of the system Uiimageview//    1. Create a uiimageview    uiimageview *iv=[[uiimageview alloc]init];//    2. Set Picture    Iv.image=[uiimage imagenamed:@ "Me"];//    3. Set frame Iv.frame=cgrectmake (+, +, +    );//    4. Add custom view created to the interface    [Self.view addsubview:iv];} @end

Implementation results:

Use quartz2d to customize the view with the following code:

Create a new custom class to inherit from the Uiview,yyimageview.h file code as follows:

1//2//  YYimageView.h 3//  02-Custom Uiimageview 4//5//  Created by Apple on 14-6-22.6//  Copyright (c) 2 014 Years itcase. All rights reserved. 7//8  9 #import <uikit/uikit.h>10 @interface yyimageview:uiview12 @property (nonatomic,strong) UIImage *ima Ge;13 @end

In the implementation of the custom class, override the DrawRect: method to draw and render the drawing. The yyimageview.m file code is as follows:

1//2//  YYIMAGEVIEW.M 3//  02-Custom Uiimageview 4//5//  Created by Apple on 14-6-22.6//  Copyright (c) 2014 itcase. All rights reserved. 7//8  9 #import "YYimageView.h" @implementation YYimageView12 13//Rewrite DrawRect: Method-(void) DrawRect: (CGRect) re ct15 {     [self.image drawinrect:rect];17}18 @end

In the main controller, imitate the system to bring the uiimageview of the use process, achieve the same effect.

 1//2//YYVIEWCONTROLLER.M 3//02-Custom Uiimageview 4//5//Created by Apple on 14-6-22.6//Copyright (c) 20 14 Itcase. All rights reserved. 7//8 9 #import "YYViewController.h" #import "YYimageView.h" @interface Yyviewcontroller () @end15 @imple Mentation YYViewController17-(void) VIEWDIDLOAD19 {[Super viewdidload];21 22/////System Uiimageview use 23// 1. Create a UIImageView24//Uiimageview *iv=[[uiimageview alloc]init];25////2. Set picture//Iv.image=[uiimage imag    enamed:@ "Me"];27////3. Set frame28//Iv.frame=cgrectmake (100, 100, 100, 100); 29////4. Add the created custom view to the interface 30// [Self.view addsubview:iv];31 32 33//Custom UIImageView34//1. Create 35//2. Set Picture 36//3. Set the Frame37//4. Create a custom view to add to the interface Yyimageview *yyiv=[[yyimageview alloc]init];39 yyiv.image=[uiimage imagenamed:@ "Me"];40 yy Iv.frame=cgrectmake (+, +, +); [Self.view addsubview:yyiv];42}44 @end 

Third, improve

Existing problems?

On the interface, add a button that requires a click of the button to enable the image to be toggled.

 1//2//YYVIEWCONTROLLER.M 3//02-Custom Uiimageview 4//5//Created by Apple on 14-6-22. 6//Copyright (c) 2014 itcase. All rights reserved. 7//8 9 #import "YYViewController.h" #import "YYimageView.h" @interface Yyviewcontroller () @property (nonatomic , strong) Uiimageview *imageview;14 @end15 @implementation YYViewController17-(void) VIEWDIDLOAD19 {[Super Vie wdidload];21 22//Uiimageview use of the system 23//1. Create a UIImageView24 uiimageview *iv=[[uiimageview alloc]init];25/ /2. Set picture Iv.image=[uiimage imagenamed:@ "Me"];27//3. Set Frame28 iv.frame=cgrectmake (100, 100, 100, 100); 29 4. Add the created custom view to the interface [Self.view addsubview:iv];31 self.imageview=iv;32 33 34//Custom UIIMAGEVIEW3 5//1. Create 36//2. Set Picture 37//3. Set Frame38//4. Add the created custom view to the interface.//Yyimageview *yyiv=[[yyimageview Alloc]i NIT];40//Yyiv.image=[uiimage imagenamed:@ "Me"];41//Yyiv.frame=cgrectmake (+, +, +);View ADDSUBVIEW:YYIV];43 44//Add a button to toggle the UIButton *btn=[[uibutton alloc]initwithframe when the button is clicked: CGRectMake (+, +, +)];46 [btn Settitlecolor:[uicolor blackcolor] forstate:uicontrolstatenormal];47 [btn S ettitle:@ "Click to Toggle" forstate:uicontrolstatenormal];48 [btn addtarget:self Action: @selector (Btnclick) forControlEvents: uicontroleventtouchupinside];49 [Self.view addsubview:btn];50 Wuyi}52-(void) btnClick54 {UIImage *image=[uiim Age imagenamed:@ "Psb.jpeg"];56 self.imageview.image=image;57}58 @end

After clicking on the button, the switch of the picture is realized.

Description: The uiimage of the system can be replaced. Custom ImageView does not change, because a custom view needs to be redrawn and rendered once when it wants to change the image. So when you get the replacement picture, you need to redraw the image again, overriding the SetImage method.

The perfect code is as follows:

The code for the YYVIEWCONTROLLER.M file in the host controller:

 1//2//YYVIEWCONTROLLER.M 3//02-Custom Uiimageview 4//5//Created by Apple on 14-6-22. 6//Copyright (c) 2014 itcase. All rights reserved. 7//8 9 #import "YYViewController.h" #import "YYimageView.h" @interface Yyviewcontroller () @property (nonatomic , strong) Uiimageview *imageview;14 @property (nonatomic,strong) yyimageview *yyimageview;15 @end16 @implementation YYViewController18-(void) VIEWDIDLOAD20 {[Super viewdidload];22 23//////System Uiimageview use 24////1. Create One UIImageView25//Uiimageview *iv=[[uiimageview alloc]init];26////2. Set picture//Iv.image=[uiimage imagenamed:@ "M E "];28////3. Set frame29//Iv.frame=cgrectmake (100, 100, 100, 100); 30////4. Add the created custom view to the interface//[Self.vie W addsubview:iv];32//SELF.IMAGEVIEW=IV;33 34 35//Custom UIIMAGEVIEW36//1. Create 37//2. Set Picture 38//3. Settings Frame39//4. Add the created custom view to the interface. Yyimageview *yyiv=[[yyimageview alloc]init];41 yyiv.image=[uiimage imagenamed :@"Me "];42 yyiv.frame=cgrectmake (+, +, +); [Self.view addsubview:yyiv];44 self.yyimageview=yyiv;45 46//Add a button to toggle picture UIButton *btn=[[uibutton Alloc]initwithframe:cgrectmake (100, 300, 100, when you click the button) ];48 [btn Settitlecolor:[uicolor blackcolor] forstate:uicontrolstatenormal];49 [btn settitle:@ "Click to Toggle" ForState:U icontrolstatenormal];50 [btn addtarget:self Action: @selector (Btnclick) forControlEvents:     uicontroleventtouchupinside];51 [Self.view addsubview:btn];52}54-(void) btnClick56 {The NSLog (@ "button was clicked"); 58 UIImage *image=[uiimage imagenamed:@ "psb.jpeg"];59//self.imageview.image=image;60 Self.yyimageview.image=imag e;61}62 @end

Code for the yyimageview.m file:

1//2//  YYIMAGEVIEW.M 3//  02-Custom Uiimageview 4//5//  Created by Apple on 14-6-22.6//  Copyright (c) 2 014 Years itcase. All rights reserved. 7//8  9 #import "YYimageView.h" @implementation YYimageView12 13//Rewrite DrawRect: Method-(void) DrawRect: (CGRect) rec t15 {     [self.image drawinrect:rect];17}18 19//Override set Method-(void) SetImage: (UIImage *) image21 {_image=image     ;     [self setneedsdisplay];24}25 @end

iOS Development UI Chapter-quartz2d (custom Uiimageview control)