ios开发自定义tabbar ios开发自定义绘图教程

这篇文章我们主要来拿官方的控件来研究一下，我们来仿照官方的控件，自己来实现它提供的控件；

首先来看看基本的图片与文字的绘制，很简单。

一、imageView

所有的视图都是继承自UIView，所以我们的ImageView也是继承自UIView，我们自己写的用My开头，以便于区分。

1、对于ImageView，我们需要绘制，需要提供图片资源，所以在我们的头文件里我们这样定义:

 

2、回到MyImageView.m文件里，找到绘制函数：

嗯，没错这样就写完了。。。

接下来回到ViewController.m里试试我们自己写的控件吧！

3、在ViewController.m中引入我们刚才自定义的View，

1 @interface ViewController (){
 2 
 3     MyImageView *imageView;
 4     
 5 }
 6 
 7 @end
 8 
 9 @implementation ViewController
10 
11 - (void)viewDidLoad {
12     [super viewDidLoad];
13     // Do any additional setup after loading the view, typically from a nib.
14     imageView = [[MyImageView alloc] initWithFrame:(CGRect){20,20,100,100}];
15     imageView.image = [UIImage imageNamed:@"u=1940733206,3299197276&fm=21&gp=0"];
16     [self.view addSubview:imageView];
17    
18 }

看看效果：

还不错吧，是不是和苹果官方提供的控件一样好用。。

二、Label

Label的绘制会稍微复杂一点，

首先还是创建我们自己的View（MyLabel）。

1、打开MyLabel.h文件，

设置我们在UILabel控件中常用的属性，这里只写几个举例说明一下，具体用到时候根据需要设置。

2、回到MyLabel.m文件，

1 #import "MyLabel.h"
 2 
 3 @implementation MyLabel
 4 
 5 
 6 // Only override drawRect: if you perform custom drawing.
 7 // An empty implementation adversely affects performance during animation.
 8 - (void)drawRect:(CGRect)rect {
 9     // Drawing code
10     
11     NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
12     paragraphStyle.lineBreakMode = NSLineBreakByCharWrapping;
13     paragraphStyle.alignment = NSTextAlignmentLeft;
14     
15     NSDictionary *dic = @{NSParagraphStyleAttributeName:paragraphStyle,
16                           NSForegroundColorAttributeName:_textColor,//设置字体颜色
17                           NSBackgroundColorAttributeName:_backgroundColor,//设置背景色
18                           NSFontAttributeName:_font,//设置字体
19                           NSStrokeWidthAttributeName:@3,//设置描边宽度，这样就能使文字空心
20                           NSStrokeColorAttributeName:[UIColor greenColor],//设置文字描边颜色
21                           };
22     [_text drawInRect:(CGRect){0,0,200,40} withAttributes:dic];
23     
24     
25 }

3、回到ViewController.m文件，

引入MyLabel.h文件，

1 @interface ViewController (){
 2 
 3     MyImageView *imageView;
 4     MyLabel *label;
 5 }
 6 
 7 @end
 8 
 9 @implementation ViewController
10 
11 - (void)viewDidLoad {
12     [super viewDidLoad];
13     // Do any additional setup after loading the view, typically from a nib.
14     imageView = [[MyImageView alloc] initWithFrame:(CGRect){20,20,100,100}];
15     imageView.image = [UIImage imageNamed:@"u=1940733206,3299197276&fm=21&gp=0"];
16     [self.view addSubview:imageView];
17     
18     label = [[MyLabel alloc] initWithFrame:(CGRect){20,150,105,22}];
19     label.text = @"Hello,World!";
20     label.backgroundColor = [UIColor whiteColor];
21     label.textColor = [UIColor orangeColor];
22     label.font = [UIFont systemFontOfSize:20];
23     [self.view addSubview:label];
24 }

效果图：

 

三、自定义Button

首先新建View（MyButton），继承自UIView，为什么不直接继承自UIControl？因为我们要自己添加手势！

1、打开MyButton.h文件,添加方法

1 #import <UIKit/UIKit.h>
2 
3 @interface MyButton : UIView
4 
5 - (void)addTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents;//添加手势
6 - (void)setImage:(UIImage*)image forState:(UIControlState)state;//设置button图片
7 - (void)setTitle:(NSString*)title forState:(UIControlState)state;//设置文字
8 
9 @end

2、打开MyButton.m文件，

声明自定义属性，及其初始化方法，

1 //
 2 //  MyButton.m
 3 //  Draw
 4 //
 5 //  Created by Oran Wu on 15-12-30.
 6 //  Copyright (c) 2015年 Xinxin. All rights reserved.
 7 //
 8 
 9 #import "MyButton.h"
10 
11 @interface MyButton (){
12 
13     UIControlEvents controlEvent;
14     
15     UIImage *_buttonImage;
16     UIControlState controlState;
17     
18     NSString *_buttonTitle;
19     
20     UIBezierPath *buttonPath;
21 }
22 @property(nonatomic,weak)id targate;
23 @property(nonatomic,assign)SEL buttonAction;
24 
25 @end
26 
27 @implementation MyButton
28 
29 - (id)initWithFrame:(CGRect)frame{
30     self = [super initWithFrame:frame];
31     if (self) {
32         self.backgroundColor = [UIColor whiteColor];
33     }
34     return self;
35 }
36 
37 - (void)addTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents{
38     
39     self.targate = target;
40     self.buttonAction = action;
41     controlEvent = controlEvents;
42 
43 }
44 
45 - (void)setImage:(UIImage *)image forState:(UIControlState)state{
46     _buttonImage = image;
47     controlState = state;
48     [self setNeedsDisplay];
49 }
50 
51 - (void)setTitle:(NSString *)title forState:(UIControlState)state{
52     _buttonTitle = title;
53     controlState = state;
54     [self setNeedsDisplay];
55 }

3、绘制Button，添加点击事件；

1 - (void)drawRect:(CGRect)rect {
 2     // Drawing code
 3     UIColor *color = [UIColor colorWithRed:0.3 green:0.7 blue:0.6 alpha:0.5];
 4     [color set];
 5     
 6     buttonPath = [UIBezierPath bezierPathWithRoundedRect:(CGRect){0,0,100,50} cornerRadius:8];
 7     buttonPath.lineWidth = 3;
 8     [buttonPath fill];
 9     
10     //设置图片
11     [_buttonImage drawInRect:(CGRect){0,0,100,50}];
12     
13     //设置文字
14     NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
15     paragraphStyle.lineBreakMode = NSLineBreakByCharWrapping;
16     paragraphStyle.alignment = NSTextAlignmentCenter;
17     
18     NSDictionary *dic = @{NSParagraphStyleAttributeName:paragraphStyle,
19                           NSForegroundColorAttributeName:[UIColor redColor],//设置字体颜色
20                           NSBackgroundColorAttributeName:[UIColor clearColor],//设置背景色
21                           NSFontAttributeName:[UIFont systemFontOfSize:20],//设置字体
22                           NSStrokeWidthAttributeName:@5,//设置描边宽度，这样就能使文字空心
23                           NSStrokeColorAttributeName:[UIColor purpleColor],//设置文字描边颜色
24                           };
25     [_buttonTitle drawInRect:(CGRect){0,10,100,30} withAttributes:dic];
26     
27 }
28 
29 //开始触摸
30 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
31     //按需求设置点击状态
32 }
33 
34 //结束触摸
35 - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
36     
37     if (controlEvent==UIControlEventTouchUpInside) {
38         
39         [self.targate performSelector:self.buttonAction withObject:self];
40 
41     }
42 
43 }

4、返回ViewController.m文件试试我们自定义的Button；

同样，引入头文件，

在- (void)viewDidLoad;方法中写入以下代码（这里设置了Button的背景颜色，就没有设置图片，如果有需要把文字加在图片上面也是可以的）；

1  
2     button = [[MyButton alloc] initWithFrame:(CGRect){20,200,100,50}];
3     [button setTitle:@"myButton" forState:UIControlStateNormal];
4     //[button setImage:[UIImage imageNamed:@"u=38807319,2604887842&fm=15&gp=0"] forState:UIControlStateNormal];
5     [self.view addSubview:button];
6     [button addTarget:self action:@selector(buttonAction) forControlEvents:UIControlEventTouchUpInside];

效果图：

Button点击动作响应：

1 - (void)buttonAction{
2     //设置改变文字
3     [button setTitle:@"Change" forState:UIControlStateNormal];
4 
5 }

效果图：