zoukankan      html  css  js  c++  java
  • iOS开发UI篇—Quartz2D(自定义UIImageView控件)

    iOS开发UI篇—Quartz2D(自定义UIImageView控件)

    一、实现思路

    Quartz2D最大的用途在于自定义View(自定义UI控件),当系统的View不能满足我们使用需求的时候,自定义View。
    使用Quartz2D自定义View,可以从模仿系统的ImageView的使用开始。
    需求驱动开发:模仿系统的imageview的使用过程
    1.创建
    2.设置图片
    3.设置frame
    4.把创建的自定义的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 : UIView
    12 @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 YYimageView
    12 
    13 //重写drawRect:方法
    14 - (void)drawRect:(CGRect)rect
    15 {
    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 @end
    15 
    16 @implementation YYViewController
    17 
    18 - (void)viewDidLoad
    19 {
    20     [super viewDidLoad];
    21     
    22 //    //系统的UIImageview的使用
    23 ////    1.创建一个UIImageView
    24 //    UIImageView *iv=[[UIImageView alloc]init];
    25 ////    2.设置图片
    26 //    iv.image=[UIImage imageNamed:@"me"];
    27 ////    3.设置frame
    28 //    iv.frame=CGRectMake(100, 100, 100, 100);
    29 ////    4.把创建的自定义的view添加到界面上
    30 //    [self.view addSubview:iv];
    31     
    32     
    33     //自定义UIImageView
    34     //1.创建
    35     //2.设置图片
    36     //3.设置frame
    37     //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 @end
    15 
    16 @implementation YYViewController
    17 
    18 - (void)viewDidLoad
    19 {
    20     [super viewDidLoad];
    21     
    22     //系统的UIImageview的使用
    23 //    1.创建一个UIImageView
    24     UIImageView *iv=[[UIImageView alloc]init];
    25 //    2.设置图片
    26     iv.image=[UIImage imageNamed:@"me"];
    27 //    3.设置frame
    28     iv.frame=CGRectMake(100, 100, 100, 100);
    29 //    4.把创建的自定义的view添加到界面上
    30     [self.view addSubview:iv];
    31     self.imageView=iv;
    32     
    33     
    34     //自定义UIImageView
    35     //1.创建
    36     //2.设置图片
    37     //3.设置frame
    38     //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)btnClick
    54 {
    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 @end
    16 
    17 @implementation YYViewController
    18 
    19 - (void)viewDidLoad
    20 {
    21     [super viewDidLoad];
    22     
    23 //    //系统的UIImageview的使用
    24 ////    1.创建一个UIImageView
    25 //    UIImageView *iv=[[UIImageView alloc]init];
    26 ////    2.设置图片
    27 //    iv.image=[UIImage imageNamed:@"me"];
    28 ////    3.设置frame
    29 //    iv.frame=CGRectMake(100, 100, 100, 100);
    30 ////    4.把创建的自定义的view添加到界面上
    31 //    [self.view addSubview:iv];
    32 //    self.imageView=iv;
    33     
    34     
    35     //自定义UIImageView
    36     //1.创建
    37     //2.设置图片
    38     //3.设置frame
    39     //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)btnClick
    56 {
    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 YYimageView
    12 
    13 //重写drawRect:方法
    14 - (void)drawRect:(CGRect)rect
    15 {
    16     [self.image drawInRect:rect];
    17 }
    18 
    19 //重写set方法
    20 -(void)setImage:(UIImage *)image
    21 {
    22     _image=image;
    23     [self setNeedsDisplay];
    24 }
    25 @end
  • 相关阅读:
    topcoder srm 320 div1
    topcoder srm 325 div1
    topcoder srm 330 div1
    topcoder srm 335 div1
    topcoder srm 340 div1
    topcoder srm 300 div1
    topcoder srm 305 div1
    topcoder srm 310 div1
    topcoder srm 315 div1
    如何统计iOS产品不同渠道的下载量?
  • 原文地址:https://www.cnblogs.com/wendingding/p/3802882.html
Copyright © 2011-2022 走看看