这篇文章我们主要来拿官方的控件来研究一下,我们来仿照官方的控件,自己来实现它提供的控件;
首先来看看基本的图片与文字的绘制,很简单。
一、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 }
效果图: